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

package/lib/components/InteractiveListFormik.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement, Ref } from 'react';
+import { FieldValidator } from 'formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+import { InteractiveListExtraProps, InteractiveListInputRef } from './InteractiveList';
+export type InteractiveListFormikProps<V extends object> = InteractiveListExtraProps & {
+    name: ExtractKeysOfValueType<V, string[]>;
+    validate?: FieldValidator;
+    inputControlRef?: Ref<InteractiveListInputRef>;
+};
+/**
+ * InteractiveListFormik
+ *
+ * This Formik-bound component is used to work with an array of strings.
+ * It guarantees the uniqueness of elements with respect to the empty characters at the beginning and the end of each string.
+ *
+ * It prevents from entering a non-valid entry based on a validate function passed to an element.
+ * Unfortunately, we can't access Yup validation at this level when adding an entry, so Yup validation is done only on form submit.
+ * More info here https://formik.org/docs/api/fieldarray
+ *
+ * Passing an InteractiveListInputRef as inputControlRef property allows you to modify the value of text input.
+ */
+export declare const InteractiveListFormik: <V extends object>({ name, validate, children, inputControlRef, ...props }: InteractiveListFormikProps<V>) => ReactElement;

package/lib/components/InteractiveListFormik.js

@@ -0,0 +1,96 @@
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { FieldArray, useField, useFormikContext } from 'formik';
+import { InteractiveList } from './InteractiveList';
+import { getFieldError } from '../utils/formik';
+/**
+ * InteractiveListFormik
+ *
+ * This Formik-bound component is used to work with an array of strings.
+ * It guarantees the uniqueness of elements with respect to the empty characters at the beginning and the end of each string.
+ *
+ * It prevents from entering a non-valid entry based on a validate function passed to an element.
+ * Unfortunately, we can't access Yup validation at this level when adding an entry, so Yup validation is done only on form submit.
+ * More info here https://formik.org/docs/api/fieldarray
+ *
+ * Passing an InteractiveListInputRef as inputControlRef property allows you to modify the value of text input.
+ */
+export const InteractiveListFormik = ({ name, validate, children, inputControlRef, ...props }) => {
+    const { validateForm, values: valuesFormik } = useFormikContext();
+    const [field, meta, { setTouched, setError, setValue }] = useField({
+        name,
+        validate,
+    });
+    const [inputValue, setInputValue] = useState('');
+    // We want to revalidate on change only after un-successful insert
+    const [inputTouched, setInputTouched] = useState(false);
+    const normalizedValue = useMemo(() => inputValue.trim(), [inputValue]);
+    const getValidationError = useCallback(async () => {
+        let validationError = undefined;
+        if (normalizedValue.length === 0) {
+            validationError = 'You need to provide a non empty value';
+        }
+        if (validationError === undefined && field.value.includes(normalizedValue)) {
+            validationError = 'You need to provide a unique value';
+        }
+        if (validationError === undefined && validate) {
+            // let's check validate error
+            const error = await validate(normalizedValue);
+            if (error) {
+                validationError = error;
+            }
+        }
+        if (validationError === undefined) {
+            // If we passed with previous checks, let's check against Formik's validation error
+            // We do that by checking future state with validateForm
+            const formikErrors = await validateForm({
+                ...valuesFormik,
+                [name]: [...field.value, normalizedValue],
+            });
+            const fieldErrors = formikErrors[name];
+            validationError = typeof fieldErrors === 'string' ? fieldErrors : fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors.find((x) => !!x);
+        }
+        return validationError;
+    }, [field.value, name, normalizedValue, validate, validateForm, valuesFormik]);
+    const onError = useCallback((value) => {
+        setTouched(true, false);
+        // @ts-expect-error Formik expects the string[], while documentation says
+        // it can be string | string[] which also makes more sense
+        setError(value);
+    }, [setTouched, setError]);
+    const addItem = useCallback(async () => {
+        const validationError = await getValidationError();
+        if (validationError) {
+            onError(validationError);
+            setInputTouched(true);
+            return validationError;
+        }
+        else {
+            field.value.push(normalizedValue);
+            setValue(field.value);
+            setInputTouched(false);
+            setInputValue('');
+            return undefined;
+        }
+    }, [field.value, getValidationError, normalizedValue, onError, setValue]);
+    useImperativeHandle(inputControlRef, () => ({
+        setValue: (value) => {
+            setInputValue(value);
+        },
+        addItem: addItem,
+        getValue: () => inputValue,
+    }));
+    useEffect(() => {
+        if (inputTouched) {
+            void getValidationError().then((validationError) => {
+                if (validationError) {
+                    onError(validationError);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputTouched, inputValue]);
+    return (React.createElement(FieldArray, { name: name, render: (arrayHelpers) => {
+            return (React.createElement(InteractiveList, { ...props, name: name, value: field.value, inputValue: inputValue, setInputValue: setInputValue, error: getFieldError(meta), onAddItem: addItem, onRemoveItem: (idx) => !!arrayHelpers.remove(idx) }, children));
+        } }));
+};
+//# sourceMappingURL=InteractiveListFormik.js.map

package/lib/components/InteractiveListFormik.js.map

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

package/lib/components/Label.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from 'react';
+import { DataTestProp } from '../../src';
+export type LabelProps = {
+    id: string;
+    label: string | ReactElement;
+    className?: string;
+    variant?: 'primary' | 'secondary';
+} & DataTestProp;
+export declare const Label: FC<LabelProps>;

package/lib/components/Label.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Label.module.scss';
+export const Label = ({ id, label, className, variant = 'primary', 'data-test': dataTest = 'label' }) => (React.createElement("label", { "data-test": dataTest, htmlFor: id, className: cn(styles.label, styles[variant], className) }, label));
+//# sourceMappingURL=Label.js.map

package/lib/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/components/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACvH,4CAAkB,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,IAC7F,KAAK,CACA,CACT,CAAA"}

package/lib/components/Label.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/constants' as c;
+
+.label {
+  @include c.typographyBodyNormal;
+
+  color: c.$colorTextSecondary;
+  padding: 0;
+
+  &.secondary {
+    color: c.$colorNeutralWhite;
+  }
+}

package/lib/components/Link.d.ts

@@ -0,0 +1,53 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { Icon as FeatherIcon } from 'react-feather';
+import { DataTestProp } from '../../src';
+declare const sizes: {
+    normal: string;
+    small: string;
+    inherit: string;
+};
+type AnchorAttributes = AnchorHTMLAttributes<HTMLAnchorElement>;
+type IconProps = {
+    icon: FeatherIcon;
+    ariaLabel: string;
+    iconClassName?: string;
+} | {
+    icon?: never;
+    ariaLabel?: never;
+    iconClassName?: never;
+};
+export type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
+export type LinkRel = 'alternate' | 'author' | 'bookmark' | 'dns-prefetch' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noopener' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag';
+export type LinkProps = IconProps & {
+    size?: keyof typeof sizes;
+    kind?: 'primary' | 'secondary' | 'contrast';
+    children: ReactNode;
+    bold?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+} & Pick<AnchorAttributes, 'className'> & DataTestProp & ({
+    component: 'button';
+    href?: never;
+    target?: never;
+    rel?: never;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+} | {
+    component?: 'a';
+    href: string;
+    target?: LinkTarget;
+    rel?: LinkRel | LinkRel[];
+    type?: never;
+});
+/**
+ * ### Purpose
+ * Makes text in paragraphs actionable. Sometimes you want text that is actionable but not as attention-grabbing as a button. Maybe it sits inside a paragraph of text.
+ * Text links let you add actions in the form of text that fits with its surroundings. Users can see they can take an action, but their focus is not drawn much from your main flow.
+ *
+ * ### General Info
+ * - There are 2 kinds (colors) of Link available - primary (default) and secondary.
+ * - There are 3 sizes of Link available - normal (default), small and inherit.
+ * - The default state of all types of link is underlined and on hover it has no underline.
+ * - Link can be used as a stand-alone component with right chevron icon.
+ * - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/lib/components/Link.js

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { Icon } from './Icon';
+import styles from './Link.module.scss';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const sizes = {
+    normal: styles.normal,
+    small: styles.small,
+    inherit: styles.inherit,
+};
+/**
+ * ### Purpose
+ * Makes text in paragraphs actionable. Sometimes you want text that is actionable but not as attention-grabbing as a button. Maybe it sits inside a paragraph of text.
+ * Text links let you add actions in the form of text that fits with its surroundings. Users can see they can take an action, but their focus is not drawn much from your main flow.
+ *
+ * ### General Info
+ * - There are 2 kinds (colors) of Link available - primary (default) and secondary.
+ * - There are 3 sizes of Link available - normal (default), small and inherit.
+ * - The default state of all types of link is underlined and on hover it has no underline.
+ * - Link can be used as a stand-alone component with right chevron icon.
+ * - You can change underlying semantics with a component property. Typescript will guard you on providing other properties related to the component type.
+ */
+export const Link = forwardRef(({ component = 'a', kind = 'primary', size = 'normal', bold = false, icon, ariaLabel, iconClassName, href, rel = 'noopener', target = '_self', type = 'button', onClick, className, children, 'data-test': dataTest = 'link', }, ref) => {
+    const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
+    const commonProps = {
+        className: cn(styles.link, styles[size], {
+            // kind
+            [styles.primary]: kind === 'primary',
+            [styles.secondary]: kind === 'secondary',
+            [styles.contrast]: kind === 'contrast',
+            // bold
+            [styles.bold]: bold,
+        }, className),
+        href: href,
+        onClick: onClick,
+    };
+    const iconComponent = icon && ariaLabel ? (React.createElement(Icon, { bold: bold, icon: icon, ariaLabel: ariaLabel, size: size === 'normal' ? 'medium' : 'small', className: iconClassName })) : undefined;
+    return component === 'a' ? (React.createElement("a", { ...commonProps, rel: relFinal, target: target, ref: ref, "data-test": dataTest },
+        children,
+        iconComponent)) : (React.createElement("button", { ...commonProps, type: type, ref: ref, "data-test": dataTest },
+        children,
+        iconComponent));
+});
+Link.displayName = 'Link';
+//# sourceMappingURL=Link.js.map

package/lib/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,UAAU,EAAkD,MAAM,OAAO,CAAA;AAErI,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,6DAA6D;AAC7D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;CACxB,CAAA;AA8DD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,EACJ,SAAS,EACT,aAAa,EACb,IAAI,EACJ,GAAG,GAAG,UAAU,EAChB,MAAM,GAAG,OAAO,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EACD,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAEzD,MAAM,WAAW,GAAG;QAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,IAAI,CAAC,EACZ;YACE,OAAO;YACP,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,KAAK,WAAW;YACxC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;YACtC,OAAO;YACP,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI;SACpB,EACD,SAAS,CACV;QACD,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,OAAO;KACjB,CAAA;IAED,MAAM,aAAa,GACjB,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,CAClB,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,GAAI,CAC/H,CAAC,CAAC,CAAC,SAAS,CAAA;IAEf,OAAO,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CACzB,8BAAO,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAA0C,eAAa,QAAQ;QACpH,QAAQ;QACR,aAAa,CACZ,CACL,CAAC,CAAC,CAAC,CACF,mCAAY,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAA0C,eAAa,QAAQ;QACtG,QAAQ;QACR,aAAa,CACP,CACV,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/lib/components/Link.module.scss

@@ -0,0 +1,64 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+@mixin link {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  &:hover,
+  &.hover,
+  &:focus,
+  &.focus,
+  &:active,
+  &.active {
+    /* doiuse-disable text-decoration */
+    text-decoration: underline solid;
+    outline: transparent solid c.$outlineWidth;
+  }
+
+  &:focus,
+  &.focus {
+    @include h.outlineSimple;
+  }
+
+  &.primary {
+    color: c.$colorPrimary;
+  }
+
+  &.secondary {
+    color: c.$colorTextSecondary;
+  }
+
+  &.contrast {
+    color: c.$colorNeutralLighter;
+  }
+}
+
+.link {
+  @include link;
+}
+
+.normal {
+  @include c.typographyBodyNormal;
+}
+
+.small {
+  @include c.typographyBodySmall;
+}
+
+.inherit {
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.bold {
+  @include c.typographyBodyWeight('bold');
+}

package/lib/components/Loader.d.ts

@@ -0,0 +1,12 @@
+import { FC, SVGAttributes } from 'react';
+import { DataTestProp } from '../../src';
+import { IconSize } from './Icon';
+export type LoaderProps = {
+    className?: string;
+    size?: IconSize;
+    kind?: 'primary' | 'contrast' | 'inherit';
+    children?: never;
+    ariaLabel?: string;
+    role?: string;
+} & Pick<SVGAttributes<SVGElement>, 'aria-hidden'> & DataTestProp;
+export declare const Loader: FC<LoaderProps>;

package/lib/components/Loader.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Loader.module.scss';
+export const Loader = ({ className, size = 'medium', kind = 'inherit', role = 'img', ariaLabel, 'data-test': dataTest = 'loader', ...props }) => (
+// https://github.com/feathericons/feather/blob/a718a7e9c39447202f703783336e8ba1c8e32405/icons/loader.svg#L1
+// We cannot use it directly as it has `line` elements not in a sequential order
+// And we need the sequential order to easily calculate animation delay
+React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", role: role, "data-test": dataTest, className: cn(styles.loader, {
+        [styles.small]: size === 'small',
+        [styles.smallMedium]: size === 'smallMedium',
+        [styles.medium]: size === 'medium',
+        [styles.large]: size === 'large',
+        [styles.xlarge]: size === 'xlarge',
+        [styles.primary]: kind === 'primary',
+        [styles.contrast]: kind === 'contrast',
+        [styles.inherit]: kind === 'inherit',
+    }, className), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-label": ariaLabel ? ariaLabel : 'Loader icon', ...props },
+    React.createElement("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+    React.createElement("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }),
+    React.createElement("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+    React.createElement("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }),
+    React.createElement("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+    React.createElement("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }),
+    React.createElement("line", { x1: "18", y1: "12", x2: "22", y2: "12" }),
+    React.createElement("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })));
+//# sourceMappingURL=Loader.js.map

package/lib/components/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/components/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,MAAM,YAAY,CAAA;AAK3B,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAYzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,GAAG,QAAQ,EAChC,GAAG,KAAK,EACT,EAAE,EAAE,CAAC;AACJ,4GAA4G;AAC5G,gFAAgF;AAChF,uEAAuE;AACvE,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,eACC,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;QACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;QAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;QAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;QAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;QAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;QAClC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;QACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;QACtC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;KACrC,EACD,SAAS,CACV,EACD,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,gBACV,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,KAC7C,KAAK;IAET,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;IACtC,8BAAM,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,GAAG;IAChD,8BAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG;IACtC,8BAAM,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,GAAG;IAClD,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;IACxC,8BAAM,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG;IACpD,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;IACxC,8BAAM,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,GAAG,CAC9C,CACP,CAAA"}

package/lib/components/Loader.module.scss

@@ -0,0 +1,74 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+
+$itemsCnt: 8;
+$duration: c.$durationLoader;
+$delayStep: math.div($duration, $itemsCnt);
+$opacityMax: 1;
+$opacityMin: 0.2;
+
+.loader {
+  &.small {
+    width: c.$iconSizeSmall;
+    height: c.$iconSizeSmall;
+  }
+
+  &.smallMedium {
+    width: c.$iconSizeSmallMedium;
+    height: c.$iconSizeSmallMedium;
+  }
+
+  &.medium {
+    width: c.$iconSizeMedium;
+    height: c.$iconSizeMedium;
+  }
+
+  &.large {
+    width: c.$iconSizeLarge;
+    height: c.$iconSizeLarge;
+  }
+
+  &.xlarge {
+    width: c.$iconSizeXLarge;
+    height: c.$iconSizeXLarge;
+  }
+
+  &.primary {
+    color: c.$colorPrimaryDark;
+  }
+
+  &.contrast {
+    color: c.$colorNeutralWhite;
+  }
+
+  &.inherit {
+    color: inherit;
+  }
+
+  > line {
+    animation-duration: $duration;
+    animation-name: fade;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+  }
+
+  @for $i from 1 through $itemsCnt {
+    > line:nth-child(#{$i}) {
+      animation-delay: $delayStep * ($i - 1);
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: $opacityMax;
+  }
+
+  50% {
+    opacity: $opacityMin;
+  }
+
+  100% {
+    opacity: $opacityMax;
+  }
+}

package/lib/components/Modal.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { Props as ReactModalProps } from 'react-modal';
+import { DataTestProp } from '../../src';
+import { ButtonProps, ButtonTypeButtonProps } from './Button';
+import { IconProps } from './Icon';
+export declare const setAppElement: (appElement: string | HTMLElement) => void;
+export type ModalActionProps = ButtonProps<ButtonTypeButtonProps>;
+export type ModalProps = {
+    actions?: ModalActionProps[];
+    hideActions?: boolean;
+    autoFocus?: boolean;
+    children?: ReactNode;
+    closable?: boolean;
+    showCloseButton?: boolean;
+    bodyClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    overlayClassName?: string;
+    className?: string;
+    icon?: IconProps['icon'];
+    iconAriaLabel?: IconProps['ariaLabel'];
+    onClose: ReactModalProps['onRequestClose'];
+    title: string;
+} & DataTestProp & Exclude<ReactModalProps, 'onRequestClose' | 'shouldFocusAfterRender' | 'shouldReturnFocusAfterClose'>;
+export declare const Modal: FC<ModalProps>;

package/lib/components/Modal.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import ReactModal from 'react-modal';
+import cn from 'classnames';
+import { X } from 'react-feather';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import styles from './Modal.module.scss';
+// Direct re-exporting is breaking tests in MC
+// TODO: Investigate why
+export const setAppElement = (appElement) => ReactModal.setAppElement(appElement);
+/*
+ * ### Purpose
+ * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Modal.
+ * Modals can contain components like forms, menus, tables etc.
+ * Usually modals are used to drive a complex action. In case there is a simple action (e.g. confirmation), consider using a Dialog.
+ *
+ * ### General Info
+ * - Modal always contains a title, icon "X" in the header, content and active buttons in the footer.
+ * - No interactions on the underlying page can be performed while a Modal.
+ * - Content beneath the modal is covered by a "blanket".
+ * - To close the Modal, use "Cancel" button in the footer, "X" button in the header, press "Esc" key or click anywhere on the "blanket".
+ */
+export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, title, ...rest }) => {
+    const shouldAutoFocusCancelButton = useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some((action) => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
+    return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
+        React.createElement("div", { className: styles.outline }),
+        React.createElement("div", { className: cn(styles.body, bodyClassName) },
+            React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
+                icon && iconAriaLabel && React.createElement(Icon, { "data-test": "modal-header-icon", className: styles.icon, icon: icon, ariaLabel: iconAriaLabel }),
+                React.createElement("h3", { "data-test": "modal-header-title", className: styles.title }, title),
+                closable && showCloseButton && (
+                // Note: Mostly a Dialog use-case. We want it to be closable, but we don't want to show an X button in the corner.
+                React.createElement("div", { className: styles.close },
+                    React.createElement(IconButton, { "data-test": `${dataTest}-button-close`, kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: onClose })))),
+            React.createElement("div", { "data-test": "modal-content", className: cn(styles.content, contentClassName) }, children),
+            !hideActions && (React.createElement("div", { "data-test": "modal-footer", className: cn(styles.footer, footerClassName) }, actions === null || actions === void 0 ? void 0 :
+                actions.map(({ children, ...actionPropsRest }, key) => (React.createElement(Button, { key: key, "data-test": "modal-button-action", ...actionPropsRest }, children))),
+                React.createElement(Button, { autoFocus: shouldAutoFocusCancelButton, "data-test": "modal-button-cancel", variant: "outlined", onClick: onClose }, "Cancel"))))));
+};
+//# sourceMappingURL=Modal.js.map

package/lib/components/Modal.js.map

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

package/lib/components/Modal.module.scss

@@ -0,0 +1,109 @@
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.portal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: c.$zIndex1000;
+  pointer-events: none;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: color.adjust(c.$colorText, $alpha: -0.2);
+  pointer-events: all;
+}
+
+.modal {
+  background-color: c.$colorNeutralWhite;
+  border: none;
+  border-radius: c.$borderRadius;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: c.$modalWidth;
+  min-width: c.$modalMinWidth;
+  max-width: c.$modalMaxWidth;
+  max-height: c.$modalMaxHeight;
+  z-index: c.$zIndex1000;
+  padding: c.$grid * 5 0;
+  display: flex;
+  flex-direction: column;
+
+  .close {
+    position: absolute;
+    right: c.$grid * 1.5;
+    top: c.$grid * 2;
+  }
+
+  .outline {
+    position: absolute;
+    border-radius: c.$borderRadius;
+    pointer-events: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    z-index: c.$zIndex100;
+    visibility: hidden;
+
+    @include h.outlineSimple;
+  }
+
+  &:focus,
+  &.focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: transparent solid c.$outlineWidth;
+
+    .outline {
+      visibility: visible;
+    }
+  }
+
+  .body {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 0 c.$grid * 5;
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      margin: 0 c.$grid * 5 c.$grid * 5 0;
+
+      .icon {
+        margin-right: c.$grid * 2.5;
+      }
+
+      .title {
+        margin: 0;
+        word-break: break-all;
+      }
+    }
+
+    .content {
+      flex: 1;
+      overflow: auto;
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin: c.$grid * 5 0 c.$grid * 2.5;
+
+      & > button:not(:first-of-type) {
+        margin-left: c.$grid * 5;
+      }
+    }
+  }
+}

package/lib/components/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAEhH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAS/C,MAAM,CAAC,MAAM,gBAAgB,GAA8D;IACzF,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,KAAK,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,wBAAwB;KACpC;CACF,CAAA;AAmBD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAElD,OAAO,CACL,0CACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,YAAY,EACnB;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,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QAChG,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAC5D,QAAQ,CACL;QACL,IAAI,IAAI,QAAQ,IAAI,CACnB,oBAAC,IAAI,iBACO,mBAAmB,EAC7B,SAAS,EAAC,GAAG,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,UAEH,IAAI,CACA,CACR;QACA,OAAO,IAAI,CACV,oBAAC,UAAU,iBACC,oBAAoB,EAC9B,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2BAA2B,GACrC,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}