@itwin/appui-react 5.21.1 → 5.22.0

package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.scss

@@ -0,0 +1,47 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerLayout {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-s);
+    container-type: inline-size;
+
+    .nz-menu {
+      width: 100%;
+      max-width: 560px;
+    }
+
+    .nz-buttons {
+      display: flex;
+      gap: var(--iui-size-s);
+      align-items: center;
+
+      width: 100%;
+      max-width: 560px;
+      > button {
+        overflow: auto;
+        min-width: fit-content;
+      }
+    }
+
+    .nz-title {
+      font-weight: bolder;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .nz-remainingItems {
+      overflow-x: auto;
+
+      .nz-buttons {
+        flex-wrap: wrap;
+      }
+    }
+
+    .nz-headerTopBarWrapper {
+      display: flex;
+      gap: var(--iui-size-s);
+      width: 100%;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.scss

@@ -0,0 +1,6 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerSearch {
+    max-width: var(--_appui-max-search-width);
+    border-radius: var(--iui-border-radius-1);
+  }
+}

package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.scss

@@ -0,0 +1,29 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerTopBar {
+    gap: var(--iui-size-s);
+    justify-content: space-between;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    width: 100%;
+
+    &.nz-singleColumn {
+      grid-template-columns: 1fr;
+    }
+
+    .nz-primaryContent {
+      display: flex;
+      gap: var(--iui-size-s);
+      align-items: center;
+      text-wrap-mode: nowrap;
+      overflow: auto;
+    }
+  }
+
+  @container (width < 200px) {
+    .nz-widget-widgetContentLayout-header-headerTopBar {
+      &[data-search-expanded="true"] {
+        overflow: auto;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/widget-content-layout/WidgetContentLayout.scss

@@ -0,0 +1,64 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .nz-widget-widgetContentLayout-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-s);
+    padding: var(--iui-size-s);
+  }
+
+  .nz-widget-widgetContentLayout-body_wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0px;
+    width: 100%;
+    gap: var(--iui-size-s);
+    padding: var(--iui-size-s);
+
+    .nz-widget-widgetContentLayout-body {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      gap: var(--iui-size-s);
+      flex: 1;
+      overflow: auto;
+    }
+
+    &.nz-nonBlockingLoading {
+      padding-block-start: 0px;
+    }
+  }
+
+  .nz-widget-widgetContentLayout-footer {
+    display: flex;
+    gap: var(--iui-size-s);
+    justify-content: flex-end;
+    width: 100%;
+    padding: var(--iui-size-s);
+  }
+
+  .nz-widget-widgetContentLayout-loadingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+  }
+
+  .nz-widget-widgetContentLayout-divider {
+    margin-inline: var(--iui-size-s);
+  }
+}

package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss

@@ -0,0 +1,44 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerIconToolbar {
+    --_appui-icon-size: var(--iui-component-height);
+    --_appui-max-search-width: 200px;
+    min-width: var(--_appui-icon-size);
+    min-height: var(--_appui-icon-size);
+
+    &[data-_appui-icon-size="small"] {
+      --icon-size: var(--iui-component-height-small);
+    }
+
+    &[data-_appui-icon-size="large"] {
+      --icon-size: var(--iui-component-height-large);
+    }
+
+    &[data-_appui-search-expanded="true"] {
+      &[data-_appui-single-item="true"] {
+        min-width: var(--_appui-max-search-width);
+      }
+      &[data-_appui-single-item="false"] {
+        min-width: calc(
+          var(--_appui-max-search-width) + var(--_appui-icon-size) +
+            var(--iui-size-s)
+        );
+      }
+    }
+
+    .nz-buttonGroup {
+      gap: var(--iui-size-s);
+      &:before {
+        content: "";
+        flex: 1;
+      }
+
+      > :first-child {
+        margin-inline-start: calc(-1 * var(--iui-size-s));
+      }
+
+      .nz-iconButton[data-iui-active="true"]:after {
+        inset-block: unset;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderLayout.scss

@@ -0,0 +1,47 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerLayout {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-s);
+    container-type: inline-size;
+
+    .nz-menu {
+      width: 100%;
+      max-width: 560px;
+    }
+
+    .nz-buttons {
+      display: flex;
+      gap: var(--iui-size-s);
+      align-items: center;
+
+      width: 100%;
+      max-width: 560px;
+      > button {
+        overflow: auto;
+        min-width: fit-content;
+      }
+    }
+
+    .nz-title {
+      font-weight: bolder;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .nz-remainingItems {
+      overflow-x: auto;
+
+      .nz-buttons {
+        flex-wrap: wrap;
+      }
+    }
+
+    .nz-headerTopBarWrapper {
+      display: flex;
+      gap: var(--iui-size-s);
+      width: 100%;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderSearch.scss

@@ -0,0 +1,6 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerSearch {
+    max-width: var(--_appui-max-search-width);
+    border-radius: var(--iui-border-radius-1);
+  }
+}

package/lib/esm/appui-react/layout/widget/widget-content-layout/header/HeaderTopBar.scss

@@ -0,0 +1,29 @@
+@layer appui.component {
+  .nz-widget-widgetContentLayout-header-headerTopBar {
+    gap: var(--iui-size-s);
+    justify-content: space-between;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    width: 100%;
+
+    &.nz-singleColumn {
+      grid-template-columns: 1fr;
+    }
+
+    .nz-primaryContent {
+      display: flex;
+      gap: var(--iui-size-s);
+      align-items: center;
+      text-wrap-mode: nowrap;
+      overflow: auto;
+    }
+  }
+
+  @container (width < 200px) {
+    .nz-widget-widgetContentLayout-header-headerTopBar {
+      &[data-search-expanded="true"] {
+        overflow: auto;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.21.1",
+  "version": "5.22.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.21.1",
-    "@itwin/core-react": "5.21.1",
-    "@itwin/imodel-components-react": "5.21.1"
+    "@itwin/components-react": "5.22.0",
+    "@itwin/core-react": "5.22.0",
+    "@itwin/imodel-components-react": "5.22.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^5.1.0",
@@ -90,9 +90,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.2.4",
-    "@itwin/components-react": "5.21.1",
-    "@itwin/core-react": "5.21.1",
-    "@itwin/imodel-components-react": "5.21.1"
+    "@itwin/components-react": "5.22.0",
+    "@itwin/core-react": "5.22.0",
+    "@itwin/imodel-components-react": "5.22.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",