@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/Toast.js

@@ -1,56 +0,0 @@
-import React, { useCallback } from 'react';
-import cn from 'classnames';
-import { AlertTriangle, CheckCircle, AlertCircle, Info, X } from 'react-feather';
-import useKey from 'react-use/lib/useKey';
-import { escKeyFilterPredicate } from './utils/keyboard';
-import { IconButton } from './IconButton';
-import { Icon } from './Icon';
-import styles from './Toast.module.scss';
-export const ToastIcon = {
-    success: {
-        icon: CheckCircle,
-        ariaLabel: 'Check circle icon',
-    },
-    info: {
-        icon: Info,
-        ariaLabel: 'Info circle icon',
-    },
-    warning: {
-        icon: AlertTriangle,
-        ariaLabel: 'Warning triangle icon',
-    },
-    critical: {
-        icon: AlertCircle,
-        ariaLabel: 'Info critical circle icon',
-    },
-};
-/**
- * ### Purpose
- * A toast is a non-modal dialog that appears and disappears in the span of a few seconds. It may also optionally have a small close “X”. Typically, toast messages display one or two-line non-critical messages that do not require user interaction. For example: In a map client, once you hit the search button the toast may display a message that looks something like “Searching for location” which disappears once the matching results or “no results found” is displayed.
- *
- * ### Accessibility
- * Without taking extra steps, toasts can have numerous accessibility issues that can impact both people with and without disabilities.
- *
- * ### Note
- * The toast is designed to be integrated with https://fkhadra.github.io/react-toastify/introduction/
- */
-export const Toast = ({ type, content, dismissableByEscKey = true, closeToast, className }) => {
-    const { icon, ariaLabel } = ToastIcon[type];
-    const closeByEsc = useCallback((nativeEvent) => {
-        if (dismissableByEscKey) {
-            closeToast === null || closeToast === void 0 ? void 0 : closeToast();
-            nativeEvent.stopImmediatePropagation();
-        }
-    }, [closeToast, dismissableByEscKey]);
-    useKey(escKeyFilterPredicate, closeByEsc, { options: { once: true } }, [closeByEsc, dismissableByEscKey]);
-    return (React.createElement("div", { className: cn(styles.toast, {
-            [styles.success]: type === 'success',
-            [styles.info]: type === 'info',
-            [styles.warning]: type === 'warning',
-            [styles.critical]: type === 'critical',
-        }, className) },
-        React.createElement(Icon, { "data-test": "toast-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
-        React.createElement("div", { "data-test": "toast-content", className: styles.content }, content),
-        closeToast && (React.createElement(IconButton, { "data-test": "toast-close", kind: "transparent", className: styles.close, ariaLabel: "Close icon", icon: X, onClick: closeToast }))));
-};
-//# sourceMappingURL=Toast.js.map

package/lib/Toast.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAElG,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAUD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE;YACvB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;SACvC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACzF,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACC,aAAa,EACvB,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,UAAU,GACnB,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/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/Toggle.d.ts

@@ -1,21 +0,0 @@
-import React, { FC, FocusEvent, ChangeEvent } from 'react';
-import { DataTestProp } from '@hazelcast/helpers';
-import { HelpProps } from './Help';
-type ToggleCoreProps = {
-    name: string;
-    value?: string;
-    checked?: boolean;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    error?: string;
-};
-export type ToggleExtraProps = {
-    label?: React.ReactNode;
-    helperText?: HelpProps['helperText'];
-    disabled?: boolean;
-    className?: string;
-    classNameLabel?: string;
-};
-export type ToggleProps = ToggleCoreProps & ToggleExtraProps & DataTestProp;
-export declare const Toggle: FC<ToggleProps>;
-export {};

package/lib/Toggle.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { useUID } from 'react-uid';
-import { Error, errorId } from './Error';
-import { Help, helpTooltipId } from './Help';
-import styles from './Toggle.module.scss';
-export const Toggle = (props) => {
-    const { name, value, onChange, onBlur, error, checked, label, helperText, disabled, className, classNameLabel, 'data-test': dataTest, } = props;
-    const id = useUID();
-    return (React.createElement("div", { className: cn(styles.wrapper, className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
-        React.createElement("input", { type: "checkbox", id: id, name: name, checked: !!checked, onChange: onChange, onBlur: onBlur, value: value, disabled: disabled, "aria-invalid": !!error, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
-        React.createElement("label", { className: cn({
-                [styles.error]: !!error,
-                [styles.disabled]: disabled,
-            }, classNameLabel), htmlFor: id },
-            label && React.createElement("span", { className: styles.labelText }, label),
-            React.createElement("span", { className: styles.toggleTrack },
-                React.createElement("span", { className: styles.toggleTrackText }, checked ? 'ON' : 'OFF'))),
-        helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText }),
-        React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
-};
-//# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GACtB,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAQ;YAE3D,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAQ,CACnE,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QAE3F,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5E,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/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/ToggleFormik.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-import { FieldValidatorGeneric } from './utils/formik';
-import { ExtractKeysOfValueType } from './utils/types';
-import { ToggleExtraProps } from './Toggle';
-export type ToggleFormikProps<V extends object> = ToggleExtraProps & {
-    name: ExtractKeysOfValueType<V, boolean>;
-    validate?: FieldValidatorGeneric<boolean>;
-};
-export declare const ToggleFormik: <V extends object>({ name, validate, ...props }: ToggleFormikProps<V>) => ReactElement;

package/lib/ToggleFormik.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { useField } from 'formik';
-import { getFieldError } from './utils/formik';
-import { Toggle } from './Toggle';
-export const ToggleFormik = ({ name, validate, ...props }) => {
-    const [field, meta] = useField({
-        name,
-        validate,
-    });
-    return React.createElement(Toggle, { ...props, name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) });
-};
-//# sourceMappingURL=ToggleFormik.js.map

package/lib/ToggleFormik.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../src/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGrE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC5I,CAAC,CAAA"}

package/lib/Tooltip.d.ts

@@ -1,41 +0,0 @@
-import React, { FC, ReactNode, MutableRefObject, ReactText, MouseEventHandler, CSSProperties } from 'react';
-import { Placement } from '@popperjs/core';
-import { usePopper } from 'react-popper';
-import { PortalContainer } from './utils/portal';
-export type PopperRef = ReturnType<typeof usePopper>;
-export type TooltipProps = {
-    content: ReactNode;
-    id?: string;
-    hideTimeoutDuration?: number;
-    offset?: number;
-    arrow?: boolean;
-    color?: 'dark';
-    padding?: number;
-    placement?: Placement;
-    visible?: boolean;
-    hoverAbleTooltip?: boolean;
-    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => ReactNode;
-    popperRef?: MutableRefObject<PopperRef | undefined>;
-    updateToken?: ReactText | boolean;
-    tooltipContainer?: PortalContainer;
-    wordBreak?: CSSProperties['wordBreak'];
-    disabled?: boolean;
-    zIndex?: number;
-};
-/**
- * ### Purpose
- * Useful when you need to display additional information/actionable content.
- * A tooltip with this content is displayed when user hovers over a target element.
- *
- * ### General info
- * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
- * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
- * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
- * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
- * - Use `updateToken` prop to update the tooltip position.
- * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
- *
- * ### Usage
- * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
- */
-export declare const Tooltip: FC<TooltipProps>;

package/lib/Tooltip.js

@@ -1,140 +0,0 @@
-import React, { useCallback, useState, useImperativeHandle, useLayoutEffect, createContext, useContext, useMemo, useRef, useEffect, } from 'react';
-import ReactDOM from 'react-dom';
-import { usePopper } from 'react-popper';
-import cn from 'classnames';
-import { containsElement } from './hooks';
-import { getPortalContainer } from './utils/portal';
-import styles from './Tooltip.module.scss';
-const TooltipContext = createContext(null);
-/**
- * ### Purpose
- * Useful when you need to display additional information/actionable content.
- * A tooltip with this content is displayed when user hovers over a target element.
- *
- * ### General info
- * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
- * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
- * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
- * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
- * - Use `updateToken` prop to update the tooltip position.
- * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
- *
- * ### Usage
- * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
- */
-export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, arrow = true, color, }) => {
-    const [isShown, setShown] = useState(false);
-    const timeoutRef = useRef(null);
-    const context = useContext(TooltipContext);
-    const clearHideTimeout = useCallback(() => {
-        const timeoutId = timeoutRef.current;
-        context === null || context === void 0 ? void 0 : context.clearHideTimeout();
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-    }, [context]);
-    /*
-     * We're using useState instead of useRef because react-popper package has some issues with useRef:
-     * https://github.com/popperjs/react-popper/issues/241#issuecomment-591411605
-     */
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const modifiers = useMemo(() => {
-        const result = [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, offset],
-                },
-            },
-        ];
-        if (arrow) {
-            result.push({
-                name: 'arrow',
-                options: {
-                    element: arrowElement,
-                    padding,
-                },
-            });
-        }
-        return result;
-    }, [arrow, padding, offset, arrowElement]);
-    const popper = usePopper(referenceElement, popperElement, {
-        placement,
-        modifiers,
-    });
-    useImperativeHandle(popperRef, () => popper, [popper]);
-    const onMouseEnter = useCallback(() => {
-        clearHideTimeout();
-        setShown(true);
-    }, [clearHideTimeout]);
-    const onMouseLeave = useCallback((event) => {
-        const e = event;
-        const { relatedTarget } = e !== null && e !== void 0 ? e : {};
-        timeoutRef.current = setTimeout(() => {
-            if (relatedTarget) {
-                if (!containsElement(context === null || context === void 0 ? void 0 : context.referenceElement, relatedTarget) &&
-                    !containsElement(context === null || context === void 0 ? void 0 : context.popperElement, relatedTarget)) {
-                    context === null || context === void 0 ? void 0 : context.hide();
-                }
-            }
-            setShown(false);
-        }, hideTimeoutDuration);
-    }, [hideTimeoutDuration, context]);
-    const contextValue = useMemo(() => ({
-        popperElement,
-        referenceElement,
-        hide: onMouseLeave,
-        clearHideTimeout,
-    }), [onMouseLeave, clearHideTimeout, popperElement, referenceElement]);
-    // Makes sure "visible" prop can override local "isShown" state
-    const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : !disabled && isShown;
-    // Update the tooltip's position (useful when resizing table columns)
-    useLayoutEffect(() => {
-        var _a;
-        if (content) {
-            void ((_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isTooltipVisible, updateToken]);
-    useEffect(() => {
-        return () => {
-            clearHideTimeout();
-        };
-    }, [clearHideTimeout]);
-    useEffect(() => {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter, false);
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave, false);
-        return () => {
-            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
-            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [referenceElement, onMouseEnter, onMouseLeave]);
-    useEffect(() => {
-        if (hoverAbleTooltip) {
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter, false);
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave, false);
-        }
-        return () => {
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
-            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [popperElement, onMouseEnter, onMouseLeave, hoverAbleTooltip]);
-    const tooltipPortalContainer = getPortalContainer(tooltipContainer, referenceElement);
-    return (React.createElement(TooltipContext.Provider, { value: contextValue },
-        children(setReferenceElement, onMouseEnter, (e) => {
-            onMouseLeave(e);
-        }),
-        content !== undefined && (React.createElement(React.Fragment, null,
-            React.createElement("span", { ...(id && { id }), className: styles.tooltipSr, role: "tooltip", "data-test": "tooltip-sr" }, content),
-            tooltipPortalContainer &&
-                ReactDOM.createPortal(React.createElement(React.Fragment, null,
-                    React.createElement("span", { ref: setPopperElement, className: cn(styles.overlay, {
-                            [styles.dark]: color === 'dark',
-                            [styles.hidden]: !isTooltipVisible,
-                        }), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
-                        content,
-                        arrow && (React.createElement("span", { ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow", ...popper.attributes.arrow })))), tooltipPortalContainer)))));
-};
-//# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"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"}