@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/cjs/core-react/inputs/LabeledTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledTextarea.d.ts","sourceRoot":"","sources":["../../../../src/core-react/inputs/LabeledTextarea.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAIrD;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,qBAAqB,EAAE,sBAAsB;CAAI;AAE9G;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuB1D"}

package/lib/cjs/core-react/inputs/LabeledTextarea.js

@@ -0,0 +1,32 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabeledTextarea = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const Textarea_1 = require("./Textarea");
+/** Textarea wrapper that allows for additional styling and labelling
+ * @public
+ * @deprecated Use LabeledTextarea in itwinui-react instead
+ */
+function LabeledTextarea(props) {
+    const { label, status, className, disabled, style, // eslint-disable-line @typescript-eslint/no-unused-vars
+    inputClassName, inputStyle, labelClassName, labelStyle, message, messageClassName, messageStyle, ...otherProps } = props;
+    return (React.createElement("label", { style: style, className: (0, classnames_1.default)("uicore-inputs-labeled-textarea", disabled && "uicore-disabled", status, className) },
+        label &&
+            React.createElement("div", { className: (0, classnames_1.default)("uicore-label", labelClassName), style: labelStyle },
+                " ",
+                label,
+                " "),
+        React.createElement(Textarea_1.Textarea, { disabled: disabled, className: inputClassName, style: inputStyle, ...otherProps }),
+        message &&
+            React.createElement("div", { className: (0, classnames_1.default)("uicore-message", messageClassName), style: messageStyle }, message)));
+}
+exports.LabeledTextarea = LabeledTextarea;
+//# sourceMappingURL=LabeledTextarea.js.map

package/lib/cjs/core-react/inputs/LabeledTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledTextarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/LabeledTextarea.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAE/B,yCAAqD;AAUrD;;;GAGG;AACH,SAAgB,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,wDAAwD;IACzG,cAAc,EAAE,UAAU,EAC1B,cAAc,EAAE,UAAU,EAC1B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EACvC,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE1B,OAAO,CACL,+BAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAA,oBAAU,EACxC,gCAAgC,EAChC,QAAQ,IAAI,iBAAiB,EAC7B,MAAM,EACN,SAAS,CACV;QACE,KAAK;YACJ,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,cAAc,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU;;gBAAI,KAAK;oBAAQ;QAEhG,oBAAC,mBAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,KAAM,UAAU,GAAI;QAC7F,OAAO;YACN,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,IAAG,OAAO,CAAO,CAEhG,CACT,CAAC;AACJ,CAAC;AAvBD,0CAuBC","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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { LabeledComponentProps, MessagedComponentProps } from \"./LabeledComponentProps\";\nimport { Textarea, TextareaProps } from \"./Textarea\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Properties for [[LabeledTextarea]] component\n * @public\n * @deprecated Use LabeledTextareaProps in itwinui-react instead\n */\nexport interface LabeledTextareaProps extends TextareaProps, LabeledComponentProps, MessagedComponentProps { }  // eslint-disable-line deprecation/deprecation\n\n/** Textarea wrapper that allows for additional styling and labelling\n * @public\n * @deprecated Use LabeledTextarea in itwinui-react instead\n */\nexport function LabeledTextarea(props: LabeledTextareaProps) {  // eslint-disable-line deprecation/deprecation\n  const { label, status, className, disabled, style, // eslint-disable-line @typescript-eslint/no-unused-vars\n    inputClassName, inputStyle,\n    labelClassName, labelStyle,\n    message, messageClassName, messageStyle,\n    ...otherProps } = props;\n\n  return (\n    <label style={style} className={classnames(\n      \"uicore-inputs-labeled-textarea\",\n      disabled && \"uicore-disabled\",\n      status,\n      className,\n    )}>\n      {label &&\n        <div className={classnames(\"uicore-label\", labelClassName)} style={labelStyle}> {label} </div>\n      }\n      <Textarea disabled={disabled} className={inputClassName} style={inputStyle} {...otherProps} />\n      {message &&\n        <div className={classnames(\"uicore-message\", messageClassName)} style={messageStyle}>{message}</div>\n      }\n    </label>\n  );\n}\n"]}

package/lib/cjs/core-react/inputs/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,WAAW;IACnG,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACtC;AA6BD;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,GAAG,IAAyB,CAAC"}

package/lib/cjs/core-react/inputs/Textarea.js

@@ -0,0 +1,36 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useRefs_1 = require("../utils/hooks/useRefs");
+// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
+const ForwardRefTextarea = React.forwardRef(// eslint-disable-line deprecation/deprecation
+function ForwardRefTextarea(props, ref) {
+    const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
+    const textRows = undefined !== rows ? rows : 3;
+    const textAreaElementRef = React.useRef();
+    const refs = (0, useRefs_1.useRefs)(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    React.useEffect(() => {
+        if (textAreaElementRef.current && setFocus)
+            textAreaElementRef.current.focus();
+    }, [setFocus]);
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    return (React.createElement(itwinui_react_1.Textarea, { ...otherProps, ref: refs, rows: textRows, onFocus: handleFocus, className: (0, classnames_1.default)("uicore-inputs-textarea", className), style: style }));
+});
+/** Basic textarea component
+ * @public
+ * @deprecated Use Textarea in itwinui-react instead
+ */
+exports.Textarea = ForwardRefTextarea; // eslint-disable-line deprecation/deprecation
+//# sourceMappingURL=Textarea.js.map

package/lib/cjs/core-react/inputs/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Textarea.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAoE;AACpE,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAyC,8CAA8C;AAChI,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC3H,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAuB,CAAC;IAC/D,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEvJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,kBAAkB,CAAC,OAAO,IAAI,QAAQ;YACxC,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACrF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,wBAAgB,OAAK,UAAU,EAC9B,GAAG,EAAE,IAAI,EACT,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,QAAQ,GAAiD,kBAAkB,CAAC,CAAG,8CAA8C","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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Textarea as ITwinUI_Textarea } from \"@itwin/itwinui-react\";\nimport { useRefs } from \"../utils/hooks/useRefs\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[Textarea]] component\n * @public\n * @deprecated Use TextareaProps in itwinui-react instead\n */\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, CommonProps {\n  /** Number of textarea rows. Default is 3. */\n  rows?: number;\n  /** Indicates whether to set focus to the textarea element */\n  setFocus?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLTextAreaElement>;\n}\n\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\nconst ForwardRefTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(    // eslint-disable-line deprecation/deprecation\n  function ForwardRefTextarea(props, ref) {\n    const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\n    const textRows = undefined !== rows ? rows : 3;\n    const textAreaElementRef = React.useRef<HTMLTextAreaElement>();\n    const refs = useRefs(textAreaElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n\n    React.useEffect(() => {\n      if (textAreaElementRef.current && setFocus)\n        textAreaElementRef.current.focus();\n    }, [setFocus]);\n\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    return (\n      <ITwinUI_Textarea {...otherProps}\n        ref={refs}\n        rows={textRows}\n        onFocus={handleFocus}\n        className={classnames(\"uicore-inputs-textarea\", className)} style={style} />\n    );\n  }\n);\n\n/** Basic textarea component\n * @public\n * @deprecated Use Textarea in itwinui-react instead\n */\nexport const Textarea: (props: TextareaProps) => JSX.Element | null = ForwardRefTextarea;   // eslint-disable-line deprecation/deprecation\n"]}

package/lib/cjs/core-react/inputs/iconinput/IconInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/inputs/iconinput/IconInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAC9D,mFAAmF;IACnF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAsBD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,GAAG,CAAC,OAAO,GAAG,IAA0B,CAAC"}

package/lib/cjs/core-react/inputs/iconinput/IconInput.js

@@ -0,0 +1,30 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconInput = void 0;
+require("./IconInput.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Input_1 = require("../Input"); // NEEDSWORK - for nativeKeyHandler
+/** Input component with icon to the left of the input field
+ * @public
+ */
+const ForwardRefIconInput = React.forwardRef(function ForwardRefIconInput(props, ref) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { icon, containerClassName, size, ...otherProps } = props;
+    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
+    return (React.createElement("div", { className: (0, classnames_1.default)("core-iconInput-container", containerClassName) },
+        React.createElement(Input_1.Input, { ref: ref, ...otherProps }),
+        React.createElement("div", { className: "core-iconInput-icon" }, icon)));
+});
+/** Input component with icon to the left of the input field
+ * @public
+ */
+exports.IconInput = ForwardRefIconInput;
+//# sourceMappingURL=IconInput.js.map

package/lib/cjs/core-react/inputs/iconinput/IconInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/iconinput/IconInput.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAC/B,oCAA6C,CAAG,mCAAmC;AAgBnF;;GAEG;AACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACrC,6DAA6D;IAC7D,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEhE,uFAAuF;IACvF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE,kBAAkB,CAAC;QAExE,oBAAC,aAAK,IAAC,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI;QACnC,6BAAK,SAAS,EAAC,qBAAqB,IACjC,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL;;GAEG;AACU,QAAA,SAAS,GAAkD,mBAAmB,CAAC","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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./IconInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Input, InputProps } from \"../Input\";   // NEEDSWORK - for nativeKeyHandler\n\n/** Properties for the [[IconInput]] component\n * @public\n */\nexport interface IconInputProps extends Omit<InputProps, \"size\"> {    // eslint-disable-line deprecation/deprecation\n  /** Icon displayed to the left of the Input field within the IconInput component */\n  icon: React.ReactNode;\n  /** CSS class name for the IconInput component container div */\n  containerClassName?: string;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n  /** Modify size of the input. */\n  size?: \"small\" | \"large\";\n}\n\n/** Input component with icon to the left of the input field\n * @public\n */\nconst ForwardRefIconInput = React.forwardRef<HTMLInputElement, IconInputProps>(\n  function ForwardRefIconInput(props, ref) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { icon, containerClassName, size, ...otherProps } = props;\n\n    // NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop\n    return (\n      <div className={classnames(\"core-iconInput-container\", containerClassName)} >\n        {/* eslint-disable-next-line deprecation/deprecation */}\n        <Input ref={ref} {...otherProps} />\n        <div className=\"core-iconInput-icon\">\n          {icon}\n        </div>\n      </div>\n    );\n  });\n\n/** Input component with icon to the left of the input field\n * @public\n */\nexport const IconInput: (props: IconInputProps) => JSX.Element | null = ForwardRefIconInput;\n"]}

package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIzD;;GAEG;AACH,oBAAY,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAC7F,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACvD,sJAAsJ;IACtJ,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5E,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAkKD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,GAAG,IAA4B,CAAC"}

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

@@ -0,0 +1,148 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Inputs
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+require("./NumberInput.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const WebFontIcon_1 = require("../../icons/WebFontIcon");
+const ForwardRefNumberInput = React.forwardRef(function ForwardRefNumberInput(props, ref) {
+    const { containerClassName, value, min, max, precision, format, parse, onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, ...otherProps } = props;
+    const currentValueRef = React.useRef(value);
+    /**
+   * Used internally to parse the argument x to it's numeric representation.
+   * If the argument cannot be converted to finite number returns 0; If a
+   * "precision" prop is specified uses it round the number with that
+   * precision (no fixed precision here because the return value is float, not
+   * string).
+   */
+    const parseInternal = React.useCallback((x) => {
+        let n;
+        if (parse)
+            n = parse(x);
+        if (undefined === n || null === n) {
+            n = parseFloat(x);
+            if (isNaN(n) || !isFinite(n)) {
+                n = 0;
+            }
+        }
+        const localPrecision = undefined === precision ? 10 : precision;
+        const q = Math.pow(10, localPrecision);
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        n = Math.min(Math.max(n, localMin), localMax);
+        n = Math.round(n * q) / q;
+        return n;
+    }, [parse, precision, min, max]);
+    /**
+   * This is used internally to format a number to its display representation.
+   * It will invoke the format function if one is provided.
+   */
+    const formatInternal = React.useCallback((num) => {
+        const localPrecision = undefined === precision || null === precision ? 0 : precision;
+        const str = undefined === num || null === num ? "" : num.toFixed(localPrecision);
+        if (format)
+            return format(num, str);
+        return str;
+    }, [format, precision]);
+    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));
+    // See if new initialValue props have changed since component mounted
+    React.useEffect(() => {
+        currentValueRef.current = value;
+        const currentFormattedValue = formatInternal(currentValueRef.current);
+        setFormattedValue(currentFormattedValue);
+    }, [formatInternal, value]);
+    const handleChange = React.useCallback((event) => {
+        setFormattedValue(event.currentTarget.value);
+    }, []);
+    const updateValue = React.useCallback((newVal) => {
+        const newFormattedVal = formatInternal(newVal);
+        onChange && onChange(newVal, newFormattedVal);
+        setFormattedValue(newFormattedVal);
+    }, [onChange, formatInternal]);
+    const updateValueFromString = React.useCallback((strValue) => {
+        const newVal = parseInternal(strValue);
+        updateValue(newVal);
+    }, [parseInternal, updateValue]);
+    const handleBlur = React.useCallback((event) => {
+        const newVal = parseInternal(event.target.value);
+        onBlur && onBlur(event);
+        updateValue(newVal);
+    }, [parseInternal, updateValue, onBlur]);
+    const getIncrementValue = React.useCallback((increment) => {
+        if (typeof step === "function") {
+            const stepVal = step(increment ? "up" : "down");
+            return stepVal ? stepVal : 1;
+        }
+        return !step ? 1 : step;
+    }, [step]);
+    /**
+   * The internal method that actually sets the new value on the input
+   */
+    const applyStep = React.useCallback((increment) => {
+        const incrementValue = getIncrementValue(increment);
+        let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);
+        if (snap) {
+            num = Math.round(num / incrementValue) * incrementValue;
+        }
+        const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;
+        const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;
+        num = Math.min(Math.max(num, localMin), localMax);
+        updateValue(num);
+    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);
+    const handleKeyDown = React.useCallback((event) => {
+        // istanbul ignore else
+        if (event.key === appui_abstract_1.SpecialKey.Enter) {
+            updateValueFromString(event.currentTarget.value);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (event.key === appui_abstract_1.SpecialKey.Escape) {
+            setFormattedValue(formatInternal(currentValueRef.current));
+            event.preventDefault();
+        }
+        else if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
+            applyStep(false);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
+            applyStep(true);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        onKeyDown && onKeyDown(event);
+    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);
+    const handleDownClick = React.useCallback((event) => {
+        applyStep(false);
+        event.preventDefault();
+    }, [applyStep]);
+    const handleUpClick = React.useCallback((event) => {
+        applyStep(true);
+        event.preventDefault();
+    }, [applyStep]);
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    const containerClasses = (0, classnames_1.default)("core-number-input-container", containerClassName, showTouchButtons && "core-number-buttons-for-touch");
+    return (React.createElement("div", { className: containerClasses, style: containerStyle },
+        React.createElement(itwinui_react_1.Input, { ref: ref, value: formattedValue, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ...otherProps }),
+        React.createElement("div", { className: (0, classnames_1.default)("core-number-input-buttons-container", showTouchButtons && "core-number-buttons-for-touch") },
+            React.createElement("div", { className: "core-number-input-button core-number-input-button-up", tabIndex: -1, onClick: handleUpClick },
+                React.createElement(WebFontIcon_1.WebFontIcon, { iconName: "icon-caret-up" })),
+            React.createElement("div", { className: "core-number-input-button core-number-input-button-down", tabIndex: -1, onClick: handleDownClick },
+                React.createElement(WebFontIcon_1.WebFontIcon, { iconName: "icon-caret-down" })))));
+});
+/** Input component for numbers with up and down buttons to increment and decrement the value.
+ * @public
+ */
+exports.NumberInput = ForwardRefNumberInput;
+//# sourceMappingURL=NumberInput.js.map

package/lib/cjs/core-react/inputs/numberinput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../../src/core-react/inputs/numberinput/NumberInput.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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Inputs\n */\n\nimport \"./NumberInput.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { WebFontIcon } from \"../../icons/WebFontIcon\";\n\n/** Step function prototype for [[NumberInput]] component\n * @public\n */\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\n\n/** Properties for the [[NumberInput]] component\n * @public\n */\nexport interface NumberInputProps extends Omit<InputProps, \"min\" | \"max\" | \"step\" | \"onChange\"> {\n  /** Numeric value, set to `undefined` to show placeholder text */\n  value?: number;\n  /** CSS class name for the NumberInput component container div */\n  containerClassName?: string;\n  /** Style for component container div. */\n  containerStyle?: React.CSSProperties;\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\n  min?: number;\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\n  max?: number;\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\n  step?: StepFunctionProp;\n  /** number of decimal places, defaults to 0 */\n  precision?: number;\n  /** function parseFloat */\n  parse?: ((value: string) => number | null | undefined);\n  /** function optional formatting function that takes the number value and the internal formatted value in case function just adds prefix or suffix. */\n  format?: (num: number | null | undefined, formattedValue: string) => string;\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\n  snap?: boolean;\n  /** Function to call when value is changed. */\n  onChange?: (value: number | undefined, stringValue: string) => void;\n  /** if true up/down buttons are shown larger and side by side */\n  showTouchButtons?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\nconst ForwardRefNumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  function ForwardRefNumberInput(props, ref) {\n    const { containerClassName, value, min, max, precision, format, parse,\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, containerStyle, ...otherProps } = props;\n    const currentValueRef = React.useRef(value);\n\n    /**\n   * Used internally to parse the argument x to it's numeric representation.\n   * If the argument cannot be converted to finite number returns 0; If a\n   * \"precision\" prop is specified uses it round the number with that\n   * precision (no fixed precision here because the return value is float, not\n   * string).\n   */\n    const parseInternal = React.useCallback((x: string) => {\n      let n: number | undefined | null;\n\n      if (parse)\n        n = parse(x);\n      if (undefined === n || null === n) {\n        n = parseFloat(x);\n        if (isNaN(n) || !isFinite(n)) {\n          n = 0;\n        }\n      }\n\n      const localPrecision = undefined === precision ? 10 : precision;\n      const q = Math.pow(10, localPrecision);\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      n = Math.min(Math.max(n, localMin), localMax);\n      n = Math.round(n * q) / q;\n\n      return n;\n    }, [parse, precision, min, max]);\n\n    /**\n   * This is used internally to format a number to its display representation.\n   * It will invoke the format function if one is provided.\n   */\n    const formatInternal = React.useCallback((num: number | undefined | null) => {\n      const localPrecision = undefined === precision || null === precision ? 0 : precision;\n      const str = undefined === num || null === num ? \"\" : num.toFixed(localPrecision);\n\n      if (format)\n        return format(num, str);\n\n      return str;\n    }, [format, precision]);\n\n    const [formattedValue, setFormattedValue] = React.useState(() => formatInternal(value));\n\n    // See if new initialValue props have changed since component mounted\n    React.useEffect(() => {\n      currentValueRef.current = value;\n      const currentFormattedValue = formatInternal(currentValueRef.current);\n      setFormattedValue(currentFormattedValue);\n    }, [formatInternal, value]);\n\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n      setFormattedValue(event.currentTarget.value);\n    }, []);\n\n    const updateValue = React.useCallback((newVal: number) => {\n      const newFormattedVal = formatInternal(newVal);\n      onChange && onChange(newVal, newFormattedVal);\n      setFormattedValue(newFormattedVal);\n    }, [onChange, formatInternal]);\n\n    const updateValueFromString = React.useCallback((strValue: string) => {\n      const newVal = parseInternal(strValue);\n      updateValue(newVal);\n    }, [parseInternal, updateValue]);\n\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      const newVal = parseInternal(event.target.value);\n      onBlur && onBlur(event);\n      updateValue(newVal);\n    }, [parseInternal, updateValue, onBlur]);\n\n    const getIncrementValue = React.useCallback((increment: boolean) => {\n      if (typeof step === \"function\") {\n        const stepVal = step(increment ? \"up\" : \"down\");\n        return stepVal ? stepVal : 1;\n      }\n\n      return !step ? 1 : step;\n    }, [step]);\n\n    /**\n   * The internal method that actually sets the new value on the input\n   */\n    const applyStep = React.useCallback((increment: boolean) => {\n      const incrementValue = getIncrementValue(increment);\n\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\n      if (snap) {\n        num = Math.round(num / incrementValue) * incrementValue;\n      }\n\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\n      num = Math.min(Math.max(num, localMin), localMax);\n\n      updateValue(num);\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\n\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatInternal(currentValueRef.current));\n        event.preventDefault();\n      } else if (event.key === SpecialKey.ArrowDown) {\n        applyStep(false);\n        event.preventDefault();\n        event.stopPropagation();\n      } else if (event.key === SpecialKey.ArrowUp) {\n        applyStep(true);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown && onKeyDown(event);\n    }, [applyStep, formatInternal, updateValueFromString, onKeyDown]);\n\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(false);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      applyStep(true);\n      event.preventDefault();\n    }, [applyStep]);\n\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    const containerClasses = classnames(\"core-number-input-container\", containerClassName, showTouchButtons && \"core-number-buttons-for-touch\");\n    return (\n      <div className={containerClasses} style={containerStyle} >\n        <Input ref={ref} value={formattedValue} onChange={handleChange} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} {...otherProps} />\n        <div className={classnames(\"core-number-input-buttons-container\", showTouchButtons && \"core-number-buttons-for-touch\")}>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-up\" tabIndex={-1} onClick={handleUpClick}>\n            <WebFontIcon iconName=\"icon-caret-up\" />\n          </div>\n          { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div className=\"core-number-input-button core-number-input-button-down\" tabIndex={-1} onClick={handleDownClick}>\n            <WebFontIcon iconName=\"icon-caret-down\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\n/** Input component for numbers with up and down buttons to increment and decrement the value.\n * @public\n */\nexport const NumberInput: (props: NumberInputProps) => JSX.Element | null = ForwardRefNumberInput;\n"]}

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

@@ -0,0 +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,oBAAY,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"}

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

@@ -0,0 +1,223 @@
+"use strict";
+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.
+*--------------------------------------------------------------------------------------------*/
+const React = require("react");
+const classnames_1 = require("classnames");
+require("./Listbox.scss");
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+// istanbul ignore next
+exports.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 === appui_abstract_1.SpecialKey.ArrowDown || key === appui_abstract_1.SpecialKey.PageDown) {
+        for (let i = itemIndex + 1; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === appui_abstract_1.SpecialKey.ArrowUp || key === appui_abstract_1.SpecialKey.PageUp) {
+        for (let i = itemIndex - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === appui_abstract_1.SpecialKey.Home) {
+        for (let i = 0; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === appui_abstract_1.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
+ */
+function Listbox(props) {
+    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyPress, ...otherProps } = props;
+    const listRef = React.useRef(null);
+    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);
+    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 === appui_abstract_1.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 (onKeyPress)
+            onKeyPress(event);
+    }, [focusValue, optionValues, focusOption, onKeyPress, 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(exports.ListboxContext.Provider, { value: {
+                listboxValue: currentValue,
+                focusValue,
+                listboxId: listId,
+                onListboxValueChange: handleValueChange,
+                listboxRef: listRef,
+            } }, children));
+}
+exports.Listbox = Listbox;
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+function ListboxItem(props) {
+    const { children, value, className, disabled, ...otherProps } = props;
+    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);
+    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));
+}
+exports.ListboxItem = ListboxItem;
+//# sourceMappingURL=Listbox.js.map