@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.21

package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeedTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,wDAA8C;AAU9C;;GAEG;AACH,gEAAgE;AAChE,SAAgB,aAAa,CAAC,KAAiB;IAC7C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3D,oBAAC,sBAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACrB,gBAAgB,EAAC,MAAM,EACvB,YAAY,EAAE,YAAY,GAAI,CAC5B,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC","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 Timeline\n */\n\nimport \"./SpeedTimeline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n// component is in alpha state - it may change after usability testing - test coverage not complete\n\ninterface SpeedProps extends CommonProps {\n  speed: number;\n  onChange?: (value: number) => void;\n}\n\n/** Speed Timeline used in Solar Timeline component\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SpeedTimeline(props: SpeedProps) {\n  // istanbul ignore next - WIP\n  const onChange = (values: ReadonlyArray<number>) => {\n    const value = values[0];\n    if (props.onChange && (value >= 1 && value <= 6))\n      props.onChange(value);\n  };\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  return (\n    <div className={classnames(\"speed-timeline\", props.className)}>\n      <Slider\n        step={1}\n        min={1}\n        max={6}\n        minLabel=\"\"\n        maxLabel=\"\"\n        onUpdate={onChange}\n        onChange={onChange}\n        values={[props.speed]}\n        trackDisplayMode=\"none\"\n        tooltipProps={tooltipProps} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SpeedTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,gCAA8B;AAC9B,4DAAoC;AACpC,6CAA+B;AAC/B,wDAA8C;AAU9C;;GAEG;AACH,gEAAgE;AAChE,SAAgB,aAAa,CAAC,KAAiB;IAC7C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3D,oBAAC,sBAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACrB,gBAAgB,EAAC,MAAM,EACvB,YAAY,EAAE,YAAY,GAAI,CAC5B,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC","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 \"./SpeedTimeline.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n// component is in alpha state - it may change after usability testing - test coverage not complete\r\n\r\ninterface SpeedProps extends CommonProps {\r\n  speed: number;\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\n/** Speed Timeline used in Solar Timeline component\r\n * @internal\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function SpeedTimeline(props: SpeedProps) {\r\n  // istanbul ignore next - WIP\r\n  const onChange = (values: ReadonlyArray<number>) => {\r\n    const value = values[0];\r\n    if (props.onChange && (value >= 1 && value <= 6))\r\n      props.onChange(value);\r\n  };\r\n\r\n  const tooltipProps = React.useCallback(() => {\r\n    return { visible: false };\r\n  }, []);\r\n\r\n  return (\r\n    <div className={classnames(\"speed-timeline\", props.className)}>\r\n      <Slider\r\n        step={1}\r\n        min={1}\r\n        max={6}\r\n        minLabel=\"\"\r\n        maxLabel=\"\"\r\n        onUpdate={onChange}\r\n        onChange={onChange}\r\n        values={[props.speed]}\r\n        trackDisplayMode=\"none\"\r\n        tooltipProps={tooltipProps} />\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.scss

@@ -1,40 +1,40 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.speed-timeline {
-  position: relative;
-  height: 25px;
-
-  .railOuter {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  .railInner {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 2px;
-    pointer-events: none;
-    background: $buic-background-5;
-  }
-
-  .scrubberHandle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 4;
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-    border: none;
-    border-radius: 50%;
-    background: $buic-foreground-primary;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.speed-timeline {
+  position: relative;
+  height: 25px;
+
+  .railOuter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .railInner {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 2px;
+    pointer-events: none;
+    background: $buic-background-5;
+  }
+
+  .scrubberHandle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+  }
 }

package/lib/cjs/imodel-components-react/timeline/Timeline.scss

@@ -1,165 +1,165 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.timeline {
-    position: relative;
-    height: 110px;
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
-    box-sizing: border-box;
-}
-
-.rail {
-    position: absolute;
-    width: 100%;
-    height: 40px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 3;
-}
-
-.rail-center {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 4px;
-    cursor: pointer;
-    pointer-events: none;
-    background: $buic-background-5;
-}
-
-.tooltip-rail {
-    position: absolute;
-    margin-left: -11px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.needle {
-    position: absolute;
-    top: 0;
-    transform: translateX(-50%);
-    z-index: 4;
-    width: 2px;
-    height: 100%;
-    background: $buic-foreground-primary;
-    cursor: pointer;
-}
-
-.handle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 4;
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-    border: none;
-    border-radius: 50%;
-    background: $buic-foreground-primary;
-    border: 2px solid $buic-background-1;
-
-    >span {
-        position: absolute;
-        left: 50%;
-        bottom: -25px;
-        font-size: 14px;
-        white-space: nowrap;
-        transform: translateX(-50%);
-        color: rgba(black, .85);
-    }
-
-    input {
-        position: absolute;
-        border: none;
-        margin-top: 10px;
-        top: 1.2rem;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-    }
-
-    input:focus {
-        cursor: text;
-        left: -.25rem;
-        top: calc(1.2rem - .25rem);
-        width: 140px;
-        padding: .25rem;
-        border: 1px solid #ddd;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
-        box-sizing: border-box;
-        outline: none;
-    }
-}
-
-.tick-line {
-    position: absolute;
-    width: 2px;
-    height: 11px;
-    transform: translateX(-50%);
-    background: $buic-background-5;
-}
-
-.tick-label {
-    position: absolute;
-    margin-top: 9px;
-    font-size: 14px;
-    color: rgba(black, .85);
-    white-space: nowrap;
-}
-
-.tick-label.start {
-    left: -50px;
-}
-
-.tick-label.end {
-    right: -50px;
-    text-align: right;
-}
-
-.tick-label.tick {
-    margin-left: 11px;
-    text-align: left;
-}
-
-.tooltip {
-    position: absolute;
-    top: -20px;
-    display: inline-block;
-    border-bottom: 1px dotted #222;
-    margin-left: 22px;
-    font-size: 14px;
-
-    .tooltip-text {
-        width: 100px;
-        background-color: #222;
-        color: #fff;
-        // opacity: 0.8;
-        text-align: center;
-        border-radius: 6px;
-        padding: 8px 0;
-        position: absolute;
-        z-index: 1;
-        bottom: 150%;
-        left: 50%;
-        margin-left: -60px;
-
-        &:after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: #222 transparent transparent transparent;
-        }
-    }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.timeline {
+    position: relative;
+    height: 110px;
+    background: $buic-background-1;
+    border: 1px solid $buic-background-5;
+    box-sizing: border-box;
+}
+
+.rail {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 3;
+}
+
+.rail-center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    cursor: pointer;
+    pointer-events: none;
+    background: $buic-background-5;
+}
+
+.tooltip-rail {
+    position: absolute;
+    margin-left: -11px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.needle {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    z-index: 4;
+    width: 2px;
+    height: 100%;
+    background: $buic-foreground-primary;
+    cursor: pointer;
+}
+
+.handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+    border: 2px solid $buic-background-1;
+
+    >span {
+        position: absolute;
+        left: 50%;
+        bottom: -25px;
+        font-size: 14px;
+        white-space: nowrap;
+        transform: translateX(-50%);
+        color: rgba(black, .85);
+    }
+
+    input {
+        position: absolute;
+        border: none;
+        margin-top: 10px;
+        top: 1.2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+
+    input:focus {
+        cursor: text;
+        left: -.25rem;
+        top: calc(1.2rem - .25rem);
+        width: 140px;
+        padding: .25rem;
+        border: 1px solid #ddd;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
+        box-sizing: border-box;
+        outline: none;
+    }
+}
+
+.tick-line {
+    position: absolute;
+    width: 2px;
+    height: 11px;
+    transform: translateX(-50%);
+    background: $buic-background-5;
+}
+
+.tick-label {
+    position: absolute;
+    margin-top: 9px;
+    font-size: 14px;
+    color: rgba(black, .85);
+    white-space: nowrap;
+}
+
+.tick-label.start {
+    left: -50px;
+}
+
+.tick-label.end {
+    right: -50px;
+    text-align: right;
+}
+
+.tick-label.tick {
+    margin-left: 11px;
+    text-align: left;
+}
+
+.tooltip {
+    position: absolute;
+    top: -20px;
+    display: inline-block;
+    border-bottom: 1px dotted #222;
+    margin-left: 22px;
+    font-size: 14px;
+
+    .tooltip-text {
+        width: 100px;
+        background-color: #222;
+        color: #fff;
+        // opacity: 0.8;
+        text-align: center;
+        border-radius: 6px;
+        padding: 8px 0;
+        position: absolute;
+        z-index: 1;
+        bottom: 150%;
+        left: 50%;
+        margin-left: -60px;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #222 transparent transparent transparent;
+        }
+    }
 }

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts

@@ -1,10 +1,7 @@
-/** @packageDocumentation
- * @module Timeline
- */
-import "./TimelineComponent.scss";
-import * as React from "react";
 import { DateFormatOptions } from "@itwin/components-react";
+import * as React from "react";
 import { PlaybackSettings } from "./interfaces";
+import "./TimelineComponent.scss";
 /**
  * [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu
  * "replace" : use the app-supplied items in place of the standard items
@@ -13,7 +10,7 @@ import { PlaybackSettings } from "./interfaces";
  *
  * @public
  */
-export declare type TimelineMenuItemOption = "replace" | "append" | "prefix";
+export type TimelineMenuItemOption = "replace" | "append" | "prefix";
 /**
  * [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu
  * @public

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineComponent.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimelineComponent.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,yBAAyB,CAAC;AAKtG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,gBAAgB,EAAkD,MAAM,cAAc,CAAC;AAIhG,OAAO,0BAA0B,CAAC;AAOlC;;;;;;;GAOG;AACH,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrE;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AACD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6GAA6G;IAC7G,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AACD;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wEAAwE;IACxE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,gEAAgE;IAChE,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mEAAmE;IACnE,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,gHAAgH;IAChH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,oHAAoH;IACpH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AACD,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,8DAA8D;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,MAAM,EAAE,OAAO,CAAC;IAChB,sEAAsE;IACtE,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IACpG,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAC,CAAa;IACrC,OAAO,CAAC,0BAA0B,CAIhC;gBAEU,KAAK,EAAE,sBAAsB;IAmBzB,oBAAoB;IAOpB,qBAAqB,CAAC,SAAS,EAAE,sBAAsB,EAAE,SAAS,EAAE,sBAAsB;IAe1F,kBAAkB,CAAC,SAAS,EAAE,sBAAsB;IAgBpE,OAAO,CAAC,6BAA6B,CAyBnC;IAGF,OAAO,CAAC,WAAW,CAIjB;IAGF,OAAO,CAAC,UAAU,CAIhB;IAGF,OAAO,CAAC,OAAO,CAcb;IAGF,OAAO,CAAC,QAAQ,CAcd;IAGF,OAAO,CAAC,iBAAiB,CAGvB;IAGF,OAAO,CAAC,YAAY,CAYlB;IAGF,OAAO,CAAC,gBAAgB,CA6BtB;IAEF,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe,CAuErB;IAEc,MAAM;CAoDvB"}

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js

@@ -1,14 +1,11 @@
 "use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Timeline
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -30,17 +27,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineComponent = void 0;
-require("./TimelineComponent.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const components_react_1 = require("@itwin/components-react");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const UiIModelComponents_1 = require("../UiIModelComponents");
 const InlineEdit_1 = require("./InlineEdit");
 const interfaces_1 = require("./interfaces");
 const PlayerButton_1 = require("./PlayerButton");
 const Scrubber_1 = require("./Scrubber");
-const itwinui_react_1 = require("@itwin/itwinui-react");
+require("./TimelineComponent.scss");
 // cspell:ignore millisec
 const slowSpeed = 60 * 1000;
 const mediumSpeed = 20 * 1000;
@@ -237,7 +243,9 @@ class TimelineComponent extends React.Component {
                 let keyIndex = 0;
                 if (this.state.includeRepeat) {
                     const checked = this.state.repeat;
-                    const icon = checked ? React.createElement("span", { className: "icon icon-checkmark" }) : React.createElement("span", null);
+                    const icon = checked ? React.createElement("span", { className: "icon" },
+                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
+                        " ") : React.createElement("span", null);
                     itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => { this._onRepeatChanged(); close(); }, icon: icon }, this._repeatLabel));
                     itemNodes.push(React.createElement(itwinui_react_1.MenuDivider, { key: ++keyIndex }));
                 }
@@ -246,8 +254,38 @@ class TimelineComponent extends React.Component {
                 });
                 return itemNodes;
             };
-            return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: createMenuItemNodes },
-                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon icon-more-vertical-2", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") })));
+            return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: createMenuItemNodes, placement: "top-start", popperOptions: {
+                    modifiers: [
+                        {
+                            name: "hide", // When the timeline is no longer visible, hide the popper.
+                        },
+                        {
+                            name: "preventOverflow",
+                            options: {
+                                altAxis: true, // Allow the popper to go below the reference element and use as much space as needed.
+                            },
+                        },
+                        {
+                            name: "computeStyles",
+                            options: {
+                                roundOffsets: ({ x, y }) => ({
+                                    x,
+                                    y: Math.max(y, 0), // Ensure that the top of the popper will not go over the top of the document.
+                                }),
+                            },
+                        },
+                        {
+                            name: "setPopperClass",
+                            enabled: true,
+                            phase: "beforeWrite",
+                            fn({ state }) {
+                                state.attributes.popper.class = "timeline-component-max-sized-scrolling-menu";
+                            },
+                        },
+                    ]
+                } },
+                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") },
+                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgMoreVertical, null) }))));
         };
         this.state = {
             isPlaying: false,
@@ -324,7 +362,9 @@ class TimelineComponent extends React.Component {
     _createMenuItemNode(item, index, currentTimelineDuration, close) {
         const label = item.label;
         const checked = currentTimelineDuration === item.timelineDuration;
-        const icon = checked ? React.createElement("span", { className: "icon icon-checkmark" }) : React.createElement("span", null);
+        const icon = checked ? React.createElement("span", { className: "icon" },
+            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
+            " ") : React.createElement("span", null);
         return (React.createElement(itwinui_react_1.MenuItem, { key: index, icon: icon, onClick: () => { this._onSetTotalDuration(item.timelineDuration); close(); } }, label));
     }
     render() {
@@ -337,9 +377,9 @@ class TimelineComponent extends React.Component {
         return (React.createElement("div", { "data-testid": "timeline-component", className: (0, classnames_1.default)("timeline-component", !!minimized && "minimized", hasDates && "has-dates") },
             React.createElement("div", { className: "header" },
                 React.createElement(PlayerButton_1.PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, "data-testid": "timeline-play" }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-backward", icon: "icon-caret-left", onClick: this._onBackward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-button-step", icon: "icon-media-controls-circular-play", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.step") }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-forward", icon: "icon-caret-right", onClick: this._onForward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
+                React.createElement(PlayerButton_1.PlayerButton, { className: "play-backward", icon: React.createElement(itwinui_icons_react_1.SvgCaretLeft, null), onClick: this._onBackward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
+                React.createElement(PlayerButton_1.PlayerButton, { className: "play-button-step", icon: React.createElement(itwinui_icons_react_1.SvgPlayCircular, null), isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.step") }),
+                React.createElement(PlayerButton_1.PlayerButton, { className: "play-forward", icon: React.createElement(itwinui_icons_react_1.SvgCaretRight, null), onClick: this._onForward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
                 React.createElement("span", { className: "current-date" }, (0, components_react_1.toDateString)(currentDate, timeZoneOffset, dateFormatOptions))),
             React.createElement("div", { className: "scrubber" },
                 React.createElement(PlayerButton_1.PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),