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

package/CHANGELOG.md

@@ -1,36 +1,6 @@
 # Change Log - @itwin/imodel-components-react
 
-This log was last generated on Wed, 20 Nov 2024 14:27:46 GMT and should not be manually modified.
-
-## 4.17.6
-Wed, 20 Nov 2024 14:27:46 GMT
-
-_Version update only_
-
-## 4.17.5
-Thu, 14 Nov 2024 08:22:04 GMT
-
-_Version update only_
-
-## 4.17.4
-Fri, 08 Nov 2024 14:41:23 GMT
-
-_Version update only_
-
-## 4.17.3
-Wed, 06 Nov 2024 09:04:20 GMT
-
-_Version update only_
-
-## 4.17.2
-Wed, 30 Oct 2024 14:46:15 GMT
-
-_Version update only_
-
-## 4.17.1
-Wed, 09 Oct 2024 10:50:47 GMT
-
-_Version update only_
+This log was last generated on Thu, 19 Sep 2024 12:50:53 GMT and should not be manually modified.
 
 ## 4.17.0
 Thu, 19 Sep 2024 12:50:53 GMT

package/README.md

@@ -6,6 +6,19 @@ Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md
 
 The **@itwin/imodel-components-react** package contains React components that depend on the @itwin/core-frontend, @itwin/core-common or @itwin/core-quantity packages.
 
-## Documentation
+## Usage
 
-See the [iTwin.js](https://www.itwinjs.org/learning/ui/imodel-components/) documentation for more information.
+To get started with the `@itwin/imodel-components-react` package, simply import the necessary components and utilities:
+
+```tsx
+import * as React from "react";
+import { TimelineComponent } from "@itwin/imodel-components-react";
+
+export function GetTimelineComponent() {
+  return (
+    <TimelineComponent startDate={new Date(2024, 8, 30)} endDate={new Date()} />
+  );
+}
+```
+
+For more details, check out the [@itwin/imodel-components-react documentation](https://www.itwinjs.org/reference/imodel-components-react/).

package/lib/cjs/imodel-components-react/color/ColorPickerButton.scss

@@ -2,8 +2,6 @@
  * 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";
-
 button.components-colorpicker-button {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
@@ -43,7 +41,7 @@ button.components-colorpicker-button {
 
     > .components-colorpicker-button-container {
       > .components-caret {
-        color: $buic-icon-color-disabled;
+        color: var(--iui-color-text-disabled);
       }
     }
   }
@@ -66,7 +64,7 @@ button.components-colorpicker-button {
 
   .components-colorpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
     border-radius: 6px;
 
     > .components-colorpicker-popup-colors {

package/lib/cjs/imodel-components-react/editors/ColorEditor.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $components-color-editor-item-height: 100%;
 
 .components-color-editor {

package/lib/cjs/imodel-components-react/editors/WeightEditor.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $components-weight-editor-item-height: 100%;
 
 .components-weight-editor {

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.scss

@@ -2,7 +2,7 @@
  * 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/base/base";
+@use "~@itwin/core-react/lib/core-react/base/base" as *;
 
 .component-quantity-number-input-container {
   display: flex;

package/lib/cjs/imodel-components-react/lineweight/Swatch.scss

@@ -2,8 +2,6 @@
  * 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";
-
 .components-lineweight-swatch {
   font-size: var(--iui-font-size-1);
   color: var(--iui-color-text);
@@ -23,7 +21,7 @@
   }
 
   &:focus {
-    outline: 1px solid $buic-row-selection;
+    outline: 1px solid var(--iui-color-background-accent-muted);
   }
 
   &[disabled] {
@@ -38,7 +36,7 @@
 
   > div {
     flex: 1;
-    background: $buic-foreground-body;
+    background: var(--iui-color-text);
     margin-left: 15px;
   }
 }

package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.scss

@@ -2,8 +2,6 @@
  * 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";
-
 .components-weightpicker-button {
   color: var(--iui-color-text);
   background: var(--iui-color-background);
@@ -17,7 +15,8 @@
 
   &:active,
   &:focus {
-    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+    box-shadow: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4)) 0px 0px
+      0px 2px;
   }
 }
 
@@ -29,7 +28,7 @@
 
   .components-weightpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
     min-width: 60px;
     padding: 0 4px;
     border-radius: var(--iui-border-radius-1);
@@ -40,11 +39,11 @@
       margin: 0.25rem 0;
 
       > .components-weightpicker-swatch:hover {
-        background: $buic-row-hover;
+        background: var(--iui-color-background-hover);
       }
 
       > .components-weightpicker-swatch.active {
-        background: $buic-row-selection;
+        background: var(--iui-color-background-accent-muted);
       }
     }
   }

package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $cube-outer-width: 96px;
 $button-width: 20px;
 $nav-cube-width: 64px;

package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.scss

@@ -2,8 +2,7 @@
  * 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/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 #components-drawing-portal {
   @include uicore-z-index(dragged-widget);
@@ -44,8 +43,8 @@
 
     .unrotate-button {
       position: absolute;
-      background-color: $buic-background-control;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
       cursor: pointer;
       border-radius: var(--iui-border-radius-1);
       top: 10px;
@@ -66,8 +65,8 @@
     .close {
       position: absolute;
       cursor: pointer;
-      background-color: $buic-background-control;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
       border-radius: var(--iui-border-radius-1);
       right: 10px;
       top: 10px;
@@ -85,7 +84,7 @@
     .toggle-rotate-style {
       position: absolute;
       cursor: pointer;
-      background-color: $buic-background-control;
+      background-color: var(--iui-color-background);
       opacity: 0.5;
       color: var(--iui-color-text);
       border-radius: var(--iui-border-radius-1);
@@ -108,21 +107,21 @@
 
     .zoom {
       position: absolute;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      border: 1px solid var(--iui-color-background-disabled);
       border-radius: var(--iui-border-radius-1);
       right: 10px;
       bottom: 10px;
 
       .zoom-button {
         cursor: pointer;
-        background-color: $buic-background-control;
+        background-color: var(--iui-color-background);
         height: 32px;
         width: 32px;
         line-height: 32px;
         text-align: center;
 
         &:first-child {
-          border-bottom: 1px solid $buic-background-toolbutton-stroke;
+          border-bottom: 1px solid var(--iui-color-background-disabled);
         }
 
         &:focus {

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.scss

@@ -2,8 +2,6 @@
  * 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/inputs/variables";
-
 .components-quantityFormat-panel {
   display: grid;
   grid-template-columns: auto 1fr;

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

@@ -2,8 +2,6 @@
  * 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";
-
 .inline-edit-input {
   color: var(--iui-color-text);
   background: inherit;
@@ -12,12 +10,12 @@
   padding: 0px;
 
   &:hover {
-    border: 1px solid $buic-background-5;
+    border: 1px solid var(--iui-color-background-disabled);
   }
 
   &:focus {
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-background-disabled);
     outline: none;
     color: var(--iui-color-text-hover);
   }

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

@@ -2,7 +2,7 @@
  * 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/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .components-timeline-thumb {
   display: flex;

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

@@ -2,8 +2,6 @@
  * 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";
-
 .solar-timeline-wrapper {
   width: 100%;
   position: relative;

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

@@ -2,8 +2,6 @@
  * 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;
@@ -22,7 +20,7 @@
     width: 100%;
     height: 2px;
     pointer-events: none;
-    background: $buic-background-5;
+    background: var(--iui-color-background-disabled);
   }
 
   .scrubberHandle {
@@ -35,6 +33,6 @@
     cursor: pointer;
     border: none;
     border-radius: 50%;
-    background: $buic-foreground-primary;
+    background: var(--iui-color-icon-accent);
   }
 }

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

@@ -2,13 +2,11 @@
  * 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;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-background-disabled);
   box-sizing: border-box;
 }
 
@@ -31,7 +29,7 @@
   height: 4px;
   cursor: pointer;
   pointer-events: none;
-  background: $buic-background-5;
+  background: var(--iui-color-background-disabled);
 }
 
 .tooltip-rail {
@@ -49,7 +47,7 @@
   z-index: 4;
   width: 2px;
   height: 100%;
-  background: $buic-foreground-primary;
+  background: var(--iui-color-icon-accent);
   cursor: pointer;
 }
 
@@ -63,8 +61,8 @@
   cursor: pointer;
   border: none;
   border-radius: 50%;
-  background: $buic-foreground-primary;
-  border: 2px solid $buic-background-1;
+  background: var(--iui-color-icon-accent);
+  border: 2px solid var(--iui-color-background);
 
   > span {
     position: absolute;
@@ -104,7 +102,7 @@
   width: 2px;
   height: 11px;
   transform: translateX(-50%);
-  background: $buic-background-5;
+  background: var(--iui-color-background-disabled);
 }
 
 .tick-label {

package/lib/esm/imodel-components-react/color/ColorPickerButton.scss

@@ -2,8 +2,6 @@
  * 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";
-
 button.components-colorpicker-button {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
@@ -43,7 +41,7 @@ button.components-colorpicker-button {
 
     > .components-colorpicker-button-container {
       > .components-caret {
-        color: $buic-icon-color-disabled;
+        color: var(--iui-color-text-disabled);
       }
     }
   }
@@ -66,7 +64,7 @@ button.components-colorpicker-button {
 
   .components-colorpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
     border-radius: 6px;
 
     > .components-colorpicker-popup-colors {

package/lib/esm/imodel-components-react/editors/ColorEditor.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $components-color-editor-item-height: 100%;
 
 .components-color-editor {

package/lib/esm/imodel-components-react/editors/WeightEditor.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $components-weight-editor-item-height: 100%;
 
 .components-weight-editor {

package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.scss

@@ -2,7 +2,7 @@
  * 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/base/base";
+@use "~@itwin/core-react/lib/core-react/base/base" as *;
 
 .component-quantity-number-input-container {
   display: flex;

package/lib/esm/imodel-components-react/lineweight/Swatch.scss

@@ -2,8 +2,6 @@
  * 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";
-
 .components-lineweight-swatch {
   font-size: var(--iui-font-size-1);
   color: var(--iui-color-text);
@@ -23,7 +21,7 @@
   }
 
   &:focus {
-    outline: 1px solid $buic-row-selection;
+    outline: 1px solid var(--iui-color-background-accent-muted);
   }
 
   &[disabled] {
@@ -38,7 +36,7 @@
 
   > div {
     flex: 1;
-    background: $buic-foreground-body;
+    background: var(--iui-color-text);
     margin-left: 15px;
   }
 }

package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.scss

@@ -2,8 +2,6 @@
  * 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";
-
 .components-weightpicker-button {
   color: var(--iui-color-text);
   background: var(--iui-color-background);
@@ -17,7 +15,8 @@
 
   &:active,
   &:focus {
-    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+    box-shadow: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4)) 0px 0px
+      0px 2px;
   }
 }
 
@@ -29,7 +28,7 @@
 
   .components-weightpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
     min-width: 60px;
     padding: 0 4px;
     border-radius: var(--iui-border-radius-1);
@@ -40,11 +39,11 @@
       margin: 0.25rem 0;
 
       > .components-weightpicker-swatch:hover {
-        background: $buic-row-hover;
+        background: var(--iui-color-background-hover);
       }
 
       > .components-weightpicker-swatch.active {
-        background: $buic-row-selection;
+        background: var(--iui-color-background-accent-muted);
       }
     }
   }

package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.scss

@@ -2,8 +2,6 @@
  * 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";
-
 $cube-outer-width: 96px;
 $button-width: 20px;
 $nav-cube-width: 64px;

package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.scss

@@ -2,8 +2,7 @@
  * 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/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 #components-drawing-portal {
   @include uicore-z-index(dragged-widget);
@@ -44,8 +43,8 @@
 
     .unrotate-button {
       position: absolute;
-      background-color: $buic-background-control;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
       cursor: pointer;
       border-radius: var(--iui-border-radius-1);
       top: 10px;
@@ -66,8 +65,8 @@
     .close {
       position: absolute;
       cursor: pointer;
-      background-color: $buic-background-control;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
       border-radius: var(--iui-border-radius-1);
       right: 10px;
       top: 10px;
@@ -85,7 +84,7 @@
     .toggle-rotate-style {
       position: absolute;
       cursor: pointer;
-      background-color: $buic-background-control;
+      background-color: var(--iui-color-background);
       opacity: 0.5;
       color: var(--iui-color-text);
       border-radius: var(--iui-border-radius-1);
@@ -108,21 +107,21 @@
 
     .zoom {
       position: absolute;
-      border: 1px solid $buic-background-toolbutton-stroke;
+      border: 1px solid var(--iui-color-background-disabled);
       border-radius: var(--iui-border-radius-1);
       right: 10px;
       bottom: 10px;
 
       .zoom-button {
         cursor: pointer;
-        background-color: $buic-background-control;
+        background-color: var(--iui-color-background);
         height: 32px;
         width: 32px;
         line-height: 32px;
         text-align: center;
 
         &:first-child {
-          border-bottom: 1px solid $buic-background-toolbutton-stroke;
+          border-bottom: 1px solid var(--iui-color-background-disabled);
         }
 
         &:focus {

package/lib/esm/imodel-components-react/quantityformat/FormatPanel.scss

@@ -2,8 +2,6 @@
  * 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/inputs/variables";
-
 .components-quantityFormat-panel {
   display: grid;
   grid-template-columns: auto 1fr;

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

@@ -2,8 +2,6 @@
  * 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";
-
 .inline-edit-input {
   color: var(--iui-color-text);
   background: inherit;
@@ -12,12 +10,12 @@
   padding: 0px;
 
   &:hover {
-    border: 1px solid $buic-background-5;
+    border: 1px solid var(--iui-color-background-disabled);
   }
 
   &:focus {
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-background-disabled);
     outline: none;
     color: var(--iui-color-text-hover);
   }

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

@@ -2,7 +2,7 @@
  * 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/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .components-timeline-thumb {
   display: flex;

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

@@ -2,8 +2,6 @@
  * 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";
-
 .solar-timeline-wrapper {
   width: 100%;
   position: relative;