@hazelcast/ui 2.0.5-canary.0 → 3.0.1-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,44 +0,0 @@
-@use 'sass:math';
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.tooltipSr {
-  @include h.visuallyHidden;
-}
-
-@mixin arrowPlacements($color) {
-  .arrow {
-    fill: $color;
-  }
-}
-
-.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;
-
-  &.secondary {
-    border: none;
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorTextSubdued;
-
-    @include arrowPlacements(c.$colorTextSubdued);
-  }
-
-  &.dark {
-    border: none;
-    color: c.$colorBrandText;
-    background-color: c.$colorBrandAccent;
-
-    @include arrowPlacements(c.$colorBrandAccent);
-  }
-
-  @include arrowPlacements(c.$colorNeutralLight);
-}

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/test-helpers/render.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-import { RenderResult } from '@testing-library/react';
-import { JestAxe } from 'jest-axe';
-type AxeOptions = Parameters<JestAxe>[1];
-export declare const axeDefaultOptions: AxeOptions;
-interface RenderAndCheckA11YOptions {
-    axeOptions?: AxeOptions;
-}
-export declare const renderAndCheckA11Y: <P>(node: ReactElement<P>, { axeOptions }?: RenderAndCheckA11YOptions) => Promise<RenderResult>;
-export {};

package/lib/test-helpers/render.js

@@ -1,24 +0,0 @@
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-expect.extend(toHaveNoViolations);
-export const axeDefaultOptions = {
-    rules: {
-        // We are testing small units. They might not contain landmarks
-        region: {
-            enabled: false,
-        },
-        // We are using chrome-off for SelectField
-        'autocomplete-valid': { enabled: false },
-        // TODO: Fix later
-        'aria-tooltip-name': { enabled: false },
-    },
-};
-export const renderAndCheckA11Y = async (node, { axeOptions } = {
-    axeOptions: axeDefaultOptions,
-}) => {
-    const result = render(node);
-    const results = await axe(result.container, axeOptions);
-    expect(results).toHaveNoViolations();
-    return result;
-};
-//# sourceMappingURL=render.js.map

package/lib/test-helpers/render.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/test-helpers/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAgB,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,GAAG,EAAW,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAA;AAGjC,MAAM,CAAC,MAAM,iBAAiB,GAAe;IAC3C,KAAK,EAAE;QACL,+DAA+D;QAC/D,MAAM,EAAE;YACN,OAAO,EAAE,KAAK;SACf;QACD,0CAA0C;QAC1C,oBAAoB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;QACxC,kBAAkB;QAClB,mBAAmB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;KACxC;CACF,CAAA;AAMD,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,IAAqB,EACrB,EAAE,UAAU,KAAgC;IAC1C,UAAU,EAAE,iBAAiB;CAC9B,EACsB,EAAE;IACzB,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAE3B,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;IACvD,MAAM,CAAC,OAAO,CAAC,CAAC,kBAAkB,EAAE,CAAA;IAEpC,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/lib/test-helpers/time.d.ts

@@ -1 +0,0 @@
-export declare const getFixedTimezoneDate: (timestamp: number, timeZone?: string) => Date;

package/lib/test-helpers/time.js

@@ -1,2 +0,0 @@
-export const getFixedTimezoneDate = (timestamp, timeZone = 'Europe/Istanbul') => new Date(new Date(timestamp).toLocaleString('en-US', { timeZone, hour12: false }));
-//# sourceMappingURL=time.js.map

package/lib/test-helpers/time.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/test-helpers/time.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,QAAQ,GAAG,iBAAiB,EAAQ,EAAE,CAC5F,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA"}

package/lib/test-helpers/utils.d.ts

@@ -1,5 +0,0 @@
-export declare const jestFnControlledPromise: () => {
-    resolve: (arg?: unknown) => void;
-    promise: Promise<unknown>;
-    fn: jest.Mock;
-};

package/lib/test-helpers/utils.js

@@ -1,11 +0,0 @@
-export const jestFnControlledPromise = () => {
-    const res = {};
-    res.fn = jest.fn().mockImplementation(() => {
-        res.promise = new Promise((resolveInternal) => {
-            res.resolve = resolveInternal;
-        });
-        return res.promise;
-    });
-    return res;
-};
-//# sourceMappingURL=utils.js.map

package/lib/test-helpers/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/test-helpers/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAM1C,MAAM,GAAG,GAAG,EAAS,CAAA;IACrB,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;QACzC,GAAG,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,eAAe,EAAE,EAAE;YAC5C,GAAG,CAAC,OAAO,GAAG,eAAe,CAAA;QAC/B,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,CAAC,OAAO,CAAA;IACpB,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}