@itwin/core-react 5.0.0-dev.2 → 5.0.0

package/CHANGELOG.md

@@ -1,6 +1,54 @@
 # Change Log - @itwin/core-react
 
-This log was last generated on Thu, 19 Sep 2024 12:50:53 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Dec 2024 11:43:27 GMT and should not be manually modified.
+
+## 5.0.0
+Mon, 16 Dec 2024 11:43:27 GMT
+
+### Updates
+
+- Drop support for CommonJS modules.
+- Drop support for iTwin.js 3.x.
+- Drop support for React 17.x.
+- Remove a polyfill for ResizeObserver since the API is supported in modern browsers.
+- Remove `@internal` API exports from the barrel file.
+- Move @itwin/itwinui-react to peerDependencies.
+- Provide file extension in import declarations.
+- Add `exports` field to `package.json`.
+- Replaced SCSS `@import` rules with `@use` rules.
+- Replace buic variables with iTwinUI CSS variables.
+
+## 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
+
+### Updates
+
+- Fix Popup to adjust final position based on container size instead of window size.
+
+## 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_
 
 ## 4.17.0
 Thu, 19 Sep 2024 12:50:53 GMT

package/lib/cjs/core-react/_geometry.scss

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin triangle-common {
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+@mixin triangle-left-color($color) {
+  border-color: transparent $color transparent transparent;
+}
+
+@mixin triangle-left($height, $width: $height, $color: currentColor) {
+  border-width: ($height * 0.5) $width ($height * 0.5) 0;
+
+  @include triangle-common;
+  @include triangle-left-color($color);
+}
+
+@mixin triangle-top-color($color) {
+  border-color: transparent transparent $color transparent;
+}
+
+@mixin triangle-top($height, $width: $height, $color: currentColor) {
+  border-width: 0 ($width * 0.5) $height ($width * 0.5);
+
+  @include triangle-common;
+  @include triangle-top-color($color);
+}
+
+@mixin triangle-right-color($color) {
+  border-color: transparent transparent transparent $color;
+}
+
+@mixin triangle-right($height, $width: $height, $color: currentColor) {
+  border-width: ($height * 0.5) 0 ($height * 0.5) $width;
+
+  @include triangle-common;
+  @include triangle-right-color($color);
+}
+
+@mixin triangle-bottom-color($color) {
+  border-color: $color transparent transparent transparent;
+}
+
+@mixin triangle-bottom($height, $width: $height, $color: currentColor) {
+  border-width: $height ($width * 0.5) 0 ($width * 0.5);
+
+  @include triangle-common;
+  @include triangle-bottom-color($color);
+}
+
+@mixin triangle-bottom-right-color($color) {
+  border-color: transparent transparent $color transparent;
+}
+
+@mixin triangle-bottom-right($height, $width: $height, $color: currentColor) {
+  border-width: 0 0 $height $width;
+
+  @include triangle-common;
+  @include triangle-bottom-right-color($color);
+}
+
+@mixin oval($width, $height: $width) {
+  width: $width;
+  height: $height;
+  border-radius: #{$width * 0.5} / #{$height * 0.5};
+}

package/lib/cjs/core-react/_helpers.scss

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:map";
+@use "sass:meta";
+
+// Generates map from array.
+// Key of each entry is ($array entry value: result of $fn call).
+// $fn is called with specified $args.
+// Usage example:
+/*
+  $counter: 0;
+  @function step($step) {
+    $counter: $counter + $step !global;
+    @return $counter;
+  }
+  uicore-map-from-array($array, step, 1000);
+*/
+@function uicore-map-from-array($array, $fn, $args...) {
+  $map: ();
+  @each $item in $array {
+    $kvp: (
+      $item: meta.call($fn, $args...),
+    );
+    $map: map.merge($map, $kvp);
+  }
+  @return $map;
+}
+
+// Generates map from array.
+// Key of each entry is ($array entry value: result of $fn call).
+// $fn is called with one argument:
+// 1. First entry with $initialArg
+// 2. Other entries with previous result of $fn call.
+// Usage example:
+/*
+  @function step($counter) {
+    @return $counter + 1000;
+  }
+  uicore-map-from-array-with-result-arg($array, step, 0);
+*/
+@function uicore-map-from-array-with-result-arg($array, $fn, $initialArg) {
+  $map: ();
+  $result: $initialArg;
+  @each $item in $array {
+    $result: meta.call($fn, $result);
+    $kvp: (
+      $item: $result,
+    );
+    $map: map.merge($map, $kvp);
+  }
+  @return $map;
+}

package/lib/cjs/core-react/_math.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@function sqrt($x, $iterations: 10) {
+  $sqr: 1;
+
+  @for $i from 1 through $iterations {
+    $sqr: ($sqr - ($sqr * $sqr - $x) / (2 * $sqr));
+  }
+
+  @return $sqr;
+}

package/lib/cjs/core-react/_scrollbar.scss

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./style/themecolors";
+
+$uicore-scrollbar-width: 12px;
+$uicore-scrollbar-padding: 2px;
+
+@mixin uicore-scrollbar(
+  $color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4)),
+  $width: $uicore-scrollbar-width,
+  $padding: $uicore-scrollbar-padding
+) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: $width;
+    background-color: $color;
+    background-clip: content-box;
+    border-style: solid;
+    border-color: transparent;
+    border-width: $padding;
+
+    &:hover {
+      background-color: hsl(
+        var(--iui-color-foreground-hsl) / var(--iui-opacity-3)
+      );
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track-piece:corner-present {
+    margin-bottom: -2 * $padding;
+    margin-right: -2 * $padding;
+  }
+}
+
+@mixin uicore-hidden-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+@mixin uicore-touch-scrolling {
+  @supports (-webkit-overflow-scrolling: touch) {
+    overflow-y: scroll; /* overflow-y has to be scroll, not auto */
+    -webkit-overflow-scrolling: touch;
+  }
+}

package/lib/cjs/core-react/_typography.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./style/opacity";
+
+$title-weight: var(--iui-font-weight-normal);
+$title-size: var(--iui-font-size-2);
+$title-opacity: var(--iui-opacity-1);
+
+$body-weight: var(--iui-font-weight-light);
+$body-size: var(--iui-font-size-1);
+$body-opacity: var(--iui-opacity-2);
+
+$body1-weight: var(--iui-font-weight-normal);
+$body1-size: var(--iui-font-size-1);
+$body1-opacity: var(--iui-opacity-2);
+
+@mixin title($rgb: unset) {
+  font-weight: $title-weight;
+  font-size: $title-size;
+
+  @if $rgb != unset {
+    color: rgba($rgb, $title-opacity);
+  }
+}
+
+@mixin body($rgb: unset) {
+  font-weight: $body-weight;
+  font-size: $body-size;
+
+  @if $rgb != unset {
+    color: rgba($rgb, $body-opacity);
+  }
+}
+
+@mixin body1($rgb: unset) {
+  font-weight: $body1-weight;
+  font-size: $body1-size;
+
+  @if $rgb != unset {
+    color: rgba($rgb, $body1-opacity);
+  }
+}

package/lib/cjs/core-react/_z-index.scss

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:map";
+@use "sass:meta";
+@use "_helpers";
+
+@forward "_helpers";
+
+// Order matters, last is top-most on screen.
+$uicore-internal-z-index-layers: view-overlay, view-content-dialog,
+  content-card-popup, widget-grip, drop-target, dragged-widget, zone-target,
+  zone-outline, toolbar-panels, tool-settings-popup, status-overflow-popup,
+  status-popup, modal-frontstage-overlay, modal-frontstage, dialog, dialog-popup,
+  status-message, tooltip, context-menu-z, dragdrop, cursor-overlay, drag-target,
+  drag-preview, backstage-overlay, backstage, keyin-palette-overlay;
+
+$uicore-z-index-step: 1000;
+
+@function uicore-internal-get-next-z-index-step($counter) {
+  @return $counter + $uicore-z-index-step;
+}
+
+$uicore-internal-z-index-layer-map: helpers.uicore-map-from-array-with-result-arg(
+  $uicore-internal-z-index-layers,
+  meta.get-function(uicore-internal-get-next-z-index-step),
+  0
+);
+
+// Use this to get z-index value
+@function uicore-get-z-index($layer) {
+  @if map.has-key($uicore-internal-z-index-layer-map, $layer) {
+    @return map.get($uicore-internal-z-index-layer-map, $layer);
+  } @else {
+    @error "Failed to get z-index for $layer: #{$layer}";
+  }
+}
+
+// Use this to add z-index property
+@mixin uicore-z-index($layer) {
+  z-index: uicore-get-z-index($layer);
+}
+
+// Use this to add a CSS variable for each z-index layer
+@mixin uicore-z-index-variables() {
+  @each $layer in $uicore-internal-z-index-layers {
+    $z-index: uicore-get-z-index($layer);
+    --uicore-z-index-#{$layer}: #{$z-index};
+  }
+}

package/lib/cjs/core-react/autosuggest/AutoSuggest.scss

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../scrollbar" as *;
+@use "../inputs/variables" as *;
+
+.uicore-autosuggest__container {
+  position: relative;
+}
+
+.uicore-autosuggest__input {
+  min-height: 28px !important;
+  padding: $uicore-iui-input-padding !important;
+}
+
+.uicore-autosuggest__input--focused {
+  outline: none;
+}
+
+.uicore-autosuggest__input::-ms-clear {
+  display: none;
+}
+
+.uicore-autosuggest__input--open {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.uicore-autosuggest__suggestions-container {
+  display: none;
+}
+
+.uicore-autosuggest__suggestions-container--open {
+  display: block;
+  position: absolute;
+  width: 100%;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-top: 0;
+  background-color: var(--iui-color-background);
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-sizing: border-box;
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 2;
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+}
+
+.uicore-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.uicore-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 5px 10px;
+}
+
+.uicore-autosuggest__suggestion--highlighted {
+  background-color: var(--iui-color-background-accent-muted);
+}
+
+.uicore-autosuggest__section-container {
+  border-top: 1px dashed var(--iui-color-background-backdrop-hover);
+}
+
+.uicore-autosuggest__section-container--first {
+  border-top: 0;
+}
+
+.uicore-autosuggest__section-title {
+  padding: 10px 0 0 10px;
+  font-size: var(--iui-font-size-0);
+  color: var(--iui-color-background-backdrop-hover);
+}

package/lib/cjs/core-react/badge/DeprecatedBadge.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-deprecatedBadge {
+  transform: rotate(270deg);
+
+  svg {
+    fill: rgba(0, 0, 0, 0.85);
+  }
+}

package/lib/cjs/core-react/badge/NewBadge.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-newBadge {
+  color: var(--iui-color-text-positive);
+  transform: rotate(270deg);
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/cjs/core-react/badge/TechnicalPreviewBadge.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-technicalPreviewBadge {
+  transform: rotate(270deg);
+
+  svg {
+    fill: rgba(0, 0, 0, 0.85);
+  }
+}

package/lib/cjs/core-react/base/base.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../_scrollbar";
+
+@forward "../_scrollbar";
+
+@mixin uicore-centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin uicore-full-height {
+  height: 100%;
+}
+
+@mixin uicore-full-width {
+  width: 100%;
+}
+
+@mixin uicore-full-size {
+  @include uicore-full-height;
+  @include uicore-full-width;
+}
+
+@mixin uicore-fill-centered {
+  @include uicore-centered;
+  @include uicore-full-size;
+}
+
+@mixin uicore-scrollview {
+  @include uicore-full-size;
+  overflow-y: auto;
+
+  @include scrollbar.uicore-touch-scrolling;
+  @include scrollbar.uicore-scrollbar();
+}
+
+@mixin uicore-flex-wrap-container {
+  display: flex;
+  flex-wrap: wrap;
+}

package/lib/cjs/core-react/base/classes.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-centered {
+  @include uicore-centered;
+}
+.uicore-full-height {
+  @include uicore-full-height;
+}
+.uicore-full-width {
+  @include uicore-full-width;
+}
+.uicore-full-size {
+  @include uicore-full-size;
+}
+.uicore-fill-centered {
+  @include uicore-fill-centered;
+}
+.uicore-scrollview {
+  @include uicore-scrollview;
+}
+.uicore-flex-wrap-container {
+  @include uicore-flex-wrap-container;
+}

package/lib/cjs/core-react/base/index.scss

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./base";

package/lib/cjs/core-react/button/UnderlinedButton.scss

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$color: var(--iui-color-icon-accent);
+$hoverColor: var(--iui-color-text-accent-hover);
+
+.core-underlined-button {
+  background: transparent;
+  color: $color;
+  border: 0px solid $color;
+  border-bottom-width: 1px;
+
+  width: fit-content;
+
+  cursor: pointer;
+
+  &:hover {
+    color: $hoverColor;
+    border-color: $hoverColor;
+  }
+
+  &:focus {
+    color: $hoverColor;
+    border-color: $hoverColor;
+    background-color: hsl(var(--iui-opacity-6));
+    outline: none;
+  }
+}

package/lib/cjs/core-react/checklistbox/CheckListBox.scss

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.core-chk-listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+
+  > li > .core-chk-listboxitem-checkbox {
+    margin: 4px 0;
+  }
+
+  > .core-chk-listbox-separator {
+    height: 1px;
+    background: var(--iui-color-border-foreground);
+    margin: 4px 0;
+    pointer-events: none;
+  }
+}

package/lib/cjs/core-react/classes.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./base/classes" as *;
+@use "./icons/classes" as *;
+@use "./inputs/classes" as *;
+@use "./tabs/classes" as *;
+@use "./text/classes" as *;

package/lib/cjs/core-react/colorthemes.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// cspell:ignore colorvariables
+
+/** @note: This file should only be imported by UiCore.ts.
+ *  It should NOT be imported by any *.scss or other ui-core files.
+ */
+
+$background: var(--iui-color-background);
+$accent: var(--iui-color-background-accent);