@itwin/core-react 4.1.0 → 4.2.0-dev.1

package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
-
-.core-number-input-container {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-
-  input {
-    margin: 0;
-    padding-right: 1.5em;
-
-    &.iui-input {
-      padding: $uicore-iui-input-padding;
-    }
-  }
-
-  &.core-number-buttons-for-touch {
-    input {
-      padding-right: 3.5em;
-    }
-  }
-
-  .core-number-input-buttons-container {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    @include uicore-centered;
-    flex-direction: column;
-
-    .core-number-input-button {
-      font-size: 8px;
-      outline: none;
-      height: 100%;
-      width: 100%;
-      @include uicore-centered;
-      &:hover {
-        color: var(--iui-color-text-accent-hover);
-        transition-duration: 150ms;
-      }
-      &.core-number-input-button-up {
-        padding-top: 1px;
-      }
-      &.core-number-input-button-down {
-        padding-top: 1px;
-      }
-    }
-
-    &.core-number-buttons-for-touch {
-      width: 3.5em;
-      flex-direction: row-reverse;
-
-      .core-number-input-button {
-        font-size: 1em;
-
-        &:hover {
-          color: unset;
-          transition-duration: unset;
-        }
-
-        &.core-number-input-button-up {
-          padding-top: 2px;
-        }
-        &.core-number-input-button-down {
-          padding-top: 2px;
-        }
-      }
-    }
-  }
-  &.core-number-input-disabled {
-    .core-number-input-button-up {
-      pointer-events: none;
-      color: var(--iui-color-text-disabled);
-    }
-
-    .core-number-input-button-down {
-      pointer-events: none;
-      color: var(--iui-color-text-disabled);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../base/base";
+@import "../variables";
+
+.core-number-input-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  input {
+    margin: 0;
+    padding-right: 1.5em;
+
+    &.iui-input {
+      padding: $uicore-iui-input-padding;
+    }
+  }
+
+  &.core-number-buttons-for-touch {
+    input {
+      padding-right: 3.5em;
+    }
+  }
+
+  .core-number-input-buttons-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    @include uicore-centered;
+    flex-direction: column;
+
+    .core-number-input-button {
+      font-size: 8px;
+      outline: none;
+      height: 100%;
+      width: 100%;
+      @include uicore-centered;
+      &:hover {
+        color: var(--iui-color-text-accent-hover);
+        transition-duration: 150ms;
+      }
+      &.core-number-input-button-up {
+        padding-top: 1px;
+      }
+      &.core-number-input-button-down {
+        padding-top: 1px;
+      }
+    }
+
+    &.core-number-buttons-for-touch {
+      width: 3.5em;
+      flex-direction: row-reverse;
+
+      .core-number-input-button {
+        font-size: 1em;
+
+        &:hover {
+          color: unset;
+          transition-duration: unset;
+        }
+
+        &.core-number-input-button-up {
+          padding-top: 2px;
+        }
+        &.core-number-input-button-down {
+          padding-top: 2px;
+        }
+      }
+    }
+  }
+  &.core-number-input-disabled {
+    .core-number-input-button-up {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    .core-number-input-button-down {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+  }
+}

package/lib/cjs/core-react/inputs/variables.scss

@@ -1,38 +1,38 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/baseline";
-@import "../style/themecolors";
-
-// cspell:ignore unbordered
-
-$uicore-inputs-height: 22px;
-$uicore-inputs-height-large: 40px;
-$uicore-line-height: calc(var(--iui-size-s) * 1.4);
-$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
-$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
-
-$uicore-inputs-padding: calc(
-  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
-);
-$uicore-inputs-padding-large: calc(
-  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
-);
-$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
-$uicore-inputs-padding-bordered-large: calc(
-  #{$uicore-inputs-padding-large} - 2px
-);
-
-$uicore-inputs-margin: calc(
-  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
-);
-$uicore-inputs-margin-large: calc(
-  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
-);
-
-$uicore-inputs-border-color: $buic-inputs-border;
-
-$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
-
-$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/baseline";
+@import "../style/themecolors";
+
+// cspell:ignore unbordered
+
+$uicore-inputs-height: 22px;
+$uicore-inputs-height-large: 40px;
+$uicore-line-height: calc(var(--iui-size-s) * 1.4);
+$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
+$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
+
+$uicore-inputs-padding: calc(
+  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-large: calc(
+  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
+$uicore-inputs-padding-bordered-large: calc(
+  #{$uicore-inputs-padding-large} - 2px
+);
+
+$uicore-inputs-margin: calc(
+  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
+);
+$uicore-inputs-margin-large: calc(
+  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
+);
+
+$uicore-inputs-border-color: $buic-inputs-border;
+
+$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+
+$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);

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

@@ -1,17 +1,15 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./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.9;
+  /** Default Toolbar Opacity */
+  --buic-toolbar-opacity: 0.5;
+
+  /** CSS variables for each z-index layer */
+  @include uicore-z-index-variables();
+}

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

@@ -15,7 +15,7 @@ export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttribut
     selectedValue?: ListboxValue;
     ariaLabel?: any;
     ariaLabelledBy?: any;
-    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    onListboxValueChange?: (newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void;
 }
 /**
  * `ListboxItem` Props.
@@ -35,7 +35,7 @@ export interface ListboxContextProps {
     listboxId?: string;
     listboxValue?: ListboxValue;
     focusValue?: ListboxValue;
-    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    onListboxValueChange: (newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void;
     listboxRef?: React.RefObject<HTMLUListElement>;
 }
 /**

package/lib/cjs/core-react/listbox/Listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,gBAAgB,CAAC;AAIxB,sEAAsE;AAEtE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACrH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,YAAY,EAAE,yBAAyB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CAChG;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IACrH,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,YAAY,EAAE,yBAAyB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IAC9F,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AAEH,eAAO,MAAM,cAAc,oCAAmH,CAAC;AAmD/I;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAyJ1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA8DlD"}
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,gBAAgB,CAAC;AAIxB,sEAAsE;AAEtE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC;;;GAGG;AACH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,gBAAgB,CACjB;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,CACrB,QAAQ,EAAE,YAAY,EACtB,yBAAyB,CAAC,EAAE,OAAO,KAChC,IAAI,CAAC;CACX;AAED;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EACrC,aAAa,CACd;IACD,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB,EAAE,CACpB,QAAQ,EAAE,YAAY,EACtB,yBAAyB,CAAC,EAAE,OAAO,KAChC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AAEH,eAAO,MAAM,cAAc,oCAEzB,CAAC;AA4DH;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eA6M1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA0DlD"}

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListboxItem = exports.Listbox = exports.ListboxContext = void 0;
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 const React = require("react");
 const classnames_1 = require("classnames");
 require("./Listbox.scss");
@@ -15,12 +15,16 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
  * @alpha
  */
 // istanbul ignore next
-exports.ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
+exports.ListboxContext = React.createContext({
+    onListboxValueChange: (_newValue) => { },
+});
 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);
+    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;
@@ -71,7 +75,9 @@ function processKeyboardNavigation(optionValues, itemIndex, key) {
 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 : core_bentley_1.Guid.createValue(); });
+    const [listId] = React.useState(() => {
+        return id !== null && id !== void 0 ? id : core_bentley_1.Guid.createValue();
+    });
     const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
     const classes = React.useMemo(() => (0, classnames_1.default)("core-listbox", className), [className]);
     const [currentValue, setCurrentValue] = React.useState(selectedValue);
@@ -95,7 +101,6 @@ function Listbox(props) {
         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) {
@@ -119,7 +124,9 @@ function Listbox(props) {
     const handleKeyDown = React.useCallback((event) => {
         if (optionValues.length < 1)
             return;
-        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
+        const itemIndex = undefined === focusValue
+            ? -1
+            : optionValues.findIndex((optionValue) => optionValue.value === focusValue);
         if (event.key === appui_abstract_1.SpecialKey.Space) {
             event.preventDefault();
             // istanbul ignore else
@@ -146,7 +153,7 @@ function Listbox(props) {
         if (isInitialMount.current) {
             isInitialMount.current = false;
             if (undefined !== focusValue) {
-                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
+                const itemIndex = optionValues.findIndex((optionValue) => optionValue.value === focusValue);
                 focusOption(itemIndex);
             }
         }
@@ -171,7 +178,7 @@ function Listbox(props) {
             }
         }
     }, [currentValue, focusValue, optionValues]);
-    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
+    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
@@ -184,7 +191,7 @@ function Listbox(props) {
                 listboxId: listId,
                 onListboxValueChange: handleValueChange,
                 listboxRef: listRef,
-            } }, children));
+            } }, children)));
 }
 exports.Listbox = Listbox;
 /**
@@ -193,7 +200,7 @@ exports.Listbox = Listbox;
  */
 function ListboxItem(props) {
     const { children, value, className, disabled, ...otherProps } = props;
-    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(exports.ListboxContext);
+    const { listboxValue, focusValue, listboxId, onListboxValueChange } = React.useContext(exports.ListboxContext);
     const hasFocus = focusValue === value;
     const classes = React.useMemo(() => (0, classnames_1.default)("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
     const itemRef = React.useRef(null);

package/lib/cjs/core-react/listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.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\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\n\r\nimport \"./Listbox.scss\";\r\nimport { Guid } from \"@itwin/core-bentley\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\n\r\n/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */\r\n\r\n/**\r\n * `Listbox` value.\r\n * @alpha\r\n */\r\nexport type ListboxValue = string;\r\n\r\n/**\r\n * `Listbox` Props.\r\n * @alpha\r\n */\r\nexport interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {\r\n  id?: string;\r\n  selectedValue?: ListboxValue;\r\n  ariaLabel?: any;\r\n  ariaLabelledBy?: any;\r\n  onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\r\n}\r\n\r\n/**\r\n * `ListboxItem` Props.\r\n * @alpha\r\n */\r\nexport interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {\r\n  /** The unique item's value. */\r\n  value: ListboxValue;\r\n  /** set if item is disabled. */\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * `Listbox` Context.\r\n * @alpha\r\n */\r\nexport interface ListboxContextProps {\r\n  listboxId?: string;\r\n  listboxValue?: ListboxValue;\r\n  focusValue?: ListboxValue;\r\n  onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);\r\n  listboxRef?: React.RefObject<HTMLUListElement>;\r\n}\r\n\r\n/**\r\n * Context set up by listbox for use by `ListboxItems` .\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport const ListboxContext = React.createContext<ListboxContextProps>({ onListboxValueChange: (_newValue: ListboxValue | undefined) => { } }); // eslint-disable-line @typescript-eslint/naming-convention\r\n\r\nfunction makeId(...args: Array<string | number | null | undefined>) {\r\n  return args.filter((val) => val != null).join(\"--\");\r\n}\r\n\r\nfunction getOptionValueArray(childNodes: React.ReactNode): ListboxItemProps[] {\r\n  return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => ((optionNode as React.ReactElement).props as ListboxItemProps));\r\n}\r\n\r\nfunction processKeyboardNavigation(optionValues: ListboxItemProps[], itemIndex: number, key: string): [number, boolean] {\r\n  let keyProcessed = false;\r\n  let newIndex = itemIndex >= 0 ? itemIndex : 0;\r\n\r\n  // 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\r\n  if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {\r\n    for (let i = itemIndex + 1; i < optionValues.length; i++) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {\r\n    for (let i = itemIndex - 1; i >= 0; i--) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.Home) {\r\n    for (let i = 0; i < optionValues.length; i++) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  } else if (key === SpecialKey.End) {\r\n    for (let i = optionValues.length - 1; i >= 0; i--) {\r\n      if (!optionValues[i].disabled) {\r\n        newIndex = i;\r\n        break;\r\n      }\r\n    }\r\n    keyProcessed = true;\r\n  }\r\n  return [newIndex, keyProcessed];\r\n}\r\n\r\n/**\r\n * Single select `Listbox` component\r\n * @alpha\r\n */\r\nexport function Listbox(props: ListboxProps) {\r\n  const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;\r\n  const listRef = React.useRef<HTMLUListElement>(null);\r\n  const [listId] = React.useState(() => { return id ?? Guid.createValue(); });\r\n  const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);\r\n  const classes = React.useMemo(() => classnames(\"core-listbox\", className), [className]);\r\n  const [currentValue, setCurrentValue] = React.useState<ListboxValue | undefined>(selectedValue);\r\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(currentValue);\r\n\r\n  React.useEffect(() => {\r\n    setCurrentValue(selectedValue);\r\n    setFocusValue(selectedValue);\r\n  }, [selectedValue]);\r\n\r\n  const scrollTopRef = React.useRef(0);\r\n  const handleValueChange = React.useCallback((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => {\r\n    // istanbul ignore else\r\n    if (newValue !== currentValue) {\r\n      setCurrentValue(newValue);\r\n      setFocusValue(newValue);\r\n      if (onListboxValueChange)\r\n        onListboxValueChange(newValue, isControlOrCommandPressed);\r\n    }\r\n  }, [setCurrentValue, currentValue, onListboxValueChange]);\r\n\r\n  const focusOption = React.useCallback((itemIndex: number) => {\r\n    // istanbul ignore else\r\n    if (itemIndex >= 0 && itemIndex < optionValues.length) {\r\n      const newSelection = optionValues[itemIndex];\r\n      const listElement = listRef.current as HTMLUListElement;\r\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n      const optionToFocus = listElement.querySelector(`li[data-value=\"${newSelection.value}\"]`) as HTMLLIElement | null;\r\n      // istanbul ignore else\r\n      if (optionToFocus && listElement) {\r\n        let newScrollTop = listElement.scrollTop;\r\n\r\n        // istanbul ignore next\r\n        if (listElement.scrollHeight > listElement.clientHeight) {\r\n          const scrollBottom = listElement.clientHeight + listElement.scrollTop;\r\n          const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;\r\n          if (elementBottom > scrollBottom) {\r\n            newScrollTop = elementBottom - listElement.clientHeight;\r\n          } else if (optionToFocus.offsetTop < listElement.scrollTop) {\r\n            newScrollTop = optionToFocus.offsetTop;\r\n          }\r\n          scrollTopRef.current = newScrollTop;\r\n        }\r\n        setFocusValue(newSelection.value);\r\n      }\r\n    }\r\n  }, [optionValues]);\r\n\r\n  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\r\n    if (optionValues.length < 1)\r\n      return;\r\n\r\n    const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));\r\n\r\n    if (event.key === SpecialKey.Space) {\r\n      event.preventDefault();\r\n      // istanbul ignore else\r\n      if (focusValue)\r\n        handleValueChange(focusValue, event.getModifierState(\"Control\") || event.getModifierState(\"Meta\"));  // Control or Command\r\n      return;\r\n    } else {\r\n      const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);\r\n      // istanbul ignore else\r\n      if (keyProcessed) {\r\n        event.preventDefault();\r\n        focusOption(newItemIndex);\r\n        return;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (onKeyDown)\r\n      onKeyDown(event);\r\n  }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);\r\n\r\n  const isInitialMount = React.useRef(true);\r\n\r\n  React.useEffect(() => {\r\n    const list = listRef.current as HTMLUListElement;\r\n\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n\r\n      if (undefined !== focusValue) {\r\n        const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));\r\n        focusOption(itemIndex);\r\n      }\r\n    } else {\r\n      list.scrollTop = scrollTopRef.current;\r\n    }\r\n  }, [focusValue, focusOption, optionValues]);\r\n\r\n  // istanbul ignore next\r\n  const handleOnScroll = React.useCallback((_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\r\n    if (listRef.current)\r\n      scrollTopRef.current = listRef.current.scrollTop;\r\n  }, []);\r\n\r\n  // istanbul ignore next\r\n  const handleOnFocus = React.useCallback((_event: React.FocusEvent<HTMLUListElement>) => {\r\n    if (!focusValue || 0 === focusValue.length) {\r\n      if (currentValue) {\r\n        setFocusValue(currentValue);\r\n      } else {\r\n        if (optionValues.length > 0)\r\n          setFocusValue(optionValues[0].value);\r\n      }\r\n    }\r\n  }, [currentValue, focusValue, optionValues]);\r\n\r\n  return <ul\r\n    className={classes}\r\n    // If the listbox is not part of another widget, then it has a visible\r\n    // label referenced by `aria-labelledby` on the element with role\r\n    // `listbox`.\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n    // If an `aria-label` is passed, we should skip `aria-labelledby` to\r\n    // avoid confusion.\r\n    aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}\r\n    aria-label={ariaLabel}\r\n    // An element that contains or owns all the listbox options has role\r\n    // listbox.\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n    role=\"listbox\"\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html\r\n    tabIndex={0}\r\n    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-scrollable.html\r\n    aria-activedescendant={makeId(currentValue, listId)}\r\n    {...otherProps}\r\n    ref={listRef}\r\n    id={listId}\r\n    onKeyDown={handleKeyDown}\r\n    onScroll={handleOnScroll}\r\n    data-value={currentValue}\r\n    data-focusvalue={focusValue}\r\n    onFocus={handleOnFocus}\r\n  >\r\n    <ListboxContext.Provider\r\n      value={{\r\n        listboxValue: currentValue,\r\n        focusValue,\r\n        listboxId: listId,\r\n        onListboxValueChange: handleValueChange,\r\n        listboxRef: listRef,\r\n      }}\r\n    >\r\n      {children}\r\n    </ListboxContext.Provider>\r\n  </ul>;\r\n}\r\n\r\n/**\r\n * `ListboxItem` component.\r\n * @alpha\r\n */\r\nexport function ListboxItem(props: ListboxItemProps) {\r\n  const {\r\n    children,\r\n    value,\r\n    className,\r\n    disabled,\r\n    ...otherProps\r\n  } = props;\r\n\r\n  const {\r\n    listboxValue,\r\n    focusValue,\r\n    listboxId,\r\n    onListboxValueChange,\r\n  } = React.useContext(ListboxContext);\r\n\r\n  const hasFocus = focusValue === value;\r\n\r\n  const classes = React.useMemo(() => classnames(\"core-listbox-item\", hasFocus && \"focused\", className), [className, hasFocus]);\r\n  const itemRef = React.useRef<HTMLLIElement>(null);\r\n  const isSelected = listboxValue === value;\r\n\r\n  const handleClick = React.useCallback((event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\r\n    event.preventDefault();\r\n    // istanbul ignore next\r\n    const selectedValue = event.currentTarget?.dataset?.value;\r\n    // istanbul ignore else\r\n    if (undefined !== selectedValue) {\r\n      onListboxValueChange(selectedValue, event.ctrlKey);\r\n    }\r\n  }, [onListboxValueChange]);\r\n\r\n  const getItemId = React.useCallback(() => {\r\n    return makeId(value, listboxId);\r\n  }, [listboxId, value]);\r\n\r\n  return (\r\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n    <li\r\n      // In a single-select listbox, the selected option has `aria-selected`\r\n      // set to `true`.\r\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n      aria-selected={isSelected}\r\n      // Applicable to all host language elements regardless of whether a\r\n      // `role` is applied.\r\n      // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header\r\n      aria-disabled={disabled || undefined}\r\n      // Each option in the listbox has role `option` and is a DOM descendant\r\n      // of the element with role `listbox`.\r\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\r\n      role=\"option\"\r\n      className={classes}\r\n      {...otherProps}\r\n      ref={itemRef}\r\n      id={getItemId()}\r\n      // used for css styling\r\n      data-value={value}\r\n      onClick={handleClick}\r\n    >\r\n      {children}\r\n    </li>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../src/core-react/listbox/Listbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\n\nimport \"./Listbox.scss\";\nimport { Guid } from \"@itwin/core-bentley\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */\n\n/**\n * `Listbox` value.\n * @alpha\n */\nexport type ListboxValue = string;\n\n/**\n * `Listbox` Props.\n * @alpha\n */\nexport interface ListboxProps\n  extends React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLUListElement>,\n    HTMLUListElement\n  > {\n  id?: string;\n  selectedValue?: ListboxValue;\n  ariaLabel?: any;\n  ariaLabelledBy?: any;\n  onListboxValueChange?: (\n    newValue: ListboxValue,\n    isControlOrCommandPressed?: boolean\n  ) => void;\n}\n\n/**\n * `ListboxItem` Props.\n * @alpha\n */\nexport interface ListboxItemProps\n  extends React.DetailedHTMLProps<\n    React.LiHTMLAttributes<HTMLLIElement>,\n    HTMLLIElement\n  > {\n  /** The unique item's value. */\n  value: ListboxValue;\n  /** set if item is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * `Listbox` Context.\n * @alpha\n */\nexport interface ListboxContextProps {\n  listboxId?: string;\n  listboxValue?: ListboxValue;\n  focusValue?: ListboxValue;\n  onListboxValueChange: (\n    newValue: ListboxValue,\n    isControlOrCommandPressed?: boolean\n  ) => void;\n  listboxRef?: React.RefObject<HTMLUListElement>;\n}\n\n/**\n * Context set up by listbox for use by `ListboxItems` .\n * @alpha\n */\n// istanbul ignore next\nexport const ListboxContext = React.createContext<ListboxContextProps>({\n  onListboxValueChange: (_newValue: ListboxValue | undefined) => {},\n});\n\nfunction makeId(...args: Array<string | number | null | undefined>) {\n  return args.filter((val) => val != null).join(\"--\");\n}\n\nfunction getOptionValueArray(childNodes: React.ReactNode): ListboxItemProps[] {\n  return React.Children.toArray(childNodes)\n    .filter((node) => React.isValidElement(node) && node.props.value)\n    .map(\n      (optionNode) =>\n        (optionNode as React.ReactElement).props as ListboxItemProps\n    );\n}\n\nfunction processKeyboardNavigation(\n  optionValues: ListboxItemProps[],\n  itemIndex: number,\n  key: string\n): [number, boolean] {\n  let keyProcessed = false;\n  let newIndex = itemIndex >= 0 ? itemIndex : 0;\n\n  // 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\n  if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {\n    for (let i = itemIndex + 1; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {\n    for (let i = itemIndex - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.Home) {\n    for (let i = 0; i < optionValues.length; i++) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  } else if (key === SpecialKey.End) {\n    for (let i = optionValues.length - 1; i >= 0; i--) {\n      if (!optionValues[i].disabled) {\n        newIndex = i;\n        break;\n      }\n    }\n    keyProcessed = true;\n  }\n  return [newIndex, keyProcessed];\n}\n\n/**\n * Single select `Listbox` component\n * @alpha\n */\nexport function Listbox(props: ListboxProps) {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    id,\n    children,\n    selectedValue,\n    className,\n    onListboxValueChange,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const listRef = React.useRef<HTMLUListElement>(null);\n  const [listId] = React.useState(() => {\n    return id ?? Guid.createValue();\n  });\n  const optionValues = React.useMemo(\n    () => getOptionValueArray(children),\n    [children]\n  );\n  const classes = React.useMemo(\n    () => classnames(\"core-listbox\", className),\n    [className]\n  );\n  const [currentValue, setCurrentValue] = React.useState<\n    ListboxValue | undefined\n  >(selectedValue);\n  const [focusValue, setFocusValue] = React.useState<ListboxValue | undefined>(\n    currentValue\n  );\n\n  React.useEffect(() => {\n    setCurrentValue(selectedValue);\n    setFocusValue(selectedValue);\n  }, [selectedValue]);\n\n  const scrollTopRef = React.useRef(0);\n  const handleValueChange = React.useCallback(\n    (newValue: ListboxValue, isControlOrCommandPressed?: boolean) => {\n      // istanbul ignore else\n      if (newValue !== currentValue) {\n        setCurrentValue(newValue);\n        setFocusValue(newValue);\n        if (onListboxValueChange)\n          onListboxValueChange(newValue, isControlOrCommandPressed);\n      }\n    },\n    [setCurrentValue, currentValue, onListboxValueChange]\n  );\n\n  const focusOption = React.useCallback(\n    (itemIndex: number) => {\n      // istanbul ignore else\n      if (itemIndex >= 0 && itemIndex < optionValues.length) {\n        const newSelection = optionValues[itemIndex];\n        const listElement = listRef.current as HTMLUListElement;\n        const optionToFocus = listElement.querySelector<HTMLLIElement>(\n          `li[data-value=\"${newSelection.value}\"]`\n        );\n        // istanbul ignore else\n        if (optionToFocus && listElement) {\n          let newScrollTop = listElement.scrollTop;\n\n          // istanbul ignore next\n          if (listElement.scrollHeight > listElement.clientHeight) {\n            const scrollBottom =\n              listElement.clientHeight + listElement.scrollTop;\n            const elementBottom =\n              optionToFocus.offsetTop + optionToFocus.offsetHeight;\n            if (elementBottom > scrollBottom) {\n              newScrollTop = elementBottom - listElement.clientHeight;\n            } else if (optionToFocus.offsetTop < listElement.scrollTop) {\n              newScrollTop = optionToFocus.offsetTop;\n            }\n            scrollTopRef.current = newScrollTop;\n          }\n          setFocusValue(newSelection.value);\n        }\n      }\n    },\n    [optionValues]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (optionValues.length < 1) return;\n\n      const itemIndex =\n        undefined === focusValue\n          ? -1\n          : optionValues.findIndex(\n              (optionValue) => optionValue.value === focusValue\n            );\n\n      if (event.key === SpecialKey.Space) {\n        event.preventDefault();\n        // istanbul ignore else\n        if (focusValue)\n          handleValueChange(\n            focusValue,\n            event.getModifierState(\"Control\") || event.getModifierState(\"Meta\")\n          ); // Control or Command\n        return;\n      } else {\n        const [newItemIndex, keyProcessed] = processKeyboardNavigation(\n          optionValues,\n          itemIndex,\n          event.key\n        );\n        // istanbul ignore else\n        if (keyProcessed) {\n          event.preventDefault();\n          focusOption(newItemIndex);\n          return;\n        }\n      }\n\n      // istanbul ignore else\n      if (onKeyDown) onKeyDown(event);\n    },\n    [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]\n  );\n\n  const isInitialMount = React.useRef(true);\n\n  React.useEffect(() => {\n    const list = listRef.current as HTMLUListElement;\n\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n\n      if (undefined !== focusValue) {\n        const itemIndex = optionValues.findIndex(\n          (optionValue) => optionValue.value === focusValue\n        );\n        focusOption(itemIndex);\n      }\n    } else {\n      list.scrollTop = scrollTopRef.current;\n    }\n  }, [focusValue, focusOption, optionValues]);\n\n  // istanbul ignore next\n  const handleOnScroll = React.useCallback(\n    (_event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n      if (listRef.current) scrollTopRef.current = listRef.current.scrollTop;\n    },\n    []\n  );\n\n  // istanbul ignore next\n  const handleOnFocus = React.useCallback(\n    (_event: React.FocusEvent<HTMLUListElement>) => {\n      if (!focusValue || 0 === focusValue.length) {\n        if (currentValue) {\n          setFocusValue(currentValue);\n        } else {\n          if (optionValues.length > 0) setFocusValue(optionValues[0].value);\n        }\n      }\n    },\n    [currentValue, focusValue, optionValues]\n  );\n\n  return (\n    <ul\n      className={classes}\n      // If the listbox is not part of another widget, then it has a visible\n      // label referenced by `aria-labelledby` on the element with role\n      // `listbox`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      // If an `aria-label` is passed, we should skip `aria-labelledby` to\n      // avoid confusion.\n      aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}\n      aria-label={ariaLabel}\n      // An element that contains or owns all the listbox options has role\n      // listbox.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      role=\"listbox\"\n      // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html\n      tabIndex={0}\n      // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-scrollable.html\n      aria-activedescendant={makeId(currentValue, listId)}\n      {...otherProps}\n      ref={listRef}\n      id={listId}\n      onKeyDown={handleKeyDown}\n      onScroll={handleOnScroll}\n      data-value={currentValue}\n      data-focusvalue={focusValue}\n      onFocus={handleOnFocus}\n    >\n      <ListboxContext.Provider\n        value={{\n          listboxValue: currentValue,\n          focusValue,\n          listboxId: listId,\n          onListboxValueChange: handleValueChange,\n          listboxRef: listRef,\n        }}\n      >\n        {children}\n      </ListboxContext.Provider>\n    </ul>\n  );\n}\n\n/**\n * `ListboxItem` component.\n * @alpha\n */\nexport function ListboxItem(props: ListboxItemProps) {\n  const { children, value, className, disabled, ...otherProps } = props;\n\n  const { listboxValue, focusValue, listboxId, onListboxValueChange } =\n    React.useContext(ListboxContext);\n\n  const hasFocus = focusValue === value;\n\n  const classes = React.useMemo(\n    () => classnames(\"core-listbox-item\", hasFocus && \"focused\", className),\n    [className, hasFocus]\n  );\n  const itemRef = React.useRef<HTMLLIElement>(null);\n  const isSelected = listboxValue === value;\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n      event.preventDefault();\n      // istanbul ignore next\n      const selectedValue = event.currentTarget?.dataset?.value;\n      // istanbul ignore else\n      if (undefined !== selectedValue) {\n        onListboxValueChange(selectedValue, event.ctrlKey);\n      }\n    },\n    [onListboxValueChange]\n  );\n\n  const getItemId = React.useCallback(() => {\n    return makeId(value, listboxId);\n  }, [listboxId, value]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <li\n      // In a single-select listbox, the selected option has `aria-selected`\n      // set to `true`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      aria-selected={isSelected}\n      // Applicable to all host language elements regardless of whether a\n      // `role` is applied.\n      // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header\n      aria-disabled={disabled || undefined}\n      // Each option in the listbox has role `option` and is a DOM descendant\n      // of the element with role `listbox`.\n      // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox\n      role=\"option\"\n      className={classes}\n      {...otherProps}\n      ref={itemRef}\n      id={getItemId()}\n      // used for css styling\n      data-value={value}\n      onClick={handleClick}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/lib/cjs/core-react/listbox/Listbox.scss

@@ -1,54 +1,54 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../index";
-
-$uicore-list-item-height: calc(var(--iui-size-s) * 2);
-
-ul.core-listbox {
-  list-style: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  color: var(--iui-color-text);
-  border: 1px solid var(--iui-color-border);
-  position: relative; // required to properly set scrollTop position
-
-  @include uicore-touch-scrolling;
-  @include uicore-scrollbar();
-
-  &:focus {
-    border-color: var(--iui-color-border-accent);
-
-    li.core-listbox-item.focused {
-      background-color: var(--iui-color-background-accent-muted);
-      border: 1px solid var(--iui-color-border-accent);
-    }
-  }
-
-  li.core-listbox-item {
-    display: inline-flex;
-    line-height: $uicore-list-item-height;
-    padding-left: 4px;
-
-    &[aria-selected="true"] {
-      background-color: var(--iui-color-background-accent-muted);
-    }
-
-    &[aria-disabled="true"] {
-      pointer-events: none;
-      color: var(--iui-color-text-disabled);
-    }
-
-    &:hover {
-      background-color: var(--iui-color-background-hover);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../index";
+
+$uicore-list-item-height: calc(var(--iui-size-s) * 2);
+
+ul.core-listbox {
+  list-style: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: var(--iui-color-text);
+  border: 1px solid var(--iui-color-border);
+  position: relative; // required to properly set scrollTop position
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+
+  &:focus {
+    border-color: var(--iui-color-border-accent);
+
+    li.core-listbox-item.focused {
+      background-color: var(--iui-color-background-accent-muted);
+      border: 1px solid var(--iui-color-border-accent);
+    }
+  }
+
+  li.core-listbox-item {
+    display: inline-flex;
+    line-height: $uicore-list-item-height;
+    padding-left: 4px;
+
+    &[aria-selected="true"] {
+      background-color: var(--iui-color-background-accent-muted);
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-hover);
+    }
+  }
+}

package/lib/cjs/core-react/loading/LoadingBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEc,MAAM;CAYvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAItD"}
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAElD;IAEc,MAAM;CAcvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAItD"}