@hazelcast/ui 2.0.4 → 3.0.0-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "2.0.4",
+  "version": "3.0.0-canary.0",
   "description": "Hazelcast design system components and utilities",
   "homepage": "https://github.com/hazelcast/hive#readme",
   "bugs": {
@@ -15,6 +15,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -26,7 +27,7 @@
   "scripts": {
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
-    "compile": "shx rm -f *.tsbuildinfo && shx rm -rf lib && shx mkdir lib && shx cp -r src/* lib && shx rm -rf lib/*.{tsx,ts} && shx rm -rf lib/**/*.{tsx,ts} && tsc -p tsconfig.build.json",
+    "compile": "rm -rf lib && rollup -c",
     "generate-screenshots": "npm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "lint": "npm run lint:ts && npm run lint:css",
     "lint:css": "postcss --config ./.postcss-lint --replace '**/*.{css,scss}'",
@@ -46,9 +47,10 @@
     "verify-all": "npm run lint && npm run test && npm run build-storybook && npm run test:visual"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.19",
+    "@floating-ui/core": "^1.7.3",
+    "@floating-ui/react": "^0.26.28",
+    "@headlessui/react": "^2.2.0",
     "@icons-pack/react-simple-icons": "^12.0.0",
-    "@popperjs/core": "^2.11.8",
     "@tanstack/react-table": "^8.21.2",
     "@types/react-modal": "3.16.3",
     "classnames": "^2.5.1",
@@ -56,19 +58,19 @@
     "dequal": "^2.0.3",
     "formik": "^2.4.6",
     "nuka-carousel": "^7.0.0",
-    "react-datepicker": "^4.25.0",
+    "react-datepicker": "^7.5.0",
     "react-feather": "^2.0.10",
     "react-hot-keys": "^2.7.3",
     "react-merge-refs": "^1.1.0",
     "react-modal": "^3.16.3",
-    "react-popper": "^2.3.0",
+    "react-reconciler": "^0.32.0",
     "react-select": "^5.10.0",
     "react-simple-timefield": "^3.3.1",
     "react-uid": "^2.4.0",
     "react-use": "^17.6.0",
     "serialize-error": "^12.0.0",
     "use-deep-compare": "^1.3.0",
-    "yup": "^0.32.11"
+    "yup": "^1.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.9",
@@ -98,12 +100,16 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^18.15.3",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.1.12",
     "@types/react-datepicker": "^4.19.6",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.1.9",
     "@types/use-persisted-state": "^0.3.5",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "chromatic": "^6.24.1",
@@ -117,6 +123,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "glob": "^11.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -130,8 +137,8 @@
     "postcss-reporter": "^7.1.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.5.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "regenerator-runtime": "^0.14.1",
     "sass": "^1.85.0",
     "sass-loader": "^16.0.5",
@@ -144,15 +151,17 @@
     "stylelint-prettier": "^5.0.2",
     "stylelint-scss": "^6.7.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0"
+    "typescript-eslint": "^8.24.0",
+    "rollup": "^4.28.1",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "peerDependencies": {
     "@types/lodash": "^4.17.13",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "lodash": "^4.17.21",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "publishConfig": {
     "access": "public"

package/lib/components/Alert.module.scss

@@ -1,141 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-// TODO: potential max-height
-.alert {
-  display: inline-flex;
-  padding: c.$grid * 2.5;
-  width: c.$alertWidth;
-  border-left: 5px solid transparent;
-
-  .icon {
-    flex-shrink: 0;
-    margin-right: c.$grid * 2.5;
-  }
-
-  .rightSide {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .title {
-      flex: 1 0 auto;
-      margin-right: c.$grid * 8.5;
-
-      @include c.typographyBodyNormal('bold');
-      @include h.overflowEllipsis;
-    }
-  }
-
-  /* Theme - Success */
-  &.success {
-    color: c.$colorText;
-    border-color: c.$colorSuccess;
-    background-color: c.$colorSuccessLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Info */
-  &.info {
-    color: c.$colorText;
-    border-color: c.$colorInfo;
-    background-color: c.$colorInfoLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Warning */
-  &.warning {
-    color: c.$colorText;
-    border-color: c.$colorWarning;
-    background-color: c.$colorWarningLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Critical */
-  &.critical {
-    color: c.$colorText;
-    border-color: c.$colorError;
-    background-color: c.$colorErrorLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  .body {
-    padding-right: c.$grid * 8.5;
-
-    @include c.typographyBodySmall;
-
-    .actions {
-      display: flex;
-      margin: c.$grid * 3 0 c.$grid;
-
-      .action {
-        &:not(:last-child) {
-          margin-right: c.$grid * 6;
-        }
-      }
-
-      .actionButton {
-        height: auto;
-
-        @include c.typographyBodySmall;
-
-        &:hover,
-        &.hover {
-          /* doiuse-disable text-decoration */
-          text-decoration: underline solid;
-        }
-
-        .actionButtonBody {
-          padding: 0;
-        }
-
-        .actionButtonIcon {
-          margin-right: c.$grid * 1.5;
-        }
-      }
-    }
-  }
-}

package/lib/components/AppHeader/AppHeader.module.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/constants' as c;
-
-.root {
-  background: c.$colorBrandSecondary;
-  color: c.$colorNeutralLighter;
-  display: flex;
-  align-items: center;
-  height: 59px;
-  box-sizing: border-box;
-  flex-direction: row;
-  font-size: c.$fontSizeBodySmall;
-  width: 100%;
-  padding: 0 c.$grid * 5;
-  overflow-x: auto;
-  flex-shrink: 0;
-  gap: c.$grid * 7.5;
-}
-
-.name {
-  color: c.$colorBrandPrimary;
-  font-weight: 600;
-}
-
-.aside {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  gap: c.$grid * 4;
-}

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.module.scss

@@ -1,29 +0,0 @@
-@use '../../../../styles/helpers' as h;
-
-.root {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  overflow: hidden;
-
-  .link {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-
-    &:focus {
-      outline: none;
-
-      @include h.outlineSimple;
-    }
-
-    img {
-      height: auto;
-      width: auto;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss

@@ -1,20 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  border-left: 1px solid c.$colorNeutralLight;
-}
-
-.content {
-  padding: c.$grid * 2;
-  color: c.$colorNeutralLighter;
-  background: c.$colorBrandSecondary;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: c.$grid * 2;
-}

package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.module.scss

@@ -1,13 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: c.$grid * 2;
-  color: #000;
-  background: c.$colorError;
-  border-radius: c.$grid * 3.5;
-  padding: 0 c.$grid * 3;
-  height: c.$grid * 7;
-  text-transform: capitalize;
-}

package/lib/components/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -1,101 +0,0 @@
-@use '../../../../styles/constants' as c;
-@use '../../../../styles/helpers' as h;
-
-$selectContainer: ':global .hz-select-field';
-$selectControl: ':global .hz-select-field__control';
-$selectInputContainer: ':global .hz-select-field__input-container';
-$selectValueContainer: ':global .hz-select-field__value-container';
-$selectTrailingNote: ':global .hz-select-field__trailing-note';
-$selectValue: ':global .hz-select-field__single-value';
-$selectMenuPortal: ':global .hz-select-field__menu-portal';
-$selectMenu: ':global .hz-select-field__menu';
-$selectMenuList: ':global .hz-select-field__menu-list';
-$selectMenuNotice: ':global .hz-select-field__menu-notice';
-$selectOption: ':global .hz-select-field__option';
-$selectGroup: ':global .hz-select-field__group';
-$selectGroupHeading: ':global .hz-select-field__group-heading';
-$selectFieldIndicators: ':global .hz-select-field__indicators';
-
-.select {
-  width: 260px;
-
-  &.disabled {
-    #{$selectControl} {
-      color: c.$colorTextSecondary;
-      background-color: transparent;
-
-      #{$selectValue},
-      #{$selectTrailingNote},
-      #{$selectFieldIndicators} svg {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-
-  #{$selectControl} {
-    background: none;
-    border-radius: c.$borderRadius;
-    border: 1px solid c.$colorTextSecondary;
-
-    #{$selectInputContainer},
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  #{$selectValue} {
-    color: c.$colorNeutralLighter;
-  }
-
-  #{$selectFieldIndicators} {
-    svg {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  .selectIconLeftContainer {
-    box-sizing: content-box;
-
-    .selectIconLeft {
-      color: c.$colorSuccess;
-
-      &.disconnected {
-        color: c.$colorError;
-      }
-
-      &.disabled {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-}
-
-.menuPortal {
-  #{$selectMenu} {
-    border: none;
-    background: c.$colorBrandSecondary;
-    border-radius: 0 0 c.$borderRadius c.$borderRadius;
-  }
-
-  #{$selectOption} {
-    &:active {
-      background: none;
-    }
-
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-
-    &--is-focused {
-      background: c.$colorBrandAccent;
-      box-shadow: none;
-
-      #{$selectValueContainer},
-      #{$selectTrailingNote} {
-        color: c.$colorBrandText;
-      }
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebar.module.scss

@@ -1,66 +0,0 @@
-@use '../../../styles/constants' as c;
-
-$width: 264px;
-$collapsedWidth: 74px;
-$offset: c.$grid * 4;
-
-.root {
-  width: $width;
-  height: 100%;
-  flex-shrink: 0;
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  box-sizing: border-box;
-  color: c.$colorNeutralLighter;
-  background: c.$colorBrandSecondary;
-  transition: 200ms width;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .toggle {
-    color: #1ee6fa;
-    position: absolute;
-    right: -#{c.$grid * 3};
-    top: 0;
-    z-index: c.$zIndex1000;
-    border-radius: 50%;
-    background: #0e3454;
-  }
-
-  .wrapper {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    overflow-x: hidden;
-  }
-
-  .content {
-    width: 90%;
-    margin: 0 auto;
-    padding: $offset 0;
-  }
-
-  .footer {
-    color: c.$colorNeutralLight;
-    text-align: center;
-    margin-top: auto;
-    word-break: break-all;
-    padding: 0 c.$grid * 4 c.$grid * 2.5;
-    font-size: c.$fontSizeBodySmaller;
-  }
-
-  &.collapsed {
-    width: $collapsedWidth;
-
-    .content {
-      max-width: calc($collapsedWidth - $offset * 1.5);
-    }
-
-    .footer {
-      padding: 0 c.$grid;
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.module.scss

@@ -1,16 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-[class].root {
-  position: absolute;
-  top: 50%;
-  z-index: 1;
-  left: c.$grid * 3;
-  color: c.$colorBrandText;
-  transform: translateY(-50%);
-
-  &.isFilled {
-    svg {
-      fill: c.$colorBrandText;
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.module.scss

@@ -1,13 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: c.$grid;
-  padding: c.$grid * 2 0;
-  font-size: c.$fontSizeBodySmall;
-}
-
-.placeholder {
-  padding: c.$grid * 2 c.$grid * 2.5 c.$grid * 2 c.$grid * 14;
-}

package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.module.scss

@@ -1,92 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  position: relative;
-  color: c.$colorNeutralLighter;
-  display: flex;
-  flex-direction: column;
-
-  &.nested {
-    padding-left: c.$grid * 10;
-
-    .button {
-      color: c.$colorNeutralLight;
-    }
-  }
-
-  .favorite {
-    display: none;
-  }
-
-  .status {
-    display: inline-flex;
-    width: c.$grid * 4;
-    height: c.$grid * 4;
-    border-radius: 50%;
-    background-color: c.$colorError;
-
-    &.available {
-      background-color: c.$colorSuccess;
-    }
-  }
-
-  &.collapsed {
-    .status {
-      width: c.$grid * 2;
-      height: c.$grid * 2;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  &:hover,
-  &:active {
-    color: inherit;
-
-    .favorite {
-      display: block;
-    }
-  }
-}
-
-[class].button {
-  overflow: hidden;
-  width: 100%;
-  height: c.$grid * 12;
-  text-decoration: none;
-  text-align: left;
-  padding: c.$grid c.$grid * 3.5;
-  border-radius: c.$borderRadius;
-
-  .icon {
-    color: c.$colorNeutralLight;
-  }
-
-  &:hover,
-  &.active {
-    text-decoration: none;
-    color: c.$colorBrandText;
-    background-color: c.$colorBrandAccent;
-
-    .icon {
-      color: c.$colorBrandText;
-    }
-  }
-
-  .content {
-    padding: 0;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: c.$grid * 4;
-    justify-content: left;
-  }
-
-  .adornment {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: c.$grid * 2;
-  }
-}

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.module.scss

@@ -1,24 +0,0 @@
-@use 'sass:math';
-@use '../../../../styles/constants' as c;
-
-.root {
-  color: #353d49;
-  background-color: #e3e7ed;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  min-width: c.$grid * 4;
-  height: c.$grid * 4;
-  padding: math.div(c.$grid, 2);
-  font-size: c.$fontSizeBodyTiny;
-
-  &:hover {
-    color: #353d49;
-    background-color: #e3e7ed;
-  }
-
-  .content {
-    @include c.typographyBodyWeight('bold');
-  }
-}