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

package/lib/components/Carousel.module.scss

@@ -0,0 +1,43 @@
+@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/CenteredLoader.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DataTestProp } from '../../src';
+import { LoaderProps } from './Loader';
+export type CenteredLoaderProps = LoaderProps & DataTestProp;
+export declare const CenteredLoader: FC<CenteredLoaderProps>;

package/lib/components/CenteredLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenteredLoader.js","sourceRoot":"","sources":["../../src/components/CenteredLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAGjD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,WAAW,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,QAAQ;IACnD,oBAAC,MAAM,OAAK,KAAK,GAAI,CACjB,CACP,CAAA"}

package/lib/components/CenteredLoader.module.scss

@@ -0,0 +1,11 @@
+@use '../../styles/constants' as c;
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  color: c.$colorTextSecondary;
+}

package/lib/components/Checkbox.d.ts

@@ -0,0 +1,35 @@
+import React, { ChangeEvent, FocusEvent, ReactElement, ReactText, MouseEvent } from 'react';
+import { DataTestProp } from '../../src';
+import { HelpProps } from './Help';
+type CheckboxCoreProps = {
+    name: string;
+    value?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    error?: string;
+    checked?: boolean;
+};
+export type CheckboxExtraProps = {
+    label?: ReactElement | ReactText;
+    helperText?: HelpProps['helperText'];
+    indeterminate?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    classNameLabel?: string;
+    'aria-label'?: string;
+    classNameCheckmark?: string;
+};
+/**
+ * ### Purpose
+ * Forms require input from users. If you need information that can be represented as boolean, use input with type 'checkbox'.
+ * Checkbox fields accept boolean types of data. And help and error guidance to ensure they know what to enter.
+ *
+ *
+ * ### General Info
+ * - It's important to realise that we don't set checkbox value, but state (on/off). That is the main difference from other input types.
+ * - They can have a special indeterminate state, that represents a '3rd' value, usually used in tree structures, etc.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxCoreProps & CheckboxExtraProps & DataTestProp & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Checkbox.js

@@ -0,0 +1,38 @@
+import React, { useRef, forwardRef } from 'react';
+import { Check, Minus } from 'react-feather';
+import { useUID } from 'react-uid';
+import classNames from 'classnames';
+import { Error, errorId } from './Error';
+import { Help, helpTooltipId } from './Help';
+import styles from './Checkbox.module.scss';
+import { TruncatedText } from './TruncatedText';
+/**
+ * ### Purpose
+ * Forms require input from users. If you need information that can be represented as boolean, use input with type 'checkbox'.
+ * Checkbox fields accept boolean types of data. And help and error guidance to ensure they know what to enter.
+ *
+ *
+ * ### General Info
+ * - It's important to realise that we don't set checkbox value, but state (on/off). That is the main difference from other input types.
+ * - They can have a special indeterminate state, that represents a '3rd' value, usually used in tree structures, etc.
+ */
+export const Checkbox = forwardRef((props, ref) => {
+    const { checked, name, onChange, onBlur, className, classNameLabel, classNameCheckmark, value, indeterminate = false, label, helperText, error, disabled = false, required, 'data-test': dataTest = 'checkbox', 'aria-label': ariaLabel, onClick, } = props;
+    const inputRef = useRef(null);
+    const id = useUID();
+    return (React.createElement("div", { ref: ref, className: classNames(className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
+        React.createElement("label", { className: classNames(styles.wrapper, {
+                [styles.error]: !!error,
+                [styles.checked]: checked,
+                [styles.disabled]: disabled,
+                [styles.indeterminate]: indeterminate,
+            }, classNameLabel), htmlFor: id },
+            label !== undefined && (React.createElement("div", { className: styles.name, "data-test": "input-checkbox-label" },
+                React.createElement(TruncatedText, { text: label }))),
+            React.createElement("input", { type: "checkbox", ref: inputRef, id: id, name: name, "aria-label": ariaLabel, checked: !!checked, onChange: onChange, onBlur: onBlur, onClick: onClick, value: value, disabled: disabled, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
+            indeterminate ? (React.createElement(Minus, { "data-test": `${dataTest}-minus`, className: classNames(styles.checkmark, classNameCheckmark) })) : (React.createElement(Check, { "data-test": `${dataTest}-check`, className: classNames(styles.checkmark, classNameCheckmark) })),
+            helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText })),
+        React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox.js.map

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

package/lib/components/Checkbox.module.scss

@@ -0,0 +1,106 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+@include h.withError;
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @include c.typographyBodySmall;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  // hide native checkbox
+  input {
+    @include h.visuallyHidden;
+  }
+
+  .helperText {
+    margin-top: c.$grid * 0.5;
+    margin-left: c.$grid * 1.5;
+  }
+
+  // default visible checkmark
+  .checkmark {
+    /* doiuse-disable calc */
+    $checkmarkSize: calc(#{c.$iconSizeSmall} + #{c.$borderWidth * 2});
+    /* doiuse-enable calc */
+
+    width: $checkmarkSize;
+    height: $checkmarkSize;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$grid;
+    color: c.$colorNeutralWhite;
+
+    // because of ~ and + selectors used below, we need to keep the current order in DOM and
+    // fix it visually with order property
+    order: -1;
+    flex-shrink: 0;
+  }
+
+  & > input:checked ~ .checkmark {
+    background-color: c.$colorSuccess;
+    border-color: c.$colorSuccess;
+  }
+
+  /**
+    Indeterminate
+  */
+  &.indeterminate input ~ .checkmark {
+    background-color: c.$colorPrimaryLight;
+    border-color: c.$colorPrimaryLight;
+  }
+
+  /**
+    Hover
+   */
+  &:hover,
+  &.hover {
+    input ~ .checkmark {
+      border-color: c.$colorPrimary;
+    }
+  }
+
+  // Error state
+  &.error input ~ .checkmark {
+    border-color: c.$colorError;
+  }
+
+  .name {
+    overflow: hidden;
+    padding-left: c.$grid * 1.25;
+  }
+
+  &:not(.checked) {
+    color: c.$colorTextSecondary;
+  }
+
+  &.focus > input,
+  input:focus {
+    ~ .checkmark {
+      @include h.outlineFormField;
+    }
+  }
+
+  /**
+    Disabled
+  */
+  &.disabled {
+    color: c.$colorNeutralLight;
+    cursor: not-allowed;
+
+    & > input:disabled ~ .checkmark {
+      color: c.$colorNeutralWhite;
+      border-color: c.$colorNeutralLight;
+    }
+
+    & > input:disabled:checked ~ .checkmark {
+      background-color: c.$colorNeutral;
+    }
+  }
+}

package/lib/components/CheckboxFormik.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { CheckboxExtraProps } from './Checkbox';
+import { FieldValidatorGeneric } from '../utils/formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type CheckboxFieldFormikProps<V extends object> = CheckboxExtraProps & {
+    name: ExtractKeysOfValueType<V, boolean>;
+    validate?: FieldValidatorGeneric<boolean>;
+    onChange?: (value: boolean) => void;
+};
+export declare const CheckboxFormik: <V extends object>({ name, validate, onChange, ...props }: CheckboxFieldFormikProps<V>) => ReactElement;

package/lib/components/CheckboxFormik.js

@@ -0,0 +1,17 @@
+import React, { useCallback } from 'react';
+import { useField } from 'formik';
+import { Checkbox } from './Checkbox';
+import { getFieldError } from '../utils/formik';
+export const CheckboxFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ onBlur, onChange: onFormikChange, value }, meta] = useField({
+        name,
+        validate,
+    });
+    return (React.createElement(Checkbox, { ...props, name: name, checked: value, onChange: useCallback((e) => {
+            if (onChange) {
+                onChange(e.target.checked);
+            }
+            onFormikChange(e);
+        }, [onFormikChange, onChange]), onBlur: onBlur, error: getFieldError(meta) }));
+};
+//# sourceMappingURL=CheckboxFormik.js.map

package/lib/components/CheckboxFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxFormik.js","sourceRoot":"","sources":["../../src/components/CheckboxFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAStE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA+B,EAAgB,EAAE;IACpI,MAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QAC5E,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAC5B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/CircularProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.js","sourceRoot":"","sources":["../../src/components/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,aAAa,MAAM,6BAA6B,CAAA;AAEvD,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAEtD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAUjC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IACpI,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnE,aAAa,CAAC,GAAG,EAAE;QACjB,IAAI,gBAAgB,EAAE,CAAC;YACrB,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAA;IACvB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,gBAAgB,GAAG,CAAC,CAAA;IAC9C,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAA;IAE1C,MAAM,0BAA0B,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzF,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACxD,MAAM,uBAAuB,GAAG,GAAG,YAAY,KAAK,aAAa,EAAE,CAAA;IACnE,MAAM,wBAAwB,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,0BAA0B,CAAC,CAAA;IAE1F,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAC9F,0CAAe,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,MAAM,MAAM,EAAE;YAC9F,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,6BAA6B,EACvC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,YAAY,GAC7B;YACF,6CACY,qBAAqB,EAC/B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,gBAAgB,EAC7B,eAAe,EAAE,uBAAuB,EACxC,gBAAgB,EAAE,wBAAwB,GAC1C,CACE;QACN,0CAAe,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,IAClD,IAAI,CACD,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/CircularProgressBar.module.scss

@@ -0,0 +1,37 @@
+@use '../../styles/constants' as c;
+
+.container {
+  position: relative;
+
+  .backgroundOuterCircle {
+    fill: none;
+    stroke: c.$colorNeutralLight;
+    stroke-linecap: round;
+  }
+
+  .backgroundInnerCircle {
+    fill: none;
+    stroke: c.$colorNeutralLighter;
+    stroke-linecap: round;
+  }
+
+  .progressCircle {
+    fill: none;
+    stroke: c.$colorSuccess;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 750ms ease-in-out;
+  }
+
+  .indicator {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: c.$colorTextSecondary;
+
+    @include c.typographyH2;
+  }
+}

package/lib/components/ContextMenu.js

@@ -0,0 +1,61 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import cls from 'classnames';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import { useRefValue } from '../hooks';
+import styles from './ContextMenu.module.scss';
+export const ContextMenu = ({ anchorElement, offset, items }) => {
+    const rootEl = useRef(null);
+    const [coords, setCoords] = useState(null);
+    const getOffset = useRefValue(offset);
+    const handleContextMenuOpen = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!anchorElement || (!anchorElement.contains(e.target) && e.target !== anchorElement)) {
+            return;
+        }
+        e.preventDefault();
+        const currentOffset = getOffset();
+        const width = (_b = (_a = rootEl.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+        const height = (_d = (_c = rootEl.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
+        let left = e.pageX + ((_e = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.left) !== null && _e !== void 0 ? _e : 0);
+        let top = e.pageY + ((_f = currentOffset === null || currentOffset === void 0 ? void 0 : currentOffset.top) !== null && _f !== void 0 ? _f : 0);
+        if (left + width > window.scrollX + document.documentElement.clientWidth) {
+            left = window.scrollX + document.documentElement.clientWidth - width;
+        }
+        if (top + height > window.scrollY + document.documentElement.clientHeight) {
+            top = window.scrollY + document.documentElement.clientHeight - height;
+        }
+        setCoords({ top, left });
+    }, [setCoords, getOffset, anchorElement]);
+    const handleContextMenuClose = useCallback(() => {
+        setCoords(null);
+    }, [setCoords]);
+    useIsomorphicLayoutEffect(() => {
+        if (anchorElement) {
+            document.body.addEventListener('contextmenu', handleContextMenuOpen, false);
+        }
+        return () => {
+            document.body.removeEventListener('contextmenu', handleContextMenuOpen);
+        };
+    }, [handleContextMenuOpen]);
+    useIsomorphicLayoutEffect(() => {
+        if (coords) {
+            document.body.addEventListener('click', handleContextMenuClose, false);
+        }
+        return () => {
+            document.body.removeEventListener('click', handleContextMenuClose);
+        };
+    }, [coords, handleContextMenuClose]);
+    useIsomorphicLayoutEffect(() => {
+        if (coords) {
+            window.addEventListener('resize', handleContextMenuClose);
+            window.addEventListener('orientationchange', handleContextMenuClose);
+        }
+        return () => {
+            window.removeEventListener('resize', handleContextMenuClose);
+            window.removeEventListener('orientationchange', handleContextMenuClose);
+        };
+    }, [coords, handleContextMenuClose]);
+    return createPortal(React.createElement("div", { ref: rootEl, style: coords || undefined, className: cls(styles.root, { [styles.hidden]: !coords }) }, items.map(({ onClick, content, className }, index) => (React.createElement("button", { key: index, className: cls(styles.item, className), onClick: onClick }, content)))), document.body);
+};
+//# sourceMappingURL=ContextMenu.js.map

package/lib/components/ContextMenu.js.map

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

package/lib/components/ContextMenu.module.scss

@@ -0,0 +1,37 @@
+@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/Dialog.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { Modal } from './Modal';
+import styles from './Dialog.module.scss';
+export const DIALOG_AFFIRMATION_DEFAULT = 'Are you sure you wish to proceed?';
+/**
+ * ### Purpose
+ * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Dialog.
+ * Dialogs are used to drive simple actions such as a mere confirmation. In case there is a more complex action (e.g larger form, table etc.) use Modal.
+ *
+ * ### General Info
+ * - Dialog is a special kind of Modal. It's made for simple use-cases such as confirmations.
+ * - Use affirmation` and `consequences` props to set the content of the Dialog.
+ */
+export const Dialog = ({ modalClassName, consequences, affirmation = DIALOG_AFFIRMATION_DEFAULT, actionChildren, actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, ...rest }) => {
+    const actions = useMemo(() => {
+        const props = actionChildren && actionOnConfirm
+            ? [
+                {
+                    autoFocus: !actionDangerous,
+                    color: actionDangerous ? 'secondary' : 'primary',
+                    ...(actionDisabled && actionDisabledTooltip
+                        ? {
+                            disabled: actionDisabled,
+                            disabledTooltip: actionDisabledTooltip,
+                        }
+                        : {
+                            disabled: undefined,
+                            disabledTooltip: undefined,
+                        }),
+                    onClick: actionOnConfirm,
+                    children: actionChildren,
+                },
+            ]
+            : [];
+        return props;
+    }, [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren]);
+    return (React.createElement(Modal, { className: cn(styles.dialog, modalClassName), headerClassName: styles.dialogHeader, bodyClassName: styles.dialogBody, contentClassName: styles.dialogConsequences, footerClassName: styles.dialogFooter, actions: actions, title: affirmation, showCloseButton: false, ...rest }, consequences));
+};
+//# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,KAAK,GACT,cAAc,IAAI,eAAe;YAC/B,CAAC,CAAC;gBACE;oBACE,SAAS,EAAE,CAAC,eAAe;oBAC3B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;oBAChD,GAAG,CAAC,cAAc,IAAI,qBAAqB;wBACzC,CAAC,CAAC;4BACE,QAAQ,EAAE,cAAc;4BACxB,eAAe,EAAE,qBAAqB;yBACvC;wBACH,CAAC,CAAC;4BACE,QAAQ,EAAE,SAAS;4BACnB,eAAe,EAAE,SAAS;yBAC3B,CAAC;oBACN,OAAO,EAAE,eAAe;oBACxB,QAAQ,EAAE,cAAc;iBACzB;aACF;YACH,CAAC,CAAC,EAAE,CAAA;QAER,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,KAClB,IAAI,IAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Dialog.module.scss

@@ -0,0 +1,62 @@
+@use '../../styles/constants' as c;
+
+.dialog {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // Note: Unset properties set by Modal
+  min-width: 0;
+  max-width: none;
+  min-height: c.$dialogMinHeight;
+  max-height: none;
+  width: c.$dialogWidth;
+  padding-bottom: 0;
+
+  .dialogBody {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    text-align: center;
+
+    .dialogHeader {
+      margin-right: 0;
+      justify-content: center;
+    }
+
+    .dialogConsequences {
+      flex: 1 1 auto;
+    }
+
+    .dialogFooter {
+      display: flex;
+      margin: (c.$grid * 5) (c.$grid * -5) 0 (c.$grid * -5);
+
+      & > button {
+        flex: 1 1 auto;
+        margin: 0 !important;
+        max-width: none;
+
+        // Note: Unset border-radius for the buttons
+        border-radius: 0;
+      }
+
+      // Note: In case there is only one button (Cancel)
+      & > button:only-of-type {
+        border-bottom-left-radius: c.$borderRadius;
+        border-bottom-right-radius: c.$borderRadius;
+      }
+
+      // Note: In case there are 2 buttons
+      & > button:not(:only-of-type) {
+        &:nth-of-type(1) {
+          border-bottom-left-radius: c.$borderRadius;
+        }
+
+        &:nth-of-type(2) {
+          border-bottom-right-radius: c.$borderRadius;
+        }
+      }
+    }
+  }
+}

package/lib/components/EmptyState.d.ts

@@ -0,0 +1,52 @@
+import { FC, ReactNode } from 'react';
+import { ButtonTypeAnchorProps, ButtonProps } from './Button';
+import { IconProps } from './Icon';
+import { DataTestProp } from '../../src';
+type EmptyStateSize = 'normal' | 'large';
+type EmptyStateActionButton = {
+    direction?: 'vertical';
+    actionOnClick: ButtonProps['onClick'];
+    actionHref?: never;
+    actionTarget?: never;
+    actionRel?: never;
+    size?: EmptyStateSize;
+};
+type EmptyStateActionLink = {
+    direction: 'horizontal';
+    actionHref: ButtonTypeAnchorProps['href'];
+    actionTarget?: ButtonTypeAnchorProps['target'];
+    actionRel?: ButtonTypeAnchorProps['rel'];
+    actionOnClick?: never;
+    size?: never;
+};
+type EmptyStateAction = ({
+    action: string;
+} & (EmptyStateActionButton | EmptyStateActionLink)) | {
+    action?: never;
+    direction?: 'vertical' | 'horizontal';
+    actionOnClick?: never;
+    actionHref?: never;
+    actionTarget?: never;
+    actionRel?: never;
+    size?: EmptyStateSize;
+};
+export type EmptyStateProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    icon: IconProps['icon'];
+    iconLabel: string;
+    className?: string;
+} & EmptyStateAction & DataTestProp;
+/**
+ * ### Purpose
+ * Sometimes users performs an action, that yields an empty result. Such cases may be first use of a feature, view with no data, user cleared view or an error state.
+ * Help the user understand the situation by providing them with guidance in form of an Empty State.
+ *
+ * ### General Info
+ * - There are 2 variations of Empty State: vertical (available in normal and large size) and horizontal (only one size). The use depends on available space in UI.
+ * - Every empty state must contain title (should be specific and clear).
+ * - Good practice is add an action button to guide a user for the next steps to get out of the empty state.
+ * - Description helps to describe the semantics more thoroughly.
+ */
+export declare const EmptyState: FC<EmptyStateProps>;
+export {};

package/lib/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAgD7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,WAAW,EAAE,QAAQ,EACrB,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAuB,EAC9C,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,0CAAe,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACF;YACL,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}