@itwin/imodel-components-react 5.0.0-dev.2 → 5.0.0-dev.3

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

@@ -0,0 +1,163 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.timeline {
+  position: relative;
+  height: 110px;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-background-disabled);
+  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: var(--iui-color-background-disabled);
+}
+
+.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: var(--iui-color-icon-accent);
+  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: var(--iui-color-icon-accent);
+  border: 2px solid var(--iui-color-background);
+
+  > span {
+    position: absolute;
+    left: 50%;
+    bottom: -25px;
+    font-size: 14px;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    color: rgba(black, 0.85);
+  }
+
+  input {
+    position: absolute;
+    border: none;
+    margin-top: 10px;
+    top: 1.2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: pointer;
+  }
+
+  input:focus {
+    cursor: text;
+    left: -0.25rem;
+    top: calc(1.2rem - 0.25rem);
+    width: 140px;
+    padding: 0.25rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
+    box-sizing: border-box;
+    outline: none;
+  }
+}
+
+.tick-line {
+  position: absolute;
+  width: 2px;
+  height: 11px;
+  transform: translateX(-50%);
+  background: var(--iui-color-background-disabled);
+}
+
+.tick-label {
+  position: absolute;
+  margin-top: 9px;
+  font-size: 14px;
+  color: rgba(black, 0.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/esm/imodel-components-react/timeline/TimelineComponent.scss

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.timeline-component {
+  width: 100%;
+  min-width: 275px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  gap: 8px;
+
+  .time-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .timeline-time {
+    font-size: 12px;
+    color: var(--iui-color-text-muted);
+    text-align: center;
+    min-height: inherit;
+  }
+
+  .timeline-duration-time {
+    font-size: 14px;
+    width: 40px;
+    color: var(--iui-color-text);
+    text-align: center;
+    min-height: inherit;
+  }
+
+  .timeline-date {
+    font-size: 12px;
+    color: var(--iui-color-text-muted);
+    padding-bottom: 4px;
+  }
+
+  .slider {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/imodel-components-react",
-  "version": "5.0.0-dev.2",
+  "version": "5.0.0-dev.3",
   "description": "A react component library of iTwin.js UI iModel components",
   "type": "module",
   "types": "./lib/imodel-components-react.d.ts",
@@ -36,20 +36,17 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/components-react": "^5.0.0-dev.2",
+    "@itwin/components-react": "^5.0.0-dev.3",
     "@itwin/core-bentley": "^4.0.0",
     "@itwin/core-common": "^4.0.0",
     "@itwin/core-frontend": "^4.0.0",
     "@itwin/core-geometry": "^4.0.0",
     "@itwin/core-quantity": "^4.0.0",
-    "@itwin/core-react": "^5.0.0-dev.2",
+    "@itwin/core-react": "^5.0.0-dev.3",
+    "@itwin/itwinui-react": "^3.15.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "//devDependencies": [
-    "NOTE: All peerDependencies should also be listed as devDependencies since peerDependencies are not considered by npm install",
-    "NOTE: All tools used by scripts in this package must be listed as devDependencies"
-  ],
   "devDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
     "@itwin/build-tools": "4.10.0-dev.31",
@@ -60,6 +57,7 @@
     "@itwin/core-orbitgt": "^4.0.0",
     "@itwin/core-quantity": "^4.0.0",
     "@itwin/eslint-plugin": "^4.1.1",
+    "@itwin/itwinui-react": "^3.15.0",
     "@itwin/webgl-compatibility": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
@@ -85,26 +83,23 @@
     "typescript": "~5.3.3",
     "upath": "^2.0.1",
     "vitest": "^1.6.0",
-    "@itwin/components-react": "5.0.0-dev.2",
-    "@itwin/core-react": "5.0.0-dev.2"
+    "@itwin/core-react": "5.0.0-dev.3",
+    "@itwin/components-react": "5.0.0-dev.3"
   },
-  "//dependencies": [
-    "NOTE: these dependencies should be only for things that DO NOT APPEAR IN THE API",
-    "NOTE: core-frontend should remain UI technology agnostic, so no react/angular dependencies are allowed"
-  ],
   "dependencies": {
     "@bentley/icons-generic": "^1.0.34",
-    "@itwin/itwinui-react": "^3.11.2",
-    "@itwin/itwinui-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "classnames": "2.5.1",
     "ts-key-enum": "~2.0.12"
   },
   "scripts": {
     "start": "run-p -l \"build -- -w\" \"copy:** -- -w\"",
-    "build": "npm run copy:css && npm run copy:locale && tsc",
+    "build": "npm run copy:css && npm run compat:css && npm run copy:locale && tsc",
     "copy:css": "cpx \"./src/**/*.*css\" ./lib",
     "copy:locale": "cpx ./src/imodel-components-react/UiIModelComponents.json ./lib/public/locales/en",
+    "compat:css": "npm run compat:cjs && npm run compat:esm",
+    "compat:cjs": "cpx \"./src/**/*.{*css,svg}\" ./lib/cjs",
+    "compat:esm": "cpx \"./src/**/*.{*css,svg}\" ./lib/esm",
     "clean": "rimraf lib .rush/temp/package-deps*.json",
     "cover": "vitest run --coverage",
     "lint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",