@hazelcast/ui 4.0.1-canary.9 → 4.0.1

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/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/AppSidebarSection/AppSidebarSection.module.scss

@@ -1,58 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-$transitionLength: 125ms;
-$sideBarMenuSectionTransitionMaxHeight: 1000px;
-
-.root {
-  display: flex;
-  gap: c.$grid * 2;
-  align-items: stretch;
-  flex-direction: column;
-  padding-top: c.$grid * 2;
-  border-top: 1px solid transparent;
-
-  h3 {
-    margin: 0;
-    color: c.$colorNeutralLight;
-    font-size: c.$fontSizeBodySmall;
-  }
-}
-
-.collapsed {
-  border-color: c.$colorNeutralLight;
-
-  h3 {
-    display: none;
-  }
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: c.$grid;
-}
-
-.icon {
-  margin-left: auto;
-  color: c.$colorNeutralLighter;
-}
-
-.toggle {
-  margin-bottom: c.$grid;
-
-  .adornment {
-    margin-right: -#{c.$grid * 1.5};
-  }
-}
-
-.transitionLeave {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height $transitionLength ease-out;
-}
-
-.transitionEnter {
-  max-height: $sideBarMenuSectionTransitionMaxHeight;
-  overflow: visible;
-  transition: max-height $transitionLength ease-in;
-}

package/lib/components/Calendar/Calendar.module.scss

@@ -1,185 +0,0 @@
-@use '../../../styles/constants' as c;
-@use '../../../styles/helpers' as h;
-
-$inputMaxWidth: 300px;
-$inputMinWidth: 118px;
-$inputMinWidthWithTime: 183px;
-$inputPadding: c.$grid * 3;
-
-/*
- * Rest of styles
- */
-.container {
-  width: $inputMaxWidth;
-  min-width: $inputMinWidth;
-
-  :global .react-datepicker-wrapper {
-    width: 100%;
-  }
-
-  &.time {
-    min-width: $inputMinWidthWithTime;
-  }
-}
-
-.popper {
-  :global(.hz-date-picker-popper-container) {
-    /*
-  * Internal styles override for those that cannot be
-  * overridden using classNames composition
-  */
-    :global .react-datepicker-popper {
-      z-index: c.$zIndex200;
-    }
-
-    :global .react-datepicker {
-      padding: $inputPadding;
-
-      :global .react-datepicker__header {
-        margin: 0;
-        padding: 0;
-        background-color: c.$colorNeutralLighter;
-        border: none;
-        border-radius: 0;
-
-        :global .react-datepicker__day-names {
-          margin-bottom: c.$grid;
-
-          :global .react-datepicker__day-name {
-            width: c.$grid * 8;
-            height: c.$grid * 8;
-            text-align: center;
-            vertical-align: middle;
-            line-height: c.$grid * 8 !important;
-            margin: 0;
-            color: c.$colorText;
-
-            @include c.typographyBodySmall('bold');
-
-            &:not(:last-of-type) {
-              margin-right: c.$grid * 2;
-            }
-          }
-        }
-      }
-
-      :global .react-datepicker__month {
-        /*
-         * Note: The calendar part is asymmetrical by design
-         * It's padded by 2 extra px from the left
-         */
-        margin: 0 0 0 (c.$grid * 0.5);
-
-        :global .react-datepicker__week {
-          &:not(:last-of-type) {
-            margin-bottom: c.$grid * 2;
-          }
-
-          /*
-           * Note:
-           * We need to use :global override here, as 'renderCustomDay' only allows us to override
-           * the child of this element, which does not allow us to touch the styles properly
-           *
-           * Source styles:
-           * https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
-           */
-          :global .react-datepicker__day {
-            border-radius: c.$grid;
-            width: c.$grid * 8;
-            height: c.$grid * 8;
-            background-color: c.$colorNeutralWhite;
-            color: c.$colorTextSecondary;
-            text-align: center;
-            vertical-align: middle;
-            line-height: c.$grid * 8 !important;
-            margin: 0;
-
-            // Do not remove outline for high-contrast modes
-            // https://stackoverflow.com/a/52616313
-            outline: transparent solid c.$outlineWidth;
-
-            @include c.typographyBodySmall;
-
-            &--today {
-              @include c.typographyBodySmall('bold');
-            }
-
-            &--in-selecting-range,
-            &--in-range {
-              // TODO: Improvised colour, consult with @Pawel
-              background-color: c.$colorInfoLight;
-              color: c.$colorNeutralWhite;
-            }
-
-            &--selected {
-              background-color: c.$colorPrimaryLight;
-              color: c.$colorNeutralWhite;
-
-              // Note: Disable default browser outline, force our only on :focus
-
-              @include c.typographyBodySmall('bold');
-            }
-
-            &--disabled {
-              cursor: default;
-              color: c.$colorNeutral;
-            }
-
-            &:focus-visible {
-              @include h.outlineSimple;
-            }
-
-            &:not(:last-of-type) {
-              margin-right: c.$grid * 2;
-            }
-          }
-        }
-      }
-
-      :global .react-datepicker__input-time-container {
-        margin: 0;
-        padding: 0;
-
-        :global .react-datepicker-time__caption {
-          display: none;
-        }
-
-        :global .react-datepicker-time__input-container {
-          margin: 0 c.$grid 0 c.$grid * 5;
-
-          :global .react-datepicker-time__input {
-            margin: 0;
-
-            input {
-              width: auto;
-            }
-          }
-        }
-      }
-    }
-
-    .calendar {
-      display: flex;
-      flex-direction: row;
-      border: c.$borderWidth solid c.$colorNeutralLight;
-      background-color: c.$colorNeutralLighter;
-      box-sizing: border-box;
-
-      .headerContainer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
-        margin-bottom: c.$separatorWidth;
-
-        .headerMonthAndYear {
-          color: c.$colorTextSecondary;
-
-          @include c.typographyBodySmall('bold');
-        }
-      }
-    }
-  }
-}

package/lib/components/Calendar/CalendarRange.module.scss

@@ -1,21 +0,0 @@
-@use '../../../styles/constants' as c;
-
-.container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-  &.vertical {
-    flex-direction: column;
-    gap: c.$grid * 4;
-  }
-
-  .arrowRight {
-    color: c.$colorNeutralLight;
-    margin: 0 c.$grid * 2 c.$grid * 2;
-
-    &.small {
-      margin-bottom: c.$grid * 0.75;
-    }
-  }
-}

package/lib/components/Card.module.scss

@@ -1,92 +0,0 @@
-@use '../../styles/constants' as c;
-
-$padding: c.$grid * 5;
-
-.wrapper {
-  background: c.$colorNeutralWhite;
-
-  .heading {
-    display: flex;
-    align-items: center;
-    margin-bottom: c.$grid * 5;
-
-    .icon {
-      margin-right: c.$grid * 2.5;
-    }
-
-    .title {
-      margin: 0;
-
-      &.space {
-        margin-right: c.$grid * 2.5;
-      }
-    }
-  }
-
-  .separator {
-    width: 100%;
-    height: 1px;
-    margin-top: c.$grid * 4;
-    background: c.$colorNeutral;
-  }
-
-  .content {
-    padding-top: c.$grid * 6;
-    @include c.typographyBodyNormal;
-  }
-
-  .caption {
-    display: flex;
-    margin-bottom: $padding;
-
-    & > * {
-      flex: 1;
-    }
-  }
-}
-
-.bordered {
-  padding: $padding;
-  border-radius: c.$borderRadius;
-  border: c.$borderWidth solid c.$colorNeutral;
-
-  .heading {
-    @include c.typographyH3;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-
-    .icon {
-      margin-right: c.$grid * 2.5;
-    }
-
-    .title {
-      margin: 0;
-      font-size: c.$fontSizeBodyNormal !important;
-      line-height: c.$lineHeightBodyNormal !important;
-
-      &.space {
-        margin-right: c.$grid * 2.5;
-      }
-    }
-  }
-
-  .content {
-    @include c.typographyBodyNormal;
-
-    margin-top: c.$grid * 4;
-    padding: 0;
-  }
-
-  .caption {
-    margin: (-$padding) (-$padding) $padding;
-  }
-}
-
-.noTitle {
-  .content {
-    margin-top: 0;
-    padding-top: 0;
-  }
-}

package/lib/components/Carousel.module.scss

@@ -1,43 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-@include h.withError;
-
-.wrapper {
-  margin-left: c.$grid * 10;
-  margin-right: c.$grid * 10;
-  margin-bottom: c.$grid * 2;
-}
-
-.nextButtonClassName {
-  left: c.$grid * 12;
-}
-
-.prevButtonClassName {
-  right: c.$grid * 12;
-}
-
-.nextButtonClassName,
-.prevButtonClassName {
-  padding: 0 !important;
-  position: relative;
-  height: 40px;
-
-  &:focus-visible {
-    @include h.outlineAround;
-  }
-}
-
-.pagingDotsClassName {
-  position: relative;
-  top: c.$grid * 7;
-  margin-left: c.$grid * 0.5;
-  margin-right: c.$grid * 0.5;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: c.$grid * 1.5;
-
-  &:focus-visible {
-    @include h.outlineAround;
-  }
-}

package/lib/components/ContextMenu.module.scss

@@ -1,37 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.root {
-  position: absolute;
-  padding: c.$grid 0;
-  background: c.$colorNeutralWhite;
-  border-radius: c.$borderRadius;
-  border: c.$borderWidth solid c.$colorNeutral;
-  z-index: c.$zIndex2000;
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  flex-grow: 1;
-  flex-shrink: 0;
-  background: none;
-  padding: c.$grid c.$grid * 4;
-  margin: 0;
-  cursor: pointer;
-  border: none;
-  text-align: left;
-
-  &:focus-visible {
-    @include h.outlineSimple;
-  }
-
-  &:hover {
-    background: c.$colorNeutral;
-  }
-}
-
-.hidden {
-  top: -9999999999px;
-  left: -999999999px;
-}

package/lib/components/EmptyState.module.scss

@@ -1,87 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-
-  .content {
-    .title {
-      margin: c.$grid * 4.5 0 0 0;
-
-      @include c.typographyBodyNormal('bold' !important);
-    }
-
-    .description {
-      color: c.$colorTextSecondary;
-      margin: c.$grid 0 0 0;
-
-      @include c.typographyBodySmall;
-    }
-
-    .action {
-      flex: 1;
-      min-width: c.$emptyStateButtonMinWidthNormal;
-      margin-top: c.$grid * 5;
-    }
-  }
-
-  // Size
-  &.large {
-    .content {
-      .title {
-        margin-top: c.$grid * 5.5;
-      }
-
-      .description {
-        margin-top: c.$grid * 2;
-
-        @include c.typographyBodyNormal;
-      }
-
-      .action {
-        min-width: c.$emptyStateButtonMinWidthLarge;
-        margin-top: c.$grid * 6;
-      }
-    }
-  }
-
-  // Direction
-  &.horizontal {
-    flex: 1;
-    flex-direction: row;
-    text-align: start;
-
-    .icon {
-      flex: 0 0 auto;
-      align-self: flex-start;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      margin-left: c.$grid * 2;
-
-      .title {
-        margin: 0;
-
-        @include c.typographyBodyNormal('bold' !important);
-      }
-
-      .description {
-        margin-top: c.$grid;
-
-        @include c.typographyBodySmall;
-      }
-
-      .action {
-        align-self: flex-start;
-        min-width: auto;
-        margin: c.$grid 0 0 0;
-      }
-    }
-  }
-}

package/lib/components/Error.module.scss

@@ -1,12 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  @include c.typographyBodySmall;
-
-  color: c.$colorError;
-  display: none;
-
-  &.hasError {
-    display: block;
-  }
-}

package/lib/components/FieldHeader.module.scss

@@ -1,20 +0,0 @@
-@use '../../styles/constants' as c;
-
-.root {
-  display: flex;
-  margin-bottom: c.$grid;
-}
-
-.label {
-  flex-shrink: 0;
-  white-space: pre-wrap;
-
-  &.small {
-    @include c.typographyBodySmall;
-  }
-}
-
-.helperText {
-  flex-shrink: 0;
-  margin-top: c.$grid * 0.5;
-}

package/lib/components/Help.module.scss

@@ -1,9 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  display: inline-flex;
-  vertical-align: middle;
-  line-height: 1;
-  padding-left: c.$grid;
-  padding-right: c.$grid;
-}