@hazelcast/ui 2.0.4 → 3.0.0-canary.0

package/lib/components/TextField.module.scss

@@ -1,209 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-$inputHorizontalPadding: c.$grid * 3;
-$marginLeftWithIcon: c.$grid * 5;
-
-.container {
-  color: c.$colorText;
-  box-sizing: border-box;
-
-  @include c.typographyBodySmall;
-
-  .inputBlock {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .inputContainer {
-    position: relative;
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-    box-sizing: border-box;
-    height: c.$inputHeight;
-    background-color: c.$colorOverlayBackground;
-    border-radius: c.$borderRadius;
-  }
-
-  .inputIconContainer {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: $marginLeftWithIcon + $inputHorizontalPadding;
-  }
-
-  .inputTrailingIconContainer {
-    width: auto;
-    margin-right: c.$grid * 1.5;
-  }
-
-  .inputLeftIconContainer {
-    order: -1;
-  }
-
-  .inputIcon,
-  .inputIconTrailing {
-    pointer-events: none;
-  }
-
-  .inputIcon {
-    left: ($marginLeftWithIcon + $inputHorizontalPadding) * 0.5;
-  }
-
-  .inputIconTrailing {
-    right: -(c.$grid);
-    color: c.$colorPrimary;
-  }
-
-  // Here we go. Another border hack. Why?
-  // TextField is re-used for PasswordField. PasswordField is meant for passwords.
-  // Passwords are often handled by password managers.
-  // Password managers often add their own UI on top of the password inputs.
-  // To make our password visibility toggle and their UI not overlap,
-  // we have to make the actual input shorter than its visual representation.
-  // However, visually we still would like our users to see it as one unit.
-  // As result, we cannot apply border to the input itself (because it's shorter).
-  // We could have applied border styles to .inputContainer. But IE11 does not support :focus-within.
-  // So to properly apply focus styles we need a sibling element to the actual input that supports :focus.
-  // .borderOverlay is that very sibling element.
-  .borderOverlay {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    z-index: c.$zIndex100;
-    border-radius: c.$borderRadius;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    box-sizing: border-box;
-  }
-
-  input {
-    display: block;
-    flex: 1 1 auto;
-    background-color: transparent;
-    padding: 0 $inputHorizontalPadding;
-    margin: 0;
-    border: none;
-    box-sizing: border-box;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    height: 100%;
-    width: 100%;
-
-    &::placeholder {
-      color: c.$colorTextSecondary;
-    }
-  }
-
-  .clearButton {
-    display: inline-flex;
-    align-items: center;
-    margin-right: c.$grid * 1.5;
-  }
-
-  &.small {
-    .inputContainer {
-      height: c.$inputHeightSmall;
-    }
-  }
-
-  &.large {
-    .inputContainer {
-      height: c.$inputHeightLarge;
-    }
-  }
-
-  &.mockAutofill {
-    input {
-      @include h.mockChromeAutofill;
-    }
-  }
-
-  &.withIcon {
-    input {
-      padding-left: 0;
-    }
-  }
-
-  &.empty {
-    color: c.$colorTextSecondary;
-  }
-
-  input:hover,
-  input.hover {
-    & ~ .borderOverlay {
-      border-color: c.$colorPrimary;
-    }
-
-    & ~ .inputIconContainer > .inputIcon {
-      color: c.$colorPrimary;
-    }
-  }
-
-  &.hasError input {
-    & ~ .borderOverlay {
-      border-color: c.$colorError;
-    }
-  }
-
-  &.hasError label {
-    color: c.$colorError;
-  }
-
-  input:focus,
-  input.focus {
-    // Do not remove outline for high-contrast modes
-    // https://stackoverflow.com/a/52616313
-    outline: transparent solid c.$outlineWidth;
-
-    & ~ .borderOverlay {
-      @include h.outlineFormField;
-    }
-
-    & ~ .inputIconContainer > .inputIcon {
-      color: c.$colorPrimary;
-    }
-  }
-
-  // .hasError styles split in two groups to always color the icon with the error colors
-  // but the change the color of the border
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  &.hasError input {
-    ~ .inputIconContainer > .inputIcon {
-      color: c.$colorError;
-    }
-  }
-
-  &.disabled {
-    color: c.$colorTextSecondary;
-
-    .inputContainer {
-      background-color: c.$colorNeutral;
-    }
-
-    input {
-      & ~ .borderOverlay {
-        border-color: c.$colorNeutralLight;
-      }
-
-      & ~ .inputIconContainer > .inputIcon {
-        color: c.$colorTextSecondary;
-      }
-
-      & ~ .inputIconContainer > .inputIconTrailing {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-}
-
-@include h.withError;

package/lib/components/TimeField.module.scss

@@ -1,4 +0,0 @@
-.container {
-  display: inline-flex;
-  flex-direction: column;
-}

package/lib/components/Toast.module.scss

@@ -1,53 +0,0 @@
-@use '../../styles/constants' as c;
-
-.toast {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: c.$borderRadiusToast;
-  max-width: c.$toastMaxWidth;
-  padding: c.$grid * 1.5 c.$grid * 2.5;
-
-  .icon {
-    flex: 0 0 auto;
-    margin-right: c.$grid * 2.5;
-  }
-
-  .content {
-    @include c.typographyBodyNormal;
-
-    word-break: break-word;
-  }
-
-  .close {
-    margin-left: c.$grid * 2.5;
-  }
-
-  &.success {
-    background-color: c.$colorSuccessLight;
-    color: c.$colorText;
-  }
-
-  &.info {
-    background-color: c.$colorInfoLight;
-    color: c.$colorText;
-
-    .icon {
-      color: c.$colorText;
-    }
-  }
-
-  &.warning {
-    background-color: c.$colorWarningLight;
-    color: c.$colorText;
-
-    .icon {
-      color: c.$colorText;
-    }
-  }
-
-  &.critical {
-    background-color: c.$colorErrorLight;
-    color: c.$colorText;
-  }
-}

package/lib/components/Toggle.module.scss

@@ -1,175 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-@use 'sass:math';
-
-$height: c.$grid * 6;
-$width: c.$grid * 15;
-$labelMargin: c.$grid * 2.5;
-/* doiuse-disable calc */
-$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
-/* doiuse-enable calc */
-$trackBgOn: c.$colorSuccess;
-$trackBgOff: c.$colorNeutral;
-$knobBgOn: c.$colorNeutralWhite;
-$knobBgOff: c.$colorNeutralLighter;
-$knobRadius: c.$grid * 5;
-/* stylelint-disable  length-zero-no-unit */
-$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
-/* stylelint-enable */
-
-@keyframes switchOn {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-}
-
-@keyframes switchOff {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-}
-
-.wrapper {
-  position: relative;
-
-  input {
-    @include h.visuallyHidden;
-  }
-
-  // faux wrapping label
-  label {
-    cursor: pointer;
-    display: inline-flex; // for aligning with the .labelText
-    align-items: center;
-    color: c.$colorText;
-    vertical-align: middle;
-
-    @include c.typographyBodySmall;
-
-    &.disabled {
-      cursor: not-allowed;
-      color: c.$colorNeutralLight;
-    }
-  }
-
-  // actual text label
-  .labelText {
-    margin-right: $labelMargin;
-  }
-
-  .helperText {
-    margin-left: c.$grid * 1.5;
-  }
-
-  // the `track` (default off state)
-  .toggleTrack {
-    display: inline-block;
-    height: $height;
-    width: $width;
-    background: $trackBgOff;
-    border-radius: $trackBr;
-    position: relative;
-    border: c.$borderWidth solid transparent;
-    box-sizing: border-box;
-    color: c.$colorNeutralWhite;
-
-    &::before {
-      content: '';
-      display: inline-block;
-      height: $knobRadius;
-      width: $knobRadius;
-      background: $knobBgOff;
-      border-radius: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      /* doiuse-disable calc */
-      right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
-      /* doiuse-enable calc */
-      transition: right c.$transitionTimeMedium ease-in;
-    }
-  }
-
-  // track states
-  label.hover .toggleTrack,
-  label:hover .toggleTrack {
-    border-color: c.$colorPrimary;
-  }
-
-  label.error .toggleTrack {
-    border-color: c.$colorError;
-  }
-
-  label.disabled .toggleTrack {
-    background-color: c.$colorNeutralLight;
-    border-color: c.$colorNeutralLight;
-    box-shadow: none;
-    color: c.$colorNeutral;
-
-    &::before {
-      background: c.$colorNeutral;
-    }
-  }
-
-  label.focus .toggleTrack,
-  input:focus + label .toggleTrack {
-    @include h.outlineFormField;
-  }
-
-  // track ON state
-  input:checked + label .toggleTrack {
-    background: $trackBgOn;
-
-    &::before {
-      background: $knobBgOn;
-      right: $knobHorizontalOffset;
-    }
-  }
-
-  input:checked + label.disabled .toggleTrack {
-    background-color: c.$colorSuccessDark;
-    border-color: c.$colorNeutralLight;
-    box-shadow: none;
-    color: c.$colorNeutral;
-
-    &::before {
-      background-color: c.$colorNeutral;
-    }
-  }
-
-  .toggleTrackText {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  // the "OFF" text
-  input:not(:checked) + label .toggleTrackText {
-    animation: switchOff c.$transitionTimeMedium ease-in;
-    right: c.$grid * 2;
-    left: auto;
-    color: c.$colorTextSecondary;
-  }
-
-  // the "ON" text
-  input:checked + label .toggleTrackText {
-    animation: switchOn c.$transitionTimeMedium ease-in;
-    right: auto;
-    left: c.$grid * 1.5;
-    color: c.$colorNeutralWhite;
-  }
-}
-
-@include h.withError;

package/lib/components/Tooltip.module.scss

@@ -1,175 +0,0 @@
-@use 'sass:math';
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.tooltipSr {
-  @include h.visuallyHidden;
-}
-
-$tooltipArrowSize1-3: math.div(c.$tooltipArrowSize, 3);
-$tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
-
-@mixin arrow($position, $color, $borderColor) {
-  @if $position == bottom {
-    > .arrow {
-      top: 0;
-
-      &::before,
-      &::after {
-        border-left: c.$tooltipArrowSize solid transparent;
-        border-right: c.$tooltipArrowSize solid transparent;
-        top: 0;
-        left: 50%;
-        margin-left: -(c.$tooltipArrowSize);
-      }
-
-      &::before {
-        border-bottom: c.$tooltipArrowSize solid $color;
-        margin-top: -(c.$tooltipArrowSize);
-      }
-
-      &::after {
-        border-bottom: c.$tooltipArrowSize solid $borderColor;
-        transform: translateY(-($tooltipArrowSize2-3));
-      }
-    }
-  } @else if $position == right {
-    > .arrow {
-      left: 0;
-
-      &::before,
-      &::after {
-        border-top: c.$tooltipArrowSize solid transparent;
-        border-bottom: c.$tooltipArrowSize solid transparent;
-        top: 50%;
-        left: 0;
-        margin-top: -(c.$tooltipArrowSize);
-      }
-
-      &::before {
-        border-right: c.$tooltipArrowSize solid $color;
-        margin-left: -(c.$tooltipArrowSize);
-      }
-
-      &::after {
-        border-right: c.$tooltipArrowSize solid $borderColor;
-        transform: translateX(-($tooltipArrowSize2-3));
-      }
-    }
-  } @else if $position == left {
-    > .arrow {
-      right: 0;
-
-      &::before,
-      &::after {
-        border-top: c.$tooltipArrowSize solid transparent;
-        border-bottom: c.$tooltipArrowSize solid transparent;
-        top: 50%;
-        left: 100%;
-        margin-top: -(c.$tooltipArrowSize);
-      }
-
-      &::before {
-        border-left: c.$tooltipArrowSize solid $color;
-      }
-
-      &::after {
-        border-left: c.$tooltipArrowSize solid $borderColor;
-        transform: translateX(-($tooltipArrowSize1-3));
-      }
-    }
-  } @else {
-    > .arrow {
-      bottom: 0;
-
-      &::before,
-      &::after {
-        border-left: c.$tooltipArrowSize solid transparent;
-        border-right: c.$tooltipArrowSize solid transparent;
-        top: 100%;
-        left: 50%;
-        margin-left: -(c.$tooltipArrowSize);
-      }
-
-      &::before {
-        border-top: c.$tooltipArrowSize solid $color;
-      }
-
-      &::after {
-        border-top: c.$tooltipArrowSize solid $borderColor;
-        transform: translateY(-($tooltipArrowSize1-3));
-      }
-    }
-  }
-}
-
-@mixin arrowPlacements($color: c.$colorNeutralLight, $borderColor: c.$colorNeutralLighter) {
-  &[data-popper-placement^='top'] {
-    @include arrow(top, $color, $borderColor);
-  }
-
-  &[data-popper-placement^='right'] {
-    @include arrow(right, $color, $borderColor);
-  }
-
-  &[data-popper-placement^='bottom'] {
-    @include arrow(bottom, $color, $borderColor);
-  }
-
-  &[data-popper-placement^='left'] {
-    @include arrow(left, $color, $borderColor);
-  }
-}
-
-.overlay {
-  @include c.typographyBodySmall;
-
-  position: relative;
-  max-width: c.$tooltipMaxWidth;
-  padding: c.$grid * 3;
-  background: c.$colorNeutralLighter;
-  border: c.$borderWidth solid c.$colorNeutralLight;
-  border-radius: c.$borderRadius;
-  color: c.$colorText;
-  word-break: break-all;
-
-  &.hidden {
-    visibility: hidden;
-
-    // important is needed to override inline style
-    top: -99999px !important;
-    left: -99999px !important;
-  }
-
-  &.secondary {
-    border: none;
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorTextSubdued;
-
-    @include arrowPlacements(c.$colorTextSubdued, transparent);
-  }
-
-  &.dark {
-    border: none;
-    color: c.$colorBrandText;
-    background-color: c.$colorBrandAccent;
-
-    @include arrowPlacements(c.$colorBrandAccent, transparent);
-  }
-
-  > .arrow {
-    position: absolute;
-    z-index: c.$zIndex100;
-    display: block;
-    width: c.$tooltipArrowSize;
-    height: c.$tooltipArrowSize;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-    }
-  }
-
-  @include arrowPlacements;
-}

package/lib/components/TruncatedText.module.scss

@@ -1,9 +0,0 @@
-@use '../../styles/helpers' as h;
-
-.truncatedText {
-  @include h.overflowEllipsis;
-}
-
-.multiline {
-  @include h.multilineOverflowEllipsis;
-}

package/lib/hooks/useResizeAware.d.ts

@@ -1,3 +0,0 @@
-export declare const useResizeAware: (el: HTMLElement | undefined | null, callback: () => void, options?: {
-    delay: number;
-}) => void;

package/lib/hooks/useResizeAware.js

@@ -1,25 +0,0 @@
-import { useMemo, useEffect } from 'react';
-import debounce from 'lodash/debounce';
-import { useRefValue } from './useRefValue';
-export const useResizeAware = (el, callback, options = { delay: 200 }) => {
-    const getOnResize = useRefValue(callback);
-    const onResize = useMemo(() => debounce(() => {
-        const cb = getOnResize();
-        if (cb) {
-            cb();
-        }
-    }, options.delay), [getOnResize, options.delay]);
-    const observer = useMemo(() => new ResizeObserver(onResize), [onResize]);
-    useEffect(() => {
-        if (el) {
-            observer.observe(el);
-        }
-        return () => {
-            onResize.cancel();
-            if (el) {
-                observer.unobserve(el);
-            }
-        };
-    }, [el, observer, onResize]);
-};
-//# sourceMappingURL=useResizeAware.js.map

package/lib/hooks/useResizeAware.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResizeAware.js","sourceRoot":"","sources":["../../src/hooks/useResizeAware.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAkC,EAAE,QAAoB,EAAE,OAAO,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IACnH,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;QAExB,IAAI,EAAE,EAAE,CAAC;YACP,EAAE,EAAE,CAAA;QACN,CAAC;IACH,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EACnB,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAC7B,CAAA;IACD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,EAAE,CAAC;YACP,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACtB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,MAAM,EAAE,CAAA;YACjB,IAAI,EAAE,EAAE,CAAC;gBACP,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;YACxB,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;AAC9B,CAAC,CAAA"}