@itwin/imodel-components-react 4.9.0-dev.1 → 4.10.0-dev.1

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module QuantityFormat
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 /** Properties of [[StationSizeSelector]] component.
  * @internal
@@ -14,5 +14,5 @@ export interface StationSizeSelectorProps extends CommonProps {
 /** Component use to set Station size (number of digits from right until '+').
  * @internal
  */
-export declare function StationSizeSelector(props: StationSizeSelectorProps): JSX.Element;
+export declare function StationSizeSelector(props: StationSizeSelectorProps): React.JSX.Element;
 //# sourceMappingURL=StationSizeSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StationSizeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSizeSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eA8BlE"}
+{"version":3,"file":"StationSizeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSizeSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBA8BlE"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module QuantityFormat
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 /** Properties of [[ThousandsSelector]] component.
  * @internal
@@ -14,5 +14,5 @@ export interface ThousandsSelectorProps extends CommonProps {
 /** Component use to set Quantity Format thousand group separator.
  * @internal
  */
-export declare function ThousandsSelector(props: ThousandsSelectorProps): JSX.Element;
+export declare function ThousandsSelector(props: ThousandsSelectorProps): React.JSX.Element;
 //# sourceMappingURL=ThousandsSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThousandsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA+C9D"}
+{"version":3,"file":"ThousandsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAsC9D"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js

@@ -12,7 +12,7 @@ import { Select } from "@itwin/itwinui-react";
  * @internal
  */
 export function ThousandsSelector(props) {
-    const { separator, disabled, onChange, ...otherProps } = props;
+    const { separator, ...otherProps } = props;
     const uomDefaultEntries = React.useRef([
         {
             value: ",",
@@ -23,9 +23,6 @@ export function ThousandsSelector(props) {
             label: UiIModelComponents.translate("QuantityFormat.thousand_separator.point"),
         },
     ]);
-    const handleOnChange = React.useCallback((newValue) => {
-        onChange && onChange(newValue);
-    }, [onChange]);
     const separatorOptions = React.useMemo(() => {
         const completeListOfEntries = [];
         // istanbul ignore next (only used if format already has a character that does not match standard options)
@@ -36,6 +33,6 @@ export function ThousandsSelector(props) {
         completeListOfEntries.push(...uomDefaultEntries.current);
         return completeListOfEntries;
     }, [separator]);
-    return (React.createElement(Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
+    return (React.createElement(Select, { options: separatorOptions, value: separator, size: "small", ...otherProps }));
 }
 //# sourceMappingURL=ThousandsSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAW9C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,kBAAkB,CAAC,SAAS,CACjC,yCAAyC,CAC1C;SACF;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,kBAAkB,CAAC,SAAS,CACjC,yCAAyC,CAC1C;SACF;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,QAAgB,EAAE,EAAE;QACnB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IACE,SAAS;YACT,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EACtE;YACA,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,cAAqB,EAC/B,IAAI,EAAC,OAAO,KACR,UAAU,GACd,CACH,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[ThousandsSelector]] component.\n * @internal\n */\nexport interface ThousandsSelectorProps extends CommonProps {\n  separator: string;\n  disabled: boolean;\n  onChange: (value: string) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\n  const { separator, disabled, onChange, ...otherProps } = props;\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\n    {\n      value: \",\",\n      label: UiIModelComponents.translate(\n        \"QuantityFormat.thousand_separator.comma\"\n      ),\n    },\n    {\n      value: \".\",\n      label: UiIModelComponents.translate(\n        \"QuantityFormat.thousand_separator.point\"\n      ),\n    },\n  ]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange && onChange(newValue);\n    },\n    [onChange]\n  );\n\n  const separatorOptions = React.useMemo(() => {\n    const completeListOfEntries: SelectOption<string>[] = [];\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\n    if (\n      undefined ===\n      uomDefaultEntries.current.find((option) => option.value === separator)\n    ) {\n      completeListOfEntries.push({ value: separator, label: separator });\n    }\n    completeListOfEntries.push(...uomDefaultEntries.current);\n    return completeListOfEntries;\n  }, [separator]);\n\n  return (\n    <Select\n      options={separatorOptions}\n      disabled={disabled}\n      value={separator}\n      onChange={handleOnChange as any}\n      size=\"small\"\n      {...otherProps}\n    />\n  );\n}\n"]}
+{"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAW9C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,kBAAkB,CAAC,SAAS,CACjC,yCAAyC,CAC1C;SACF;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,kBAAkB,CAAC,SAAS,CACjC,yCAAyC,CAC1C;SACF;KACF,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IACE,SAAS;YACT,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EACtE;YACA,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,OAAO,KACR,UAAU,GACd,CACH,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[ThousandsSelector]] component.\n * @internal\n */\nexport interface ThousandsSelectorProps extends CommonProps {\n  separator: string;\n  disabled: boolean;\n  onChange: (value: string) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\n  const { separator, ...otherProps } = props;\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\n    {\n      value: \",\",\n      label: UiIModelComponents.translate(\n        \"QuantityFormat.thousand_separator.comma\"\n      ),\n    },\n    {\n      value: \".\",\n      label: UiIModelComponents.translate(\n        \"QuantityFormat.thousand_separator.point\"\n      ),\n    },\n  ]);\n\n  const separatorOptions = React.useMemo(() => {\n    const completeListOfEntries: SelectOption<string>[] = [];\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\n    if (\n      undefined ===\n      uomDefaultEntries.current.find((option) => option.value === separator)\n    ) {\n      completeListOfEntries.push({ value: separator, label: separator });\n    }\n    completeListOfEntries.push(...uomDefaultEntries.current);\n    return completeListOfEntries;\n  }, [separator]);\n\n  return (\n    <Select\n      options={separatorOptions}\n      value={separator}\n      size=\"small\"\n      {...otherProps}\n    />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module QuantityFormat
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { CommonProps } from "@itwin/core-react";
 import type { FormatProps } from "@itwin/core-quantity";
 /** Properties of [[ThousandsSeparator]] component.
@@ -14,5 +14,5 @@ export interface ThousandsSeparatorProps extends CommonProps {
 /** Component use to set Quantity Format thousand group separator.
  * @internal
  */
-export declare function ThousandsSeparator(props: ThousandsSeparatorProps): JSX.Element;
+export declare function ThousandsSeparator(props: ThousandsSeparatorProps): React.JSX.Element;
 //# sourceMappingURL=ThousandsSeparator.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThousandsSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAgHhE"}
+{"version":3,"file":"ThousandsSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgHhE"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js

@@ -15,7 +15,6 @@ import { UiIModelComponents } from "../../UiIModelComponents";
  * @internal
  */
 export function ThousandsSeparator(props) {
-    var _a;
     const { formatProps, onChange } = props;
     const handleSetFormatProps = React.useCallback((newProps) => {
         onChange && onChange(newProps);
@@ -76,6 +75,6 @@ export function ThousandsSeparator(props) {
         React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
         React.createElement(Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
         React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.Use1000Separator) && "uicore-disabled") }, thousandSeparatorLabel.current),
-        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
+        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: formatProps.thousandSeparator ?? ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
 }
 //# sourceMappingURL=ThousandsSeparator.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.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 QuantityFormat\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps } from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n */\nexport interface ThousandsSeparatorProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n  const { formatProps, onChange } = props;\n\n  const handleSetFormatProps = React.useCallback(\n    (newProps: FormatProps) => {\n      onChange && onChange(newProps);\n    },\n    [onChange]\n  );\n\n  const setFormatTrait = React.useCallback(\n    (trait: FormatTraits, setActive: boolean) => {\n      const traitStr = getTraitString(trait);\n      let formatTraits: string[] = [traitStr];\n      if (setActive) {\n        // setting trait\n        // istanbul ignore else\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : /* istanbul ignore next */ formatProps.formatTraits.split(\n                /,|;|\\|/\n              );\n          formatTraits = [...traits, traitStr];\n        }\n      } else {\n        // clearing trait\n        // istanbul ignore else\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : /* istanbul ignore next */ formatProps.formatTraits.split(\n                /,|;|\\|/\n              );\n          formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n        }\n      }\n      const newFormatProps = { ...formatProps, formatTraits };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, handleSetFormatProps]\n  );\n\n  const handleUseThousandsSeparatorChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n    },\n    [setFormatTrait]\n  );\n\n  const isFormatTraitSet = React.useCallback(\n    (trait: FormatTraits) => {\n      return Format.isFormatTraitSetInProps(formatProps, trait);\n    },\n    [formatProps]\n  );\n\n  const handleThousandSeparatorChange = React.useCallback(\n    (thousandSeparator: string) => {\n      let decimalSeparator = formatProps.decimalSeparator;\n      // make sure 1000 and decimal separator do not match\n      // istanbul ignore else\n      if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n        if (thousandSeparator === \".\") decimalSeparator = \",\";\n        // thousandSeparator === \",\"\n        else decimalSeparator = \".\";\n      }\n      const newFormatProps = {\n        ...formatProps,\n        thousandSeparator,\n        decimalSeparator,\n      };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, isFormatTraitSet, handleSetFormatProps]\n  );\n\n  const useThousandSeparatorLabel = React.useRef(\n    UiIModelComponents.translate(\n      \"QuantityFormat.labels.useThousandSeparatorLabel\"\n    )\n  );\n  const thousandSeparatorLabel = React.useRef(\n    UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\")\n  );\n\n  return (\n    <>\n      <span className={\"uicore-label\"}>\n        {useThousandSeparatorLabel.current}\n      </span>\n      <Checkbox\n        data-testid=\"use-thousands-separator\"\n        checked={isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleUseThousandsSeparatorChange}\n      />\n      <span\n        className={classnames(\n          \"uicore-label\",\n          !isFormatTraitSet(FormatTraits.Use1000Separator) && \"uicore-disabled\"\n        )}\n      >\n        {thousandSeparatorLabel.current}\n      </span>\n      <ThousandsSelector\n        data-testid=\"thousands-separator-selector\"\n        separator={formatProps.thousandSeparator ?? \",\"}\n        disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleThousandSeparatorChange}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.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 QuantityFormat\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps } from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n */\nexport interface ThousandsSeparatorProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n  const { formatProps, onChange } = props;\n\n  const handleSetFormatProps = React.useCallback(\n    (newProps: FormatProps) => {\n      onChange && onChange(newProps);\n    },\n    [onChange]\n  );\n\n  const setFormatTrait = React.useCallback(\n    (trait: FormatTraits, setActive: boolean) => {\n      const traitStr = getTraitString(trait);\n      let formatTraits: string[] = [traitStr];\n      if (setActive) {\n        // setting trait\n        // istanbul ignore else\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : /* istanbul ignore next */ formatProps.formatTraits.split(\n                /,|;|\\|/\n              );\n          formatTraits = [...traits, traitStr];\n        }\n      } else {\n        // clearing trait\n        // istanbul ignore else\n        if (formatProps.formatTraits) {\n          const traits = Array.isArray(formatProps.formatTraits)\n            ? formatProps.formatTraits\n            : /* istanbul ignore next */ formatProps.formatTraits.split(\n                /,|;|\\|/\n              );\n          formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n        }\n      }\n      const newFormatProps = { ...formatProps, formatTraits };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, handleSetFormatProps]\n  );\n\n  const handleUseThousandsSeparatorChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n    },\n    [setFormatTrait]\n  );\n\n  const isFormatTraitSet = React.useCallback(\n    (trait: FormatTraits) => {\n      return Format.isFormatTraitSetInProps(formatProps, trait);\n    },\n    [formatProps]\n  );\n\n  const handleThousandSeparatorChange = React.useCallback(\n    (thousandSeparator: string) => {\n      let decimalSeparator = formatProps.decimalSeparator;\n      // make sure 1000 and decimal separator do not match\n      // istanbul ignore else\n      if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n        if (thousandSeparator === \".\") decimalSeparator = \",\";\n        // thousandSeparator === \",\"\n        else decimalSeparator = \".\";\n      }\n      const newFormatProps = {\n        ...formatProps,\n        thousandSeparator,\n        decimalSeparator,\n      };\n      handleSetFormatProps(newFormatProps);\n    },\n    [formatProps, isFormatTraitSet, handleSetFormatProps]\n  );\n\n  const useThousandSeparatorLabel = React.useRef(\n    UiIModelComponents.translate(\n      \"QuantityFormat.labels.useThousandSeparatorLabel\"\n    )\n  );\n  const thousandSeparatorLabel = React.useRef(\n    UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\")\n  );\n\n  return (\n    <>\n      <span className={\"uicore-label\"}>\n        {useThousandSeparatorLabel.current}\n      </span>\n      <Checkbox\n        data-testid=\"use-thousands-separator\"\n        checked={isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleUseThousandsSeparatorChange}\n      />\n      <span\n        className={classnames(\n          \"uicore-label\",\n          !isFormatTraitSet(FormatTraits.Use1000Separator) && \"uicore-disabled\"\n        )}\n      >\n        {thousandSeparatorLabel.current}\n      </span>\n      <ThousandsSelector\n        data-testid=\"thousands-separator-selector\"\n        separator={formatProps.thousandSeparator ?? \",\"}\n        disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)}\n        onChange={handleThousandSeparatorChange}\n      />\n    </>\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module QuantityFormat
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { UnitsProvider } from "@itwin/core-quantity";
 import type { CommonProps } from "@itwin/core-react";
 /** Properties of [[UnitDescr]] component.
@@ -20,5 +20,5 @@ export interface UnitDescrProps extends CommonProps {
 /** Component use to display dropdown list of possible units.
  * @internal
  */
-export declare function UnitDescr(props: UnitDescrProps): JSX.Element;
+export declare function UnitDescr(props: UnitDescrProps): React.JSX.Element;
 //# sourceMappingURL=UnitDescr.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitDescr.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAgDD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAuH9C"}
+{"version":3,"file":"UnitDescr.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAgDD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAuH9C"}

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnitDescr.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport type { UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Input, Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[UnitDescr]] component.\n * @internal\n */\nexport interface UnitDescrProps extends CommonProps {\n  name: string;\n  parentUnitName?: string;\n  label: string;\n  index: number;\n  unitsProvider: UnitsProvider;\n  readonly?: boolean;\n  onUnitChange: (value: string, index: number) => void;\n  onLabelChange: (value: string, index: number) => void;\n}\n\nasync function getUnitConversionData(\n  possibleUnits: UnitProps[],\n  toUnit: UnitProps,\n  unitsProvider: UnitsProvider\n) {\n  const unitConversionEntries = possibleUnits.map(async (unit) => {\n    const conversion = await unitsProvider.getConversion(unit, toUnit);\n    return { conversion, unitProps: unit };\n  });\n  return unitConversionEntries;\n}\n\nasync function getPossibleUnits(\n  parentUnit: UnitProps,\n  unitsProvider: UnitsProvider,\n  ensureCompatibleComposite: boolean\n) {\n  const phenomenon = parentUnit.phenomenon;\n  const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);\n  if (!ensureCompatibleComposite) return possibleUnits;\n\n  const conversionPromises = await getUnitConversionData(\n    possibleUnits,\n    parentUnit,\n    unitsProvider\n  );\n  const conversionEntries = await Promise.all(conversionPromises);\n  // sort the entries so the best potential sub unit will be the first one in the array\n  return conversionEntries\n    .filter(\n      (entry) =>\n        entry.unitProps.system === parentUnit.system &&\n        entry.conversion.factor < 1\n    )\n    .sort((a, b) => b.conversion.factor - a.conversion.factor)\n    .map((value) => value.unitProps);\n}\n\nfunction getUnitName(fullUnitName: string) {\n  const nameParts = fullUnitName.split(/[.:]/);\n  // istanbul ignore else\n  if (nameParts.length > 0) return nameParts[nameParts.length - 1];\n  // istanbul ignore next\n  throw Error(\"Bad unit name encountered\");\n}\n\n/** Component use to display dropdown list of possible units.\n * @internal\n */\nexport function UnitDescr(props: UnitDescrProps) {\n  const {\n    name,\n    label,\n    parentUnitName,\n    index,\n    onUnitChange,\n    onLabelChange,\n    readonly,\n    unitsProvider,\n  } = props;\n  const [unitOptions, setUnitOptions] = React.useState<SelectOption<string>[]>([\n    { value: name, label: getUnitName(name) },\n  ]);\n  const [currentUnit, setCurrentUnit] = React.useState({ name, label });\n  const isMounted = React.useRef(false);\n\n  React.useEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  });\n\n  React.useEffect(() => {\n    async function fetchAllowableUnitSelections() {\n      const currentUnitProps = await unitsProvider.findUnitByName(name);\n      const parentUnit = await unitsProvider.findUnitByName(\n        parentUnitName ? parentUnitName : name\n      );\n      // istanbul ignore else\n      if (parentUnit && currentUnitProps) {\n        let potentialSubUnit: UnitProps | undefined;\n        const potentialUnits = await getPossibleUnits(\n          parentUnit,\n          unitsProvider,\n          index !== 0\n        );\n        // istanbul ignore else\n        if (index < 3) {\n          const potentialSubUnits = await getPossibleUnits(\n            currentUnitProps,\n            unitsProvider,\n            true\n          );\n          if (potentialSubUnits.length) potentialSubUnit = potentialSubUnits[0];\n        }\n\n        const options =\n          potentialUnits.length > 0\n            ? potentialUnits\n                .map((unitValue) => {\n                  return {\n                    value: `${unitValue.name}:${unitValue.label}`,\n                    label: getUnitName(unitValue.name),\n                  };\n                })\n                .sort((a, b) => a.label.localeCompare(b.label))\n            : /* istanbul ignore next */\n              [\n                {\n                  value: `${currentUnitProps.name}:${currentUnitProps.label}`,\n                  label: getUnitName(name),\n                },\n              ];\n\n        if (potentialSubUnit) {\n          // construct an entry that will provide the name and label of the unit to add\n          options.push({\n            value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`,\n            label: \"Add sub-unit\",\n          }); // NEEDSWORK - i18n\n        }\n\n        if (index !== 0) options.push({ value: \"REMOVEUNIT\", label: \"Remove\" }); // NEEDSWORK - i18n\n\n        // istanbul ignore else\n        if (isMounted.current) {\n          setUnitOptions(options);\n          setCurrentUnit(currentUnitProps);\n        }\n      }\n    }\n    void fetchAllowableUnitSelections();\n  }, [index, label, name, parentUnitName, unitsProvider]);\n\n  const handleOnUnitChange = React.useCallback(\n    (newValue: string) => {\n      onUnitChange && onUnitChange(newValue, index);\n    },\n    [index, onUnitChange]\n  );\n\n  const handleOnLabelChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      onLabelChange && onLabelChange(e.target.value, index);\n    },\n    [index, onLabelChange]\n  );\n\n  return (\n    <>\n      <Select\n        options={unitOptions}\n        data-testid={`unit-${currentUnit.name}`}\n        value={`${currentUnit.name}:${currentUnit.label}`}\n        onChange={handleOnUnitChange as any}\n        disabled={readonly}\n        size=\"small\"\n      />\n      <Input\n        data-testid={`unit-label-${currentUnit.name}`}\n        value={label}\n        onChange={handleOnLabelChange}\n        size=\"small\"\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"UnitDescr.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport type { UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Input, Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[UnitDescr]] component.\n * @internal\n */\nexport interface UnitDescrProps extends CommonProps {\n  name: string;\n  parentUnitName?: string;\n  label: string;\n  index: number;\n  unitsProvider: UnitsProvider;\n  readonly?: boolean;\n  onUnitChange: (value: string, index: number) => void;\n  onLabelChange: (value: string, index: number) => void;\n}\n\nasync function getUnitConversionData(\n  possibleUnits: UnitProps[],\n  toUnit: UnitProps,\n  unitsProvider: UnitsProvider\n) {\n  const unitConversionEntries = possibleUnits.map(async (unit) => {\n    const conversion = await unitsProvider.getConversion(unit, toUnit);\n    return { conversion, unitProps: unit };\n  });\n  return unitConversionEntries;\n}\n\nasync function getPossibleUnits(\n  parentUnit: UnitProps,\n  unitsProvider: UnitsProvider,\n  ensureCompatibleComposite: boolean\n) {\n  const phenomenon = parentUnit.phenomenon;\n  const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);\n  if (!ensureCompatibleComposite) return possibleUnits;\n\n  const conversionPromises = await getUnitConversionData(\n    possibleUnits,\n    parentUnit,\n    unitsProvider\n  );\n  const conversionEntries = await Promise.all(conversionPromises);\n  // sort the entries so the best potential sub unit will be the first one in the array\n  return conversionEntries\n    .filter(\n      (entry) =>\n        entry.unitProps.system === parentUnit.system &&\n        entry.conversion.factor < 1\n    )\n    .sort((a, b) => b.conversion.factor - a.conversion.factor)\n    .map((value) => value.unitProps);\n}\n\nfunction getUnitName(fullUnitName: string) {\n  const nameParts = fullUnitName.split(/[.:]/);\n  // istanbul ignore else\n  if (nameParts.length > 0) return nameParts[nameParts.length - 1];\n  // istanbul ignore next\n  throw Error(\"Bad unit name encountered\");\n}\n\n/** Component use to display dropdown list of possible units.\n * @internal\n */\nexport function UnitDescr(props: UnitDescrProps) {\n  const {\n    name,\n    label,\n    parentUnitName,\n    index,\n    onUnitChange,\n    onLabelChange,\n    readonly,\n    unitsProvider,\n  } = props;\n  const [unitOptions, setUnitOptions] = React.useState<SelectOption<string>[]>([\n    { value: name, label: getUnitName(name) },\n  ]);\n  const [currentUnit, setCurrentUnit] = React.useState({ name, label });\n  const isMounted = React.useRef(false);\n\n  React.useEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  });\n\n  React.useEffect(() => {\n    async function fetchAllowableUnitSelections() {\n      const currentUnitProps = await unitsProvider.findUnitByName(name);\n      const parentUnit = await unitsProvider.findUnitByName(\n        parentUnitName ? parentUnitName : name\n      );\n      // istanbul ignore else\n      if (parentUnit && currentUnitProps) {\n        let potentialSubUnit: UnitProps | undefined;\n        const potentialUnits = await getPossibleUnits(\n          parentUnit,\n          unitsProvider,\n          index !== 0\n        );\n        // istanbul ignore else\n        if (index < 3) {\n          const potentialSubUnits = await getPossibleUnits(\n            currentUnitProps,\n            unitsProvider,\n            true\n          );\n          if (potentialSubUnits.length) potentialSubUnit = potentialSubUnits[0];\n        }\n\n        const options =\n          potentialUnits.length > 0\n            ? potentialUnits\n                .map((unitValue) => {\n                  return {\n                    value: `${unitValue.name}:${unitValue.label}`,\n                    label: getUnitName(unitValue.name),\n                  };\n                })\n                .sort((a, b) => a.label.localeCompare(b.label))\n            : /* istanbul ignore next */\n              [\n                {\n                  value: `${currentUnitProps.name}:${currentUnitProps.label}`,\n                  label: getUnitName(name),\n                },\n              ];\n\n        if (potentialSubUnit) {\n          // construct an entry that will provide the name and label of the unit to add\n          options.push({\n            value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`,\n            label: \"Add sub-unit\",\n          }); // NEEDSWORK - i18n\n        }\n\n        if (index !== 0) options.push({ value: \"REMOVEUNIT\", label: \"Remove\" }); // NEEDSWORK - i18n\n\n        // istanbul ignore else\n        if (isMounted.current) {\n          setUnitOptions(options);\n          setCurrentUnit(currentUnitProps);\n        }\n      }\n    }\n    void fetchAllowableUnitSelections();\n  }, [index, label, name, parentUnitName, unitsProvider]);\n\n  const handleOnUnitChange = React.useCallback(\n    (newValue: string) => {\n      onUnitChange && onUnitChange(newValue, index);\n    },\n    [index, onUnitChange]\n  );\n\n  const handleOnLabelChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      onLabelChange && onLabelChange(e.target.value, index);\n    },\n    [index, onLabelChange]\n  );\n\n  return (\n    <>\n      <Select\n        options={unitOptions}\n        data-testid={`unit-${currentUnit.name}`}\n        value={`${currentUnit.name}:${currentUnit.label}`}\n        onChange={handleOnUnitChange}\n        disabled={readonly}\n        size=\"small\"\n      />\n      <Input\n        data-testid={`unit-label-${currentUnit.name}`}\n        value={label}\n        onChange={handleOnLabelChange}\n        size=\"small\"\n      />\n    </>\n  );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/InlineEdit.d.ts

@@ -22,7 +22,7 @@ export declare class InlineEdit extends React.Component<InlineEditProps, InlineE
     private _onKeyDown;
     private _onChange;
     private _sendChange;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=InlineEdit.d.ts.map

package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts

@@ -6,7 +6,7 @@ import type { CommonProps } from "@itwin/core-react";
  */
 export declare class PlayerButton extends React.PureComponent<any> {
     private _onClick;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 /** Properties for Play/Pause button used on timeline control
  * @internal
@@ -28,7 +28,7 @@ export declare class PlayButton extends React.Component<PlayerButtonProps, PlayB
     /** @internal */
     componentDidUpdate(): void;
     private _onClick;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=PlayerButton.d.ts.map

package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts

@@ -6,20 +6,18 @@ import type { TimelineDateMarkerProps } from "./TimelineComponent";
  * @internal
  */
 export declare function getPercentageOfRectangle(rect: DOMRect, pointer: number): number;
-/**
- * @internal
- */
+/** @internal */
 export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate, }: {
     showToolTip: boolean;
     percent: number;
     tooltipText: string;
     markDate?: DateMarkerProps;
-}): JSX.Element;
+}): React.JSX.Element;
 /**
  * Custom Timeline Thumb
  * @internal
  */
-export declare function CustomThumb(): JSX.Element;
+export declare function CustomThumb(): React.JSX.Element;
 /**
  * @internal
  */
@@ -50,6 +48,6 @@ interface DateMarkerProps {
 /** Scrubber/Slider for timeline control
  * @internal
  */
-export declare function Scrubber(props: ScrubberProps): JSX.Element;
+export declare function Scrubber(props: ScrubberProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=Scrubber.d.ts.map

package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnE;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,UAGtE;AAiGD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,eAsBA;AAED;;;GAGG;AACH,wBAAgB,WAAW,gBAQ1B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,cAAc,GAAG,SAAS,WAuB1E;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;CACpC;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AACD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAsH5C"}
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnE;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,UAGtE;AAkGD,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,qBAsBA;AAED;;;GAGG;AACH,wBAAgB,WAAW,sBAQ1B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,cAAc,GAAG,SAAS,WAuB1E;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;CACpC;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AACD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAsH5C"}

package/lib/esm/imodel-components-react/timeline/Scrubber.js

@@ -63,9 +63,7 @@ function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
     }
     return false;
 }
-/**
- * @internal
- */
+/** @internal */
 export function RailMarkers({ showToolTip, percent, tooltipText, markDate, }) {
     return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
         showToolTip && (React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
@@ -129,7 +127,7 @@ export function Scrubber(props) {
         sliderContainer &&
             setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
     }, [sliderContainer]);
-    const thumbHasFocus = useFocusedThumb(sliderContainer !== null && sliderContainer !== void 0 ? sliderContainer : undefined);
+    const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);
     const tickLabel = React.useMemo(() => {
         const showTip = isPlaying || showRailTooltip || thumbHasFocus;
         const percent = isPlaying || thumbHasFocus

package/lib/esm/imodel-components-react/timeline/Scrubber.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.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 \"./Scrubber.scss\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useEventListener } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { TimelineDateMarkerProps } from \"./TimelineComponent\";\n\n/**\n * @internal\n */\nexport function getPercentageOfRectangle(rect: DOMRect, pointer: number) {\n  const position = Math.min(rect.right, Math.max(rect.left, pointer));\n  return (position - rect.left) / rect.width;\n}\n\n// istanbul ignore next - WIP\nconst formatDuration = (value: number) => {\n  const addZero = (i: number) => {\n    return i < 10 ? `0${i}` : i;\n  };\n\n  const date = new Date(value);\n  const minutes = date.getUTCMinutes();\n  const seconds = date.getUTCSeconds();\n  return `${addZero(minutes)}:${addZero(seconds)}`;\n};\n\nconst formatDate = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return toDateString(date, timeZoneOffset);\n};\n\n// istanbul ignore next - WIP\nconst formatTime = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return ` ${toTimeString(date, timeZoneOffset)}`;\n};\n\nfunction generateToolTipText(\n  showTime: boolean,\n  percent: number,\n  min: number,\n  max: number,\n  startDate?: Date,\n  endDate?: Date,\n  timeZoneOffset = 0\n) {\n  if (startDate && endDate)\n    return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n      showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n    } `;\n\n  const val = Math.round(min + (max - min) * percent);\n  return formatDuration(val);\n}\n\nfunction getPercentageFromDate(startDate: Date, endDate: Date, date?: Date) {\n  const newDate = date ? date : new Date();\n  const startTime = startDate.getTime();\n  const totalDuration = endDate.getTime() - startTime;\n  return (newDate.getTime() - startTime) / totalDuration;\n}\n\nfunction getDateMarker(\n  dateMarkerPropsIn: TimelineDateMarkerProps,\n  startDate: Date,\n  endDate: Date\n): DateMarkerProps {\n  const percentage = getPercentageFromDate(\n    startDate,\n    endDate,\n    dateMarkerPropsIn.date\n  );\n  const marker = dateMarkerPropsIn.dateMarker ? (\n    dateMarkerPropsIn.dateMarker\n  ) : (\n    <span className=\"date-marker-default\"></span>\n  );\n  return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n  dateMarkerProps?: TimelineDateMarkerProps,\n  startDate?: Date,\n  endDate?: Date\n): boolean {\n  // istanbul ignore else\n  if (dateMarkerProps && startDate && endDate) {\n    const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();\n    // istanbul ignore else\n    if (\n      inDate.getTime() >= startDate.getTime() &&\n      inDate.getTime() <= endDate.getTime()\n    )\n      return true;\n  }\n  return false;\n}\n/**\n * @internal\n */\nexport function RailMarkers({\n  showToolTip,\n  percent,\n  tooltipText,\n  markDate,\n}: {\n  showToolTip: boolean;\n  percent: number;\n  tooltipText: string;\n  markDate?: DateMarkerProps;\n}) {\n  return (\n    <div className=\"components-timeline-rail-marker-container\">\n      {showToolTip && (\n        <div\n          className=\"components-timeline-tooltip\"\n          style={{ left: `${Math.round(percent * 100)}% ` }}\n        >\n          <span className=\"tooltip-text\">{tooltipText}</span>\n        </div>\n      )}\n      {markDate && (\n        <div\n          className=\"components-timeline-date-marker\"\n          data-testid=\"test-date-marker\"\n          style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n        >\n          {markDate.dateMarker}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom Timeline Thumb\n * @internal\n */\nexport function CustomThumb() {\n  return (\n    <div className=\"scrubber-handle\">\n      <div />\n      <div />\n      <div />\n    </div>\n  );\n}\n\n/**\n * @internal\n */\nexport function useFocusedThumb(sliderContainer: HTMLDivElement | undefined) {\n  const [thumbElement, setThumbElement] = React.useState<HTMLDivElement>();\n\n  React.useLayoutEffect(() => {\n    if (!sliderContainer) return;\n    const element = sliderContainer.querySelector(\".components-timeline-thumb\");\n    if (!element) return;\n    setThumbElement(element as HTMLDivElement);\n  }, [sliderContainer, thumbElement]);\n\n  const [thumbHasFocus, setThumbHasFocus] = React.useState(false);\n\n  const handleThumbFocus = React.useCallback(() => {\n    setThumbHasFocus(true);\n  }, []);\n\n  const handleThumbBlur = React.useCallback(() => {\n    setThumbHasFocus(false);\n  }, []);\n\n  useEventListener(\"focus\", handleThumbFocus, thumbElement);\n  useEventListener(\"blur\", handleThumbBlur, thumbElement);\n  return thumbHasFocus;\n}\n\n/** Properties for Scrubber/Slider used on timeline control\n * @internal\n */\nexport interface ScrubberProps extends CommonProps {\n  currentDuration: number;\n  totalDuration: number;\n  isPlaying: boolean;\n  inMiniMode: boolean;\n  startDate?: Date;\n  endDate?: Date;\n  showTime?: boolean;\n  onChange?: (values: ReadonlyArray<number>) => void;\n  onUpdate?: (values: ReadonlyArray<number>) => void;\n  timeZoneOffset?: number;\n  markDate?: TimelineDateMarkerProps;\n}\n\n/** Properties for marking current date in RailMarkers\n * @internal\n */\ninterface DateMarkerProps {\n  datePercentage: number;\n  dateMarker?: React.ReactNode;\n}\n/** Scrubber/Slider for timeline control\n * @internal\n */\nexport function Scrubber(props: ScrubberProps) {\n  const {\n    startDate,\n    endDate,\n    showTime,\n    isPlaying,\n    totalDuration,\n    timeZoneOffset,\n    currentDuration,\n    className,\n    onChange,\n    onUpdate,\n  } = props;\n\n  const [sliderContainer, setSliderContainer] =\n    React.useState<HTMLDivElement | null>(null);\n  const [pointerPercent, setPointerPercent] = React.useState(0);\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n  // istanbul ignore next\n  const handlePointerEnter = React.useCallback(() => {\n    setShowRailTooltip(true);\n  }, []);\n\n  // istanbul ignore next\n  const handlePointerLeave = React.useCallback(() => {\n    setShowRailTooltip(false);\n  }, []);\n\n  const handlePointerMove = React.useCallback(\n    (event: React.PointerEvent) => {\n      sliderContainer &&\n        setPointerPercent(\n          getPercentageOfRectangle(\n            sliderContainer.getBoundingClientRect(),\n            event.clientX\n          )\n        );\n    },\n    [sliderContainer]\n  );\n\n  const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);\n\n  const tickLabel = React.useMemo(() => {\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\n    const percent =\n      isPlaying || thumbHasFocus\n        ? currentDuration / totalDuration\n        : pointerPercent;\n    const markDateInRange = markDateInTimelineRange(\n      props.markDate,\n      startDate,\n      endDate\n    );\n    const currentDateMarker =\n      props.markDate && markDateInRange && startDate && endDate\n        ? getDateMarker(props.markDate, startDate, endDate)\n        : undefined;\n    const tooltipText = generateToolTipText(\n      !!showTime,\n      percent,\n      0,\n      totalDuration,\n      startDate,\n      endDate,\n      timeZoneOffset\n    );\n    return (\n      <RailMarkers\n        showToolTip={showTip}\n        percent={percent}\n        tooltipText={tooltipText}\n        markDate={currentDateMarker}\n      />\n    );\n  }, [\n    isPlaying,\n    showRailTooltip,\n    currentDuration,\n    totalDuration,\n    pointerPercent,\n    startDate,\n    endDate,\n    timeZoneOffset,\n    showTime,\n    thumbHasFocus,\n    props.markDate,\n  ]);\n\n  return (\n    <Slider\n      ref={setSliderContainer}\n      className={className}\n      step={1}\n      min={0}\n      max={totalDuration}\n      minLabel=\"\"\n      maxLabel=\"\"\n      onUpdate={onUpdate}\n      onChange={onChange}\n      values={[currentDuration]}\n      tooltipProps={tooltipProps}\n      thumbProps={() => ({\n        children: <CustomThumb />,\n        className: \"components-timeline-thumb\",\n      })}\n      tickLabels={tickLabel}\n      onPointerEnter={handlePointerEnter}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Scrubber.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.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 \"./Scrubber.scss\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useEventListener } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { TimelineDateMarkerProps } from \"./TimelineComponent\";\n\n/**\n * @internal\n */\nexport function getPercentageOfRectangle(rect: DOMRect, pointer: number) {\n  const position = Math.min(rect.right, Math.max(rect.left, pointer));\n  return (position - rect.left) / rect.width;\n}\n\n// istanbul ignore next - WIP\nconst formatDuration = (value: number) => {\n  const addZero = (i: number) => {\n    return i < 10 ? `0${i}` : i;\n  };\n\n  const date = new Date(value);\n  const minutes = date.getUTCMinutes();\n  const seconds = date.getUTCSeconds();\n  return `${addZero(minutes)}:${addZero(seconds)}`;\n};\n\nconst formatDate = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return toDateString(date, timeZoneOffset);\n};\n\n// istanbul ignore next - WIP\nconst formatTime = (\n  startDate: Date,\n  endDate: Date,\n  fraction: number,\n  timeZoneOffset?: number\n) => {\n  const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n  const date = new Date(startDate.getTime() + delta);\n  return ` ${toTimeString(date, timeZoneOffset)}`;\n};\n\nfunction generateToolTipText(\n  showTime: boolean,\n  percent: number,\n  min: number,\n  max: number,\n  startDate?: Date,\n  endDate?: Date,\n  timeZoneOffset = 0\n) {\n  if (startDate && endDate)\n    return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n      showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n    } `;\n\n  const val = Math.round(min + (max - min) * percent);\n  return formatDuration(val);\n}\n\nfunction getPercentageFromDate(startDate: Date, endDate: Date, date?: Date) {\n  const newDate = date ? date : new Date();\n  const startTime = startDate.getTime();\n  const totalDuration = endDate.getTime() - startTime;\n  return (newDate.getTime() - startTime) / totalDuration;\n}\n\nfunction getDateMarker(\n  dateMarkerPropsIn: TimelineDateMarkerProps,\n  startDate: Date,\n  endDate: Date\n): DateMarkerProps {\n  const percentage = getPercentageFromDate(\n    startDate,\n    endDate,\n    dateMarkerPropsIn.date\n  );\n  const marker = dateMarkerPropsIn.dateMarker ? (\n    dateMarkerPropsIn.dateMarker\n  ) : (\n    <span className=\"date-marker-default\"></span>\n  );\n  return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n  dateMarkerProps?: TimelineDateMarkerProps,\n  startDate?: Date,\n  endDate?: Date\n): boolean {\n  // istanbul ignore else\n  if (dateMarkerProps && startDate && endDate) {\n    const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();\n    // istanbul ignore else\n    if (\n      inDate.getTime() >= startDate.getTime() &&\n      inDate.getTime() <= endDate.getTime()\n    )\n      return true;\n  }\n  return false;\n}\n\n/** @internal */\nexport function RailMarkers({\n  showToolTip,\n  percent,\n  tooltipText,\n  markDate,\n}: {\n  showToolTip: boolean;\n  percent: number;\n  tooltipText: string;\n  markDate?: DateMarkerProps;\n}) {\n  return (\n    <div className=\"components-timeline-rail-marker-container\">\n      {showToolTip && (\n        <div\n          className=\"components-timeline-tooltip\"\n          style={{ left: `${Math.round(percent * 100)}% ` }}\n        >\n          <span className=\"tooltip-text\">{tooltipText}</span>\n        </div>\n      )}\n      {markDate && (\n        <div\n          className=\"components-timeline-date-marker\"\n          data-testid=\"test-date-marker\"\n          style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n        >\n          {markDate.dateMarker}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Custom Timeline Thumb\n * @internal\n */\nexport function CustomThumb() {\n  return (\n    <div className=\"scrubber-handle\">\n      <div />\n      <div />\n      <div />\n    </div>\n  );\n}\n\n/**\n * @internal\n */\nexport function useFocusedThumb(sliderContainer: HTMLDivElement | undefined) {\n  const [thumbElement, setThumbElement] = React.useState<HTMLDivElement>();\n\n  React.useLayoutEffect(() => {\n    if (!sliderContainer) return;\n    const element = sliderContainer.querySelector(\".components-timeline-thumb\");\n    if (!element) return;\n    setThumbElement(element as HTMLDivElement);\n  }, [sliderContainer, thumbElement]);\n\n  const [thumbHasFocus, setThumbHasFocus] = React.useState(false);\n\n  const handleThumbFocus = React.useCallback(() => {\n    setThumbHasFocus(true);\n  }, []);\n\n  const handleThumbBlur = React.useCallback(() => {\n    setThumbHasFocus(false);\n  }, []);\n\n  useEventListener(\"focus\", handleThumbFocus, thumbElement);\n  useEventListener(\"blur\", handleThumbBlur, thumbElement);\n  return thumbHasFocus;\n}\n\n/** Properties for Scrubber/Slider used on timeline control\n * @internal\n */\nexport interface ScrubberProps extends CommonProps {\n  currentDuration: number;\n  totalDuration: number;\n  isPlaying: boolean;\n  inMiniMode: boolean;\n  startDate?: Date;\n  endDate?: Date;\n  showTime?: boolean;\n  onChange?: (values: ReadonlyArray<number>) => void;\n  onUpdate?: (values: ReadonlyArray<number>) => void;\n  timeZoneOffset?: number;\n  markDate?: TimelineDateMarkerProps;\n}\n\n/** Properties for marking current date in RailMarkers\n * @internal\n */\ninterface DateMarkerProps {\n  datePercentage: number;\n  dateMarker?: React.ReactNode;\n}\n/** Scrubber/Slider for timeline control\n * @internal\n */\nexport function Scrubber(props: ScrubberProps) {\n  const {\n    startDate,\n    endDate,\n    showTime,\n    isPlaying,\n    totalDuration,\n    timeZoneOffset,\n    currentDuration,\n    className,\n    onChange,\n    onUpdate,\n  } = props;\n\n  const [sliderContainer, setSliderContainer] =\n    React.useState<HTMLDivElement | null>(null);\n  const [pointerPercent, setPointerPercent] = React.useState(0);\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n  // istanbul ignore next\n  const handlePointerEnter = React.useCallback(() => {\n    setShowRailTooltip(true);\n  }, []);\n\n  // istanbul ignore next\n  const handlePointerLeave = React.useCallback(() => {\n    setShowRailTooltip(false);\n  }, []);\n\n  const handlePointerMove = React.useCallback(\n    (event: React.PointerEvent) => {\n      sliderContainer &&\n        setPointerPercent(\n          getPercentageOfRectangle(\n            sliderContainer.getBoundingClientRect(),\n            event.clientX\n          )\n        );\n    },\n    [sliderContainer]\n  );\n\n  const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);\n\n  const tickLabel = React.useMemo(() => {\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\n    const percent =\n      isPlaying || thumbHasFocus\n        ? currentDuration / totalDuration\n        : pointerPercent;\n    const markDateInRange = markDateInTimelineRange(\n      props.markDate,\n      startDate,\n      endDate\n    );\n    const currentDateMarker =\n      props.markDate && markDateInRange && startDate && endDate\n        ? getDateMarker(props.markDate, startDate, endDate)\n        : undefined;\n    const tooltipText = generateToolTipText(\n      !!showTime,\n      percent,\n      0,\n      totalDuration,\n      startDate,\n      endDate,\n      timeZoneOffset\n    );\n    return (\n      <RailMarkers\n        showToolTip={showTip}\n        percent={percent}\n        tooltipText={tooltipText}\n        markDate={currentDateMarker}\n      />\n    );\n  }, [\n    isPlaying,\n    showRailTooltip,\n    currentDuration,\n    totalDuration,\n    pointerPercent,\n    startDate,\n    endDate,\n    timeZoneOffset,\n    showTime,\n    thumbHasFocus,\n    props.markDate,\n  ]);\n\n  return (\n    <Slider\n      ref={setSliderContainer}\n      className={className}\n      step={1}\n      min={0}\n      max={totalDuration}\n      minLabel=\"\"\n      maxLabel=\"\"\n      onUpdate={onUpdate}\n      onChange={onChange}\n      values={[currentDuration]}\n      tooltipProps={tooltipProps}\n      thumbProps={() => ({\n        children: <CustomThumb />,\n        className: \"components-timeline-thumb\",\n      })}\n      tickLabels={tickLabel}\n      onPointerEnter={handlePointerEnter}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n    />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/Scrubber.scss

@@ -18,10 +18,11 @@
 }
 
 .components-timeline-rail-marker-container {
-  width: 100%;
   position: absolute;
+  width: 100%;
+  top: 0;
 
-  div.components-timeline-tooltip {
+  .components-timeline-tooltip {
     @include uicore-z-index(tooltip);
     position: absolute;
     top: -8px;

package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts

@@ -72,7 +72,7 @@ export declare class SolarTimeline extends React.PureComponent<SolarTimelineComp
     private _onPresetColorPick;
     private _handleHueOrSaturationChange;
     getLocalTime(ticks: number): Date;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=SolarTimeline.d.ts.map

package/lib/esm/imodel-components-react/timeline/SolarTimeline.js

@@ -49,7 +49,7 @@ function Timeline(props) {
             setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
     }, [sliderContainer]);
     const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying, } = props;
-    const thumbHasFocus = useFocusedThumb(sliderContainer !== null && sliderContainer !== void 0 ? sliderContainer : undefined);
+    const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);
     const tickLabel = React.useMemo(() => {
         const showTip = isPlaying || showRailTooltip || thumbHasFocus;
         const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;