@itwin/imodel-components-react 4.0.0-dev.8 → 4.0.0-dev.9

package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js

@@ -7,8 +7,7 @@
  */
 import * as React from "react";
 import { getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition, isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, } from "@itwin/core-frontend";
-import { Select } from "@itwin/core-react";
-import { Checkbox, Input } from "@itwin/itwinui-react";
+import { Checkbox, Input, Select } from "@itwin/itwinui-react";
 import { FormatPanel } from "./FormatPanel";
 import { DeepCompare } from "@itwin/core-geometry";
 function createTextInputFormatPropEditor(key, label, inProps, getString, setString, fireFormatChange) {
@@ -24,8 +23,8 @@ function createSelectFormatPropEditor(key, label, options, inProps, getString, s
     const value = getString(inProps);
     return (React.createElement(React.Fragment, { key: `${key}` },
         React.createElement("span", { key: `${key}-label`, className: "uicore-label" }, label),
-        React.createElement(Select, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, options: options, onChange: (e) => {
-                const newProps = setString(inProps, e.currentTarget.value);
+        React.createElement(Select, { "data-testid": `${key}-editor`, key: `${key}-editor`, value: value, options: options, size: "small", onChange: (newValue) => {
+                const newProps = setString(inProps, newValue);
                 fireFormatChange(newProps);
             } })));
 }
@@ -49,21 +48,20 @@ export function QuantityFormatPanel(props) {
     const { quantityType, onFormatChange, ...otherProps } = props;
     const [formatProps, setFormatProps] = React.useState();
     const initialFormatProps = React.useRef();
-    const [persistenceUnit, setPersistenceUnit] = React.useState(() => {
-        const quantityTypeKey = getQuantityTypeKey(quantityType);
-        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
-        // istanbul ignore else
-        if (quantityTypeDefinition)
-            return quantityTypeDefinition.persistenceUnit;
-        else
-            throw Error(`Unable to locate a quantity type with type ${quantityType}`);
-    });
+    const [persistenceUnit, setPersistenceUnit] = React.useState();
     React.useEffect(() => {
         const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);
         // istanbul ignore else
         if (!initialFormatProps.current)
             initialFormatProps.current = newFormatProps;
         setFormatProps(newFormatProps);
+        const quantityTypeKey = getQuantityTypeKey(quantityType);
+        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
+        // istanbul ignore else
+        if (quantityTypeDefinition)
+            setPersistenceUnit(quantityTypeDefinition.persistenceUnit);
+        else
+            throw Error(`Unable to locate a quantity type with type ${quantityType}`);
     }, [quantityType]); // no dependencies defined as we want this to run on every render
     // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -77,13 +75,6 @@ export function QuantityFormatPanel(props) {
             }
         }
     }); // no dependencies defined as we want this to run on every render
-    React.useEffect(() => {
-        const quantityTypeKey = getQuantityTypeKey(quantityType);
-        const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);
-        // istanbul ignore else
-        if (quantityTypeDefinition)
-            setPersistenceUnit(quantityTypeDefinition.persistenceUnit);
-    }, [quantityType]);
     const handleOnFormatChanged = React.useCallback(async (newProps) => {
         setFormatProps(newProps);
         onFormatChange && onFormatChange(newProps);

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

@@ -1 +1 @@
-{"version":3,"file":"QuantityFormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/QuantityFormatPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  CustomFormatPropEditorSpec, getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition,\r\n  isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, QuantityTypeArg,\r\n} from \"@itwin/core-frontend\";\r\nimport { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps, Select } from \"@itwin/core-react\";\r\nimport { Checkbox, Input } from \"@itwin/itwinui-react\";\r\nimport { FormatPanel } from \"./FormatPanel\";\r\nimport { DeepCompare } from \"@itwin/core-geometry\";\r\n\r\nfunction createTextInputFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Input data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        size=\"small\"\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createSelectFormatPropEditor(key: string, label: string, options: { label: string, value: string }[], inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      {/* NEEDSWORK - unable to migrate this Select to iTwinUI because no menu items were found */}\r\n      {/* eslint-disable-next-line deprecation/deprecation */}\r\n      <Select data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        options={options}\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createCheckboxFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getBool: (props: FormatProps) => boolean, setBool: (props: FormatProps, isChecked: boolean) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const isChecked = getBool(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Checkbox data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        checked={isChecked}\r\n        onChange={(e) => {\r\n          const newProps = setBool(inProps, e.target.checked);\r\n          fireFormatChange(newProps);\r\n        }} />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\r\n  const compare = new DeepCompare();\r\n  return compare.compare(obj1, obj2);\r\n}\r\n\r\n/** Properties of [[QuantityFormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface QuantityFormatPanelProps extends CommonProps {\r\n  quantityType: QuantityTypeArg;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  /** props below are to be passed on to FormatPanel */\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  enableMinimumProperties?: boolean;\r\n}\r\n\r\n/** Component to set properties that control Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function QuantityFormatPanel(props: QuantityFormatPanelProps) {\r\n  const { quantityType, onFormatChange, ...otherProps } = props;\r\n  const [formatProps, setFormatProps] = React.useState<FormatProps>();\r\n  const initialFormatProps = React.useRef<FormatProps>();\r\n\r\n  const [persistenceUnit, setPersistenceUnit] = React.useState(() => {\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      return quantityTypeDefinition.persistenceUnit;\r\n    else\r\n      throw Error(`Unable to locate a quantity type with type ${quantityType}`);\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (!initialFormatProps.current)\r\n      initialFormatProps.current = newFormatProps;\r\n    setFormatProps(newFormatProps);\r\n  }, [quantityType]); // no dependencies defined as we want this to run on every render\r\n\r\n  // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (initialFormatProps.current && newFormatProps) {\r\n      if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {\r\n        initialFormatProps.current = newFormatProps;\r\n        setFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }); // no dependencies defined as we want this to run on every render\r\n\r\n  React.useEffect(() => {\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      setPersistenceUnit(quantityTypeDefinition.persistenceUnit);\r\n  }, [quantityType]);\r\n\r\n  const handleOnFormatChanged = React.useCallback(async (newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const createCustomPropEditors = React.useCallback((specs: CustomFormatPropEditorSpec[], inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n    return specs.map((spec, index) => {\r\n      if (isCheckboxFormatPropEditorSpec(spec))\r\n        return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);\r\n      if (isTextSelectFormatPropEditorSpec(spec))\r\n        return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore else */\r\n      if (isTextInputFormatPropEditorSpec(spec))\r\n        return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore next */\r\n      return <div key={index} />;\r\n    });\r\n  }, []);\r\n\r\n  const providePrimaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.primaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideSecondaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.secondaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideFormatSpec = React.useCallback(\r\n    async (inProps: FormatProps, _persistenceUnit: UnitProps, _unitsProvider: UnitsProvider) => {\r\n      return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);\r\n    }, [quantityType]);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-quantityPanel\">\r\n      {persistenceUnit && formatProps &&\r\n        <FormatPanel onFormatChange={handleOnFormatChanged} {...otherProps}\r\n          initialFormat={formatProps}\r\n          unitsProvider={IModelApp.quantityFormatter.unitsProvider}\r\n          persistenceUnit={persistenceUnit}\r\n          providePrimaryChildren={providePrimaryChildren}\r\n          provideSecondaryChildren={provideSecondaryChildren}\r\n          provideFormatSpec={provideFormatSpec}\r\n        />}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"QuantityFormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/QuantityFormatPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  CustomFormatPropEditorSpec, getQuantityTypeKey, IModelApp, isCheckboxFormatPropEditorSpec, isCustomQuantityTypeDefinition,\r\n  isTextInputFormatPropEditorSpec, isTextSelectFormatPropEditorSpec, QuantityTypeArg,\r\n} from \"@itwin/core-frontend\";\r\nimport { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Checkbox, Input, Select } from \"@itwin/itwinui-react\";\r\nimport { FormatPanel } from \"./FormatPanel\";\r\nimport { DeepCompare } from \"@itwin/core-geometry\";\r\n\r\nfunction createTextInputFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Input data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        size=\"small\"\r\n        onChange={(e) => {\r\n          const newProps = setString(inProps, e.currentTarget.value);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\nfunction createSelectFormatPropEditor(key: string, label: string, options: { label: string, value: string }[], inProps: FormatProps,\r\n  getString: (props: FormatProps) => string, setString: (props: FormatProps, value: string) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const value = getString(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Select data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        value={value}\r\n        options={options}\r\n        size={\"small\"}\r\n        onChange={(newValue) => {\r\n          const newProps = setString(inProps, newValue);\r\n          fireFormatChange(newProps);\r\n        }}\r\n      />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction createCheckboxFormatPropEditor(key: string, label: string, inProps: FormatProps,\r\n  getBool: (props: FormatProps) => boolean, setBool: (props: FormatProps, isChecked: boolean) => FormatProps, fireFormatChange: (newProps: FormatProps) => void) {\r\n  const isChecked = getBool(inProps);\r\n  return (\r\n    <React.Fragment key={`${key}`}>\r\n      <span key={`${key}-label`} className={\"uicore-label\"}>{label}</span>\r\n      <Checkbox data-testid={`${key}-editor`} key={`${key}-editor`}\r\n        checked={isChecked}\r\n        onChange={(e) => {\r\n          const newProps = setBool(inProps, e.target.checked);\r\n          fireFormatChange(newProps);\r\n        }} />\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\r\n  const compare = new DeepCompare();\r\n  return compare.compare(obj1, obj2);\r\n}\r\n\r\n/** Properties of [[QuantityFormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface QuantityFormatPanelProps extends CommonProps {\r\n  quantityType: QuantityTypeArg;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  /** props below are to be passed on to FormatPanel */\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  enableMinimumProperties?: boolean;\r\n}\r\n\r\n/** Component to set properties that control Quantity Formatting.\r\n * @alpha\r\n */\r\nexport function QuantityFormatPanel(props: QuantityFormatPanelProps) {\r\n  const { quantityType, onFormatChange, ...otherProps } = props;\r\n  const [formatProps, setFormatProps] = React.useState<FormatProps>();\r\n  const initialFormatProps = React.useRef<FormatProps>();\r\n\r\n  const [persistenceUnit, setPersistenceUnit] = React.useState<UnitProps>();\r\n\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (!initialFormatProps.current)\r\n      initialFormatProps.current = newFormatProps;\r\n    setFormatProps(newFormatProps);\r\n    const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n    const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n    // istanbul ignore else\r\n    if (quantityTypeDefinition)\r\n      setPersistenceUnit(quantityTypeDefinition.persistenceUnit);\r\n    else\r\n      throw Error(`Unable to locate a quantity type with type ${quantityType}`);\r\n  }, [quantityType]); // no dependencies defined as we want this to run on every render\r\n\r\n  // handle case where quantityType does not change but the formatProps for that quantity type has (ie after a Set or Clear)\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  React.useEffect(() => {\r\n    const newFormatProps = IModelApp.quantityFormatter.getFormatPropsByQuantityType(quantityType);\r\n    // istanbul ignore else\r\n    if (initialFormatProps.current && newFormatProps) {\r\n      if (!formatAreEqual(newFormatProps, initialFormatProps.current)) {\r\n        initialFormatProps.current = newFormatProps;\r\n        setFormatProps(newFormatProps);\r\n      }\r\n    }\r\n  }); // no dependencies defined as we want this to run on every render\r\n\r\n  const handleOnFormatChanged = React.useCallback(async (newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const createCustomPropEditors = React.useCallback((specs: CustomFormatPropEditorSpec[], inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n    return specs.map((spec, index) => {\r\n      if (isCheckboxFormatPropEditorSpec(spec))\r\n        return createCheckboxFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getBool, spec.setBool, fireFormatChange);\r\n      if (isTextSelectFormatPropEditorSpec(spec))\r\n        return createSelectFormatPropEditor(`${spec.editorType}-${index}`, spec.label, spec.selectOptions, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore else */\r\n      if (isTextInputFormatPropEditorSpec(spec))\r\n        return createTextInputFormatPropEditor(`${spec.editorType}-${index}`, spec.label, inProps, spec.getString, spec.setString, fireFormatChange);\r\n      /* istanbul ignore next */\r\n      return <div key={index} />;\r\n    });\r\n  }, []);\r\n\r\n  const providePrimaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.primaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.primaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideSecondaryChildren = React.useCallback(\r\n    (inProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => {\r\n      const quantityTypeKey = getQuantityTypeKey(quantityType);\r\n      const quantityTypeDefinition = IModelApp.quantityFormatter.quantityTypesRegistry.get(quantityTypeKey);\r\n      if (quantityTypeDefinition && isCustomQuantityTypeDefinition(quantityTypeDefinition) &&\r\n        quantityTypeDefinition.isCompatibleFormatProps(inProps)) {\r\n        // istanbul ignore else\r\n        if (quantityTypeDefinition.secondaryPropEditorSpecs)\r\n          return createCustomPropEditors(quantityTypeDefinition.secondaryPropEditorSpecs, inProps, fireFormatChange);\r\n      }\r\n      return null;\r\n    }, [createCustomPropEditors, quantityType]);\r\n\r\n  const provideFormatSpec = React.useCallback(\r\n    async (inProps: FormatProps, _persistenceUnit: UnitProps, _unitsProvider: UnitsProvider) => {\r\n      return IModelApp.quantityFormatter.generateFormatterSpecByType(quantityType, inProps);\r\n    }, [quantityType]);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-quantityPanel\">\r\n      {persistenceUnit && formatProps &&\r\n        <FormatPanel onFormatChange={handleOnFormatChanged} {...otherProps}\r\n          initialFormat={formatProps}\r\n          unitsProvider={IModelApp.quantityFormatter.unitsProvider}\r\n          persistenceUnit={persistenceUnit}\r\n          providePrimaryChildren={providePrimaryChildren}\r\n          provideSecondaryChildren={provideSecondaryChildren}\r\n          provideFormatSpec={provideFormatSpec}\r\n        />}\r\n    </div>\r\n  );\r\n}\r\n"]}

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

@@ -12,10 +12,15 @@
   justify-content: center;
   font-size: 16px;
   outline: none;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border: solid 1px $buic-background-5;
   // background-image: linear-gradient(to bottom, $buic-background-1, $buic-background-2);
-  background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+  background-image: linear-gradient(
+      to bottom,
+      $buic-background-3,
+      $buic-background-3
+    ),
+    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
   color: $buic-foreground-body;
 
   cursor: pointer;
@@ -23,4 +28,4 @@
   &:hover {
     color: $buic-foreground-activehover;
   }
-}
+}

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

@@ -10,11 +10,16 @@ div.components-timeline-thumb.iui-slider-thumb {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+  background-image: linear-gradient(
+      to bottom,
+      $buic-background-3,
+      $buic-background-3
+    ),
+    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
   box-sizing: border-box;
   width: 38px;
   height: 20px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   border: 1px solid $buic-background-5;
   transform: translateX(-19.2px);
   top: 4px;
@@ -64,14 +69,14 @@ div.components-timeline-thumb.iui-slider-thumb {
   position: absolute;
   width: 38px;
   height: 20px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   cursor: pointer;
 
-  >div {
+  > div {
     width: 1px;
     height: 10px;
     opacity: 0.25;
@@ -101,7 +106,7 @@ div.components-timeline-thumb.iui-slider-thumb {
 .date-marker-default {
   height: 12px;
   width: 3px;
-  border-radius: 4px;
+  border-radius: var(--iui-border-radius-1);
   transform: translateY(1px);
   background-color: $buic-foreground-primary;
-}
+}

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

@@ -7,7 +7,7 @@
 $top-position: 6px;
 $bottom-position: 4px;
 
-.solar-slider.solar-timeline>.iui-slider-container {
+.solar-slider.solar-timeline > .iui-slider-container {
   height: 28px;
 }
 
@@ -22,12 +22,12 @@ $bottom-position: 4px;
   color: $buic-foreground-body;
   font-size: 14px;
 
-  >.header {
+  > .header {
     display: flex;
     align-items: center;
     position: relative;
 
-    >.play-button {
+    > .play-button {
       width: 26px;
       height: 26px;
       background: inherit;
@@ -35,7 +35,7 @@ $bottom-position: 4px;
       font-size: 20px;
     }
 
-    >.shadow-settings-button {
+    > .shadow-settings-button {
       display: flex;
       align-items: center;
       color: $buic-foreground-body;
@@ -56,7 +56,7 @@ $bottom-position: 4px;
       }
     }
 
-    >.current-date {
+    > .current-date {
       min-width: 175px;
       margin-left: 8px;
       margin-right: 4px;
@@ -69,32 +69,32 @@ $bottom-position: 4px;
       font-size: 14px;
       cursor: pointer;
 
-      >span:nth-child(2) {
+      > span:nth-child(2) {
         margin: 0 6px;
       }
 
-      >.icon-calendar {
+      > .icon-calendar {
         flex-grow: 1;
         margin-left: auto;
       }
     }
 
-    >.speed-container {
+    > .speed-container {
       display: flex;
       align-items: center;
       margin-left: auto;
       cursor: pointer;
 
-      >.speed {
+      > .speed {
         margin-left: 12px;
         width: 0;
         opacity: 0;
-        transition: all .2s linear;
+        transition: all 0.2s linear;
         margin-right: 10px;
       }
     }
 
-    >.loop-playback {
+    > .loop-playback {
       color: $buic-foreground-primary;
       font-size: 16px;
       cursor: pointer;
@@ -108,7 +108,7 @@ $bottom-position: 4px;
       }
     }
 
-    >.no-loop-playback {
+    > .no-loop-playback {
       color: $buic-foreground-body;
       font-size: 16px;
       cursor: pointer;
@@ -172,9 +172,14 @@ $bottom-position: 4px;
       z-index: 4;
       width: 38px;
       height: 20px;
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       border: 1px solid $buic-background-5;
-      background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+      background-image: linear-gradient(
+          to bottom,
+          $buic-background-3,
+          $buic-background-3
+        ),
+        linear-gradient(to bottom, $buic-background-1, $buic-background-1);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -182,7 +187,7 @@ $bottom-position: 4px;
       transform: translate(-50%, -50%);
       cursor: pointer;
 
-      >div {
+      > div {
         width: 1px;
         height: 10px;
         opacity: 0.25;
@@ -220,11 +225,10 @@ $bottom-position: 4px;
       color: #ffcf00;
       margin: 0 24px 0 8px;
     }
-
   }
 }
 
-.solar-timeline-wrapper>.header>.speed-container:hover>.speed {
+.solar-timeline-wrapper > .header > .speed-container:hover > .speed {
   opacity: 1;
   width: 80px;
 }
@@ -233,7 +237,7 @@ $bottom-position: 4px;
   transform: rotate(180deg);
 }
 
-.solar-timeline-wrapper.expanded>.header>.current-date {
+.solar-timeline-wrapper.expanded > .header > .current-date {
   margin-left: 70px;
 }
 
@@ -250,8 +254,6 @@ $bottom-position: 4px;
   height: 100px;
 }
 
-
-
 .shadow-settings-color-top {
   display: inline;
 }
@@ -352,7 +354,3 @@ $bottom-position: 4px;
     border-color: #222 transparent transparent transparent;
   }
 }
-
-.core-tooltip-tooltip.components-rail-tooltip {
-  pointer-events: none;
-}

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

@@ -14,27 +14,27 @@
   padding: 8px 16px;
   min-width: 275px;
 
-  >.header {
+  > .header {
     display: flex;
     align-items: center;
     height: 38px;
     position: relative;
 
-    >.play-backward {
-      border-radius: 3px 0 0 3px;
+    > .play-backward {
+      border-radius: var(--iui-border-radius-1) 0 0 var(--iui-border-radius-1);
     }
 
-    >.play-button-step {
+    > .play-button-step {
       border-left: none;
       border-right: none;
       border-radius: 0;
     }
 
-    >.play-forward {
-      border-radius: 0px 3px 3px 0;
+    > .play-forward {
+      border-radius: 0px var(--iui-border-radius-1) var(--iui-border-radius-1) 0;
     }
 
-    >.current-date {
+    > .current-date {
       font-size: 14px;
       min-width: 180px;
       padding: 8px;
@@ -42,7 +42,7 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      border-radius: 3px;
+      border-radius: var(--iui-border-radius-1);
       border: solid 1px $buic-background-5;
       background-color: $buic-background-1;
       text-align: center;
@@ -57,11 +57,11 @@
     margin-right: 10px;
   }
 
-  >.timeline-timeline {
+  > .timeline-timeline {
     margin: 8px 0;
   }
 
-  >.scrubber {
+  > .scrubber {
     min-height: 20px;
     display: flex;
     align-items: center;
@@ -128,11 +128,11 @@
 }
 
 .timeline-component.has-dates .start-time-container {
-  margin-right: 8px
+  margin-right: 8px;
 }
 
 .timeline-component.has-dates .end-time-container {
-  margin-left: 8px
+  margin-left: 8px;
 }
 
 .timeline-component.minimized .header,
@@ -147,11 +147,11 @@
 }
 
 .separator {
-  padding: .5em 0;
+  padding: 0.5em 0;
   position: relative;
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     left: 4px;
@@ -161,4 +161,4 @@
     background: #dce0e3;
     transform: translateY(-50%);
   }
-}
+}

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

@@ -15,7 +15,7 @@ export interface MilestoneRange {
 /**
  * A Milestone event that is to be noted in the timeline.
  * @internal
- * @deprecated in 3.0.
+ * @deprecated
  */
 export interface Milestone {
     /** uniqueId of milestone */

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/interfaces.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAsCH;;GAEG;AACH,MAAM,CAAN,IAAY,aAWX;AAXD,WAAY,aAAa;IACvB,iBAAiB;IACjB,mDAAK,CAAA;IACL,oBAAoB;IACpB,yDAAQ,CAAA;IACR,kBAAkB;IAClB,qDAAM,CAAA;IACN,gBAAgB;IAChB,iDAAI,CAAA;IACJ,iBAAiB;IACjB,mDAAK,CAAA;AACP,CAAC,EAXW,aAAa,KAAb,aAAa,QAWxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,qDAAqD;IACrD,yEAAU,CAAA;IACV,sEAAsE;IACtE,2EAAW,CAAA;AACb,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B;AAoCD;;GAEG;AACH,MAAM,CAAN,IAAY,uBAIX;AAJD,WAAY,uBAAuB;IACjC,yEAAM,CAAA;IACN,uEAAK,CAAA;IACL,qEAAI,CAAA;AACN,CAAC,EAJW,uBAAuB,KAAvB,uBAAuB,QAIlC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n */\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { GenericUiEventArgs } from \"@itwin/appui-abstract\";\r\n\r\n/**\r\n * A range of time which can be used to focus in on activities scheduled around a milestone.\r\n * @public\r\n */\r\nexport interface MilestoneRange {\r\n  start: Date;\r\n  end: Date;\r\n}\r\n\r\n/**\r\n * A Milestone event that is to be noted in the timeline.\r\n * @internal\r\n * @deprecated in 3.0.\r\n */\r\nexport interface Milestone {\r\n  /** uniqueId of milestone */\r\n  id: string;\r\n  /** milestone date */\r\n  date: Date;\r\n  parentId?: string;\r\n  /** Milestone label that is display if space allows */\r\n  label?: string;\r\n  /** Milestone description that is show as tooltip */\r\n  description?: string;\r\n  /** animation range that includes milestone */\r\n  range?: MilestoneRange;\r\n  /** Set to true if read only. */\r\n  readonly?: boolean;\r\n  // eslint-disable-next-line deprecation/deprecation\r\n  children?: Milestone[];\r\n}\r\n\r\n/** The timeline scale.\r\n * @public\r\n */\r\nexport enum TimelineScale {\r\n  /** Show years */\r\n  Years,\r\n  /** Show quarters */\r\n  Quarters,\r\n  /** Show months */\r\n  Months,\r\n  /** Show days */\r\n  Days,\r\n  /** Show hours */\r\n  Hours,\r\n}\r\n\r\n/** Determines if data displayed to use is the actual date or the amount of time elapsed since project start.\r\n * @public\r\n */\r\nexport enum TimelineDateDisplay {\r\n  /** Display time axis using actual start/end dates */\r\n  ActualTime,\r\n  /** Display time axis using time relative to actual start/end dates */\r\n  ProjectTime,\r\n}\r\n\r\n/**\r\n * Playback Settings.\r\n * @public\r\n */\r\nexport interface PlaybackSettings {\r\n  /** time in milliseconds to play animation from start date to end date */\r\n  duration?: number;\r\n  /** Set to True if animation to restart each time playbackEnd is reached. Defaults to false. */\r\n  loop?: boolean;\r\n  /** If true a minimal set of data is displayed. */\r\n  minimized?: boolean;\r\n  /** Playback start. If defined must be within start-end range. If not define 'start' is used. */\r\n  playbackStart?: Date;\r\n  /** Playback end. If defined must be within start-end range and later than playbackStart. If not define 'end' is used. */\r\n  playbackEnd?: Date;\r\n  /** Set to True if user should be allowed to insert milestone dates. Defaults to false */\r\n  allowMilestoneEdits?: boolean;\r\n  /** Define if actual date/times are used or date/times relative to project are used to draw timeline axis. */\r\n  dateDisplay?: TimelineDateDisplay;\r\n}\r\n\r\n/**\r\n * An interface used to notify Handlers of the current pointer position in the timeline playback. Valid range is 0 to 1 and it determines percentage complete.\r\n * @public\r\n */\r\nexport type AnimationFractionChangeHandler = (animationFraction: number) => void;\r\n\r\n/**\r\n * An interface used to notify Handlers of Playback Settings changes.\r\n * Contains the settings to be used.\r\n * @public\r\n */\r\nexport type PlaybackSettingsChangeHandler = (settingsChange: PlaybackSettings) => void;\r\n\r\n/** Actions for Pause/Play event\r\n * @public\r\n */\r\nexport enum TimelinePausePlayAction {\r\n  Toggle,\r\n  Pause,\r\n  Play,\r\n}\r\n/** Args for event to pause or play the timeline component\r\n * @public\r\n */\r\nexport interface TimelinePausePlayArgs extends GenericUiEventArgs {\r\n  timelineAction: TimelinePausePlayAction;\r\n}\r\n/** Interface for a timeline data provider class\r\n * @public\r\n */\r\nexport interface TimelineDataProvider {\r\n  /** uniqueId of provider */\r\n  id: string;\r\n  /** view id when viewport is initially assigned */\r\n  viewId: string;\r\n  /** returns true if the provider has timeline animation data available */\r\n  supportsTimelineAnimation: boolean;\r\n  /** Starting date for entire timeline */\r\n  start?: Date;\r\n  /** End date for entire timeline */\r\n  end?: Date;\r\n  /** Current animation fraction from 0.0 to 1.0 */\r\n  animationFraction?: number;\r\n  getSettings(): PlaybackSettings;\r\n  /** Called to get the initial scrubber location. This must be a value between 0 and the duration in PlaybackSettings. */\r\n  initialDuration: number;\r\n  /** Called to get the duration of the Playback. */\r\n  duration: number;\r\n  /** If true the playback will continuously loop. */\r\n  loop: boolean;\r\n  /** Called to save the playback settings */\r\n  updateSettings(settings: PlaybackSettings): void;\r\n  /** Async call to load milestone and settings data */\r\n  loadTimelineData(): Promise<boolean>;\r\n  /** Called when an internal process has defined the playback settings and the UI needs to be updated */\r\n  onPlaybackSettingChanged?: PlaybackSettingsChangeHandler;\r\n  /** Called when the an internal process has defined the playback settings and the UI needs to be updated */\r\n  onAnimationFractionChanged?: AnimationFractionChangeHandler;\r\n  /** viewport to show animation */\r\n  viewport?: ScreenViewport;\r\n}\r\n\r\n/**\r\n * An interface used to notify Handlers of Playback progress.\r\n * Contains the settings to be used.\r\n * @alpha\r\n */\r\nexport type SolarPlaybackProgressHandler = (time: Date) => void;\r\n\r\n/** Data Provider interface for getting and setting solar position\r\n * @alpha\r\n */\r\nexport interface SolarDataProvider {\r\n  // View Id used to determine sunrise and sunset\r\n  viewId: string;\r\n  /** returns true if the provider has timeline animation data available */\r\n  supportsTimelineAnimation: boolean;\r\n  // set to true is timeline should be shown - return false if view is not set to display shadow.\r\n  readonly shouldShowTimeline: boolean;\r\n  /** Starting date for entire timeline */\r\n  day: Date;\r\n  /** Starting time for day in milliseconds */\r\n  readonly dayStartMs: number;\r\n  /** Time of day for sun */\r\n  readonly timeOfDay: Date;\r\n  /** Called during playback to update animation */\r\n  onTimeChanged?: SolarPlaybackProgressHandler;\r\n  /** viewport to show animation */\r\n  viewport?: ScreenViewport;\r\n  /** Time of Sunrise to nearest minute */\r\n  readonly sunrise: Date;\r\n  /** time of Sunrise to nearest minute */\r\n  readonly sunset: Date;\r\n  /** shadow color */\r\n  shadowColor: ColorDef;\r\n  /** timezone offset for local project time */\r\n  readonly timeZoneOffset: number;\r\n  /** set date for shadow study. If isProjectDate is false the is assume to be in users\r\n   * current time and the value is adjusted to be the same date and time at the project location. */\r\n  setDateAndTime: (day: Date, isProjectDate?: boolean) => void;\r\n}\r\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/interfaces.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAsCH;;GAEG;AACH,MAAM,CAAN,IAAY,aAWX;AAXD,WAAY,aAAa;IACvB,iBAAiB;IACjB,mDAAK,CAAA;IACL,oBAAoB;IACpB,yDAAQ,CAAA;IACR,kBAAkB;IAClB,qDAAM,CAAA;IACN,gBAAgB;IAChB,iDAAI,CAAA;IACJ,iBAAiB;IACjB,mDAAK,CAAA;AACP,CAAC,EAXW,aAAa,KAAb,aAAa,QAWxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,mBAKX;AALD,WAAY,mBAAmB;IAC7B,qDAAqD;IACrD,yEAAU,CAAA;IACV,sEAAsE;IACtE,2EAAW,CAAA;AACb,CAAC,EALW,mBAAmB,KAAnB,mBAAmB,QAK9B;AAoCD;;GAEG;AACH,MAAM,CAAN,IAAY,uBAIX;AAJD,WAAY,uBAAuB;IACjC,yEAAM,CAAA;IACN,uEAAK,CAAA;IACL,qEAAI,CAAA;AACN,CAAC,EAJW,uBAAuB,KAAvB,uBAAuB,QAIlC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Timeline\r\n */\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { GenericUiEventArgs } from \"@itwin/appui-abstract\";\r\n\r\n/**\r\n * A range of time which can be used to focus in on activities scheduled around a milestone.\r\n * @public\r\n */\r\nexport interface MilestoneRange {\r\n  start: Date;\r\n  end: Date;\r\n}\r\n\r\n/**\r\n * A Milestone event that is to be noted in the timeline.\r\n * @internal\r\n * @deprecated\r\n */\r\nexport interface Milestone {\r\n  /** uniqueId of milestone */\r\n  id: string;\r\n  /** milestone date */\r\n  date: Date;\r\n  parentId?: string;\r\n  /** Milestone label that is display if space allows */\r\n  label?: string;\r\n  /** Milestone description that is show as tooltip */\r\n  description?: string;\r\n  /** animation range that includes milestone */\r\n  range?: MilestoneRange;\r\n  /** Set to true if read only. */\r\n  readonly?: boolean;\r\n  // eslint-disable-next-line deprecation/deprecation\r\n  children?: Milestone[];\r\n}\r\n\r\n/** The timeline scale.\r\n * @public\r\n */\r\nexport enum TimelineScale {\r\n  /** Show years */\r\n  Years,\r\n  /** Show quarters */\r\n  Quarters,\r\n  /** Show months */\r\n  Months,\r\n  /** Show days */\r\n  Days,\r\n  /** Show hours */\r\n  Hours,\r\n}\r\n\r\n/** Determines if data displayed to use is the actual date or the amount of time elapsed since project start.\r\n * @public\r\n */\r\nexport enum TimelineDateDisplay {\r\n  /** Display time axis using actual start/end dates */\r\n  ActualTime,\r\n  /** Display time axis using time relative to actual start/end dates */\r\n  ProjectTime,\r\n}\r\n\r\n/**\r\n * Playback Settings.\r\n * @public\r\n */\r\nexport interface PlaybackSettings {\r\n  /** time in milliseconds to play animation from start date to end date */\r\n  duration?: number;\r\n  /** Set to True if animation to restart each time playbackEnd is reached. Defaults to false. */\r\n  loop?: boolean;\r\n  /** If true a minimal set of data is displayed. */\r\n  minimized?: boolean;\r\n  /** Playback start. If defined must be within start-end range. If not define 'start' is used. */\r\n  playbackStart?: Date;\r\n  /** Playback end. If defined must be within start-end range and later than playbackStart. If not define 'end' is used. */\r\n  playbackEnd?: Date;\r\n  /** Set to True if user should be allowed to insert milestone dates. Defaults to false */\r\n  allowMilestoneEdits?: boolean;\r\n  /** Define if actual date/times are used or date/times relative to project are used to draw timeline axis. */\r\n  dateDisplay?: TimelineDateDisplay;\r\n}\r\n\r\n/**\r\n * An interface used to notify Handlers of the current pointer position in the timeline playback. Valid range is 0 to 1 and it determines percentage complete.\r\n * @public\r\n */\r\nexport type AnimationFractionChangeHandler = (animationFraction: number) => void;\r\n\r\n/**\r\n * An interface used to notify Handlers of Playback Settings changes.\r\n * Contains the settings to be used.\r\n * @public\r\n */\r\nexport type PlaybackSettingsChangeHandler = (settingsChange: PlaybackSettings) => void;\r\n\r\n/** Actions for Pause/Play event\r\n * @public\r\n */\r\nexport enum TimelinePausePlayAction {\r\n  Toggle,\r\n  Pause,\r\n  Play,\r\n}\r\n/** Args for event to pause or play the timeline component\r\n * @public\r\n */\r\nexport interface TimelinePausePlayArgs extends GenericUiEventArgs {\r\n  timelineAction: TimelinePausePlayAction;\r\n}\r\n/** Interface for a timeline data provider class\r\n * @public\r\n */\r\nexport interface TimelineDataProvider {\r\n  /** uniqueId of provider */\r\n  id: string;\r\n  /** view id when viewport is initially assigned */\r\n  viewId: string;\r\n  /** returns true if the provider has timeline animation data available */\r\n  supportsTimelineAnimation: boolean;\r\n  /** Starting date for entire timeline */\r\n  start?: Date;\r\n  /** End date for entire timeline */\r\n  end?: Date;\r\n  /** Current animation fraction from 0.0 to 1.0 */\r\n  animationFraction?: number;\r\n  getSettings(): PlaybackSettings;\r\n  /** Called to get the initial scrubber location. This must be a value between 0 and the duration in PlaybackSettings. */\r\n  initialDuration: number;\r\n  /** Called to get the duration of the Playback. */\r\n  duration: number;\r\n  /** If true the playback will continuously loop. */\r\n  loop: boolean;\r\n  /** Called to save the playback settings */\r\n  updateSettings(settings: PlaybackSettings): void;\r\n  /** Async call to load milestone and settings data */\r\n  loadTimelineData(): Promise<boolean>;\r\n  /** Called when an internal process has defined the playback settings and the UI needs to be updated */\r\n  onPlaybackSettingChanged?: PlaybackSettingsChangeHandler;\r\n  /** Called when the an internal process has defined the playback settings and the UI needs to be updated */\r\n  onAnimationFractionChanged?: AnimationFractionChangeHandler;\r\n  /** viewport to show animation */\r\n  viewport?: ScreenViewport;\r\n}\r\n\r\n/**\r\n * An interface used to notify Handlers of Playback progress.\r\n * Contains the settings to be used.\r\n * @alpha\r\n */\r\nexport type SolarPlaybackProgressHandler = (time: Date) => void;\r\n\r\n/** Data Provider interface for getting and setting solar position\r\n * @alpha\r\n */\r\nexport interface SolarDataProvider {\r\n  // View Id used to determine sunrise and sunset\r\n  viewId: string;\r\n  /** returns true if the provider has timeline animation data available */\r\n  supportsTimelineAnimation: boolean;\r\n  // set to true is timeline should be shown - return false if view is not set to display shadow.\r\n  readonly shouldShowTimeline: boolean;\r\n  /** Starting date for entire timeline */\r\n  day: Date;\r\n  /** Starting time for day in milliseconds */\r\n  readonly dayStartMs: number;\r\n  /** Time of day for sun */\r\n  readonly timeOfDay: Date;\r\n  /** Called during playback to update animation */\r\n  onTimeChanged?: SolarPlaybackProgressHandler;\r\n  /** viewport to show animation */\r\n  viewport?: ScreenViewport;\r\n  /** Time of Sunrise to nearest minute */\r\n  readonly sunrise: Date;\r\n  /** time of Sunrise to nearest minute */\r\n  readonly sunset: Date;\r\n  /** shadow color */\r\n  shadowColor: ColorDef;\r\n  /** timezone offset for local project time */\r\n  readonly timeZoneOffset: number;\r\n  /** set date for shadow study. If isProjectDate is false the is assume to be in users\r\n   * current time and the value is adjusted to be the same date and time at the project location. */\r\n  setDateAndTime: (day: Date, isProjectDate?: boolean) => void;\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/imodel-components-react",
-  "version": "4.0.0-dev.8",
+  "version": "4.0.0-dev.9",
   "description": "iTwin.js UI IModel Components",
   "main": "lib/cjs/imodel-components-react.js",
   "module": "lib/esm/imodel-components-react.js",
@@ -8,7 +8,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/iTwin/itwinjs-core/tree/master/ui/imodel-components-react"
+    "url": "https://github.com/iTwin/appui/tree/master/ui/imodel-components-react"
   },
   "keywords": [
     "Bentley",
@@ -20,14 +20,14 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^4.0.0-dev.8",
-    "@itwin/components-react": "^4.0.0-dev.8",
-    "@itwin/core-bentley": "^4.0.0-dev.8",
-    "@itwin/core-common": "^4.0.0-dev.8",
-    "@itwin/core-frontend": "^4.0.0-dev.8",
-    "@itwin/core-geometry": "^4.0.0-dev.8",
-    "@itwin/core-quantity": "^4.0.0-dev.8",
-    "@itwin/core-react": "^4.0.0-dev.8",
+    "@itwin/appui-abstract": "^4.0.0-dev.9",
+    "@itwin/components-react": "^4.0.0-dev.9",
+    "@itwin/core-bentley": "^3.5.1",
+    "@itwin/core-common": "^3.5.1",
+    "@itwin/core-frontend": "^3.5.1",
+    "@itwin/core-geometry": "^3.5.1",
+    "@itwin/core-quantity": "^3.5.1",
+    "@itwin/core-react": "^4.0.0-dev.9",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
@@ -36,28 +36,27 @@
     "NOTE: All tools used by scripts in this package must be listed as devDependencies"
   ],
   "devDependencies": {
-    "@itwin/appui-abstract": "4.0.0-dev.8",
-    "@itwin/build-tools": "4.0.0-dev.8",
-    "@itwin/components-react": "4.0.0-dev.8",
-    "@itwin/core-bentley": "4.0.0-dev.8",
-    "@itwin/core-common": "4.0.0-dev.8",
-    "@itwin/core-frontend": "4.0.0-dev.8",
-    "@itwin/core-geometry": "4.0.0-dev.8",
-    "@itwin/core-quantity": "4.0.0-dev.8",
-    "@itwin/core-react": "4.0.0-dev.8",
-    "@itwin/eslint-plugin": "4.0.0-dev.8",
+    "@itwin/appui-abstract": "4.0.0-dev.9",
+    "@itwin/build-tools": "^3.5.1",
+    "@itwin/components-react": "4.0.0-dev.9",
+    "@itwin/core-bentley": "^3.5.1",
+    "@itwin/core-common": "^3.5.1",
+    "@itwin/core-frontend": "^3.5.1",
+    "@itwin/core-geometry": "^3.5.1",
+    "@itwin/core-orbitgt": "^3.5.1",
+    "@itwin/core-quantity": "^3.5.1",
+    "@itwin/core-react": "4.0.0-dev.9",
+    "@itwin/eslint-plugin": "^3.5.1",
+    "@itwin/webgl-compatibility": "^3.5.1",
     "@testing-library/dom": "^8.11.2",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.2",
     "@types/chai": "4.3.1",
     "@types/chai-as-promised": "^7",
-    "@types/chai-jest-snapshot": "^1.3.0",
     "@types/chai-spies": "^1.0.0",
     "@types/chai-string": "^1.4.1",
-    "@types/enzyme": "3.9.3",
     "@types/faker": "^4.1.0",
-    "@types/lodash": "^4.14.0",
     "@types/mocha": "^8.2.2",
     "@types/node": "18.11.5",
     "@types/react": "^17.0.37",
@@ -66,13 +65,9 @@
     "@types/sinon-chai": "^3.2.0",
     "chai": "^4.1.2",
     "chai-as-promised": "^7",
-    "chai-jest-snapshot": "^2.0.0",
     "chai-spies": "1.0.0",
     "chai-string": "^1.5.0",
     "cpx2": "^3.0.0",
-    "enzyme": "3.10.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "enzyme-to-json": "^3.3.4",
     "eslint": "^7.11.0",
     "faker": "^4.1.0",
     "ignore-styles": "^5.0.1",
@@ -99,13 +94,10 @@
   "dependencies": {
     "@bentley/icons-generic-webfont": "^1.0.15",
     "@itwin/itwinui-css": "0.x",
-    "@itwin/itwinui-react": "~1.46.0",
-    "callable-instance2": "1.0.0",
-    "classnames": "^2.3.1",
-    "eventemitter2": "^5.0.1",
-    "immer": "9.0.6",
-    "immutable": "^3.8.2",
-    "ts-key-enum": "^2.0.0"
+    "@itwin/itwinui-variables": "^1.0.0",
+    "@itwin/itwinui-react": "~1.42.0",
+    "classnames": "2.3.1",
+    "immer": "9.0.6"
   },
   "nyc": {
     "extends": "./node_modules/@itwin/build-tools/.nycrc",
@@ -131,8 +123,7 @@
     ]
   },
   "scripts": {
-    "build": "npm run -s copy:locale && npm run -s build:cjs",
-    "build:ci": "npm run -s build && npm run -s build:esm",
+    "build": "npm run -s copy:locale && npm run -s build:cjs && npm run -s build:esm",
     "build:cjs": "tsc 1>&2 --outDir lib/cjs && npm run -s copy:cjs",
     "build:esm": "tsc 1>&2 --module ES2020 --outDir lib/esm && npm run -s copy:esm",
     "copy:locale": "cpx \"./public/**/*\" ./lib/public",
@@ -141,11 +132,13 @@
     "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./public/locales/en-PSEUDO",
     "clean": "rimraf lib .rush/temp/package-deps*.json",
     "cover": "nyc npm -s test",
-    "docs": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/ui/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson",
     "lint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
     "extract-api": "betools extract-api --entry=imodel-components-react",
     "test": "mocha --config ../.mocharc.json \"./lib/cjs/test/**/*.test.js\"",
-    "test:watch": "npm -s test -- --reporter min --watch-extensions ts,tsx --watch"
+    "test:watch": "npm -s test -- --reporter min --watch-extensions ts,tsx --watch",
+    "docs": "npm run -s docs:reference && npm run -s docs:changelog",
+    "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/ui/imodel-components-react",
+    "docs:reference": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/ui/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson"
   },
   "readme": "# @itwin/imodel-components-react\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.\r\n\r\n## Description\r\n\r\nThe __@itwin/imodel-components-react__ package contains React components that depend on the imodeljs-frontend, imodeljs-common or imodeljs-quantity packages.\r\n\r\n## Documentation\r\n\r\nSee the [iTwin.js](https://www.itwinjs.org) documentation for more information.\r\n"
 }