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

package/lib/components/TextField.d.ts

@@ -0,0 +1,50 @@
+import React, { ChangeEvent, FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactElement, MouseEvent, Ref } from 'react';
+import { DataTestProp } from '../../src';
+import { Icon as IconType } from 'react-feather';
+import { FieldHeaderProps } from './FieldHeader';
+import { IconSize } from './Icon';
+import { TooltipProps } from './Tooltip';
+export type TextFieldSize = 'medium' | 'small' | 'large';
+export type TextFieldVariant = 'primary' | 'secondary';
+type TextFieldTrailingIcon = {
+    inputTrailingIcon: IconType;
+    inputTrailingIconLabel: string;
+} | {
+    inputTrailingIcon?: never;
+    inputTrailingIconLabel?: never;
+};
+export type TextFieldTypes = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | undefined;
+type TextFieldCoreProps<T extends TextFieldTypes> = {
+    name: string;
+    containerRef?: Ref<HTMLDivElement>;
+    value?: T extends 'number' ? number : string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    error?: string;
+};
+export type TextFieldExtraProps<T extends TextFieldTypes> = {
+    ariaLabel?: string;
+    size?: TextFieldSize;
+    variant?: TextFieldVariant;
+    iconSize?: IconSize;
+    className?: string;
+    inputContainerClassName?: string;
+    inputClassName?: string;
+    inputBorderOverlayClassName?: string;
+    errorClassName?: string;
+    inputContainerChild?: ReactElement;
+    inputIcon?: IconType;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    type?: T;
+    readOnly?: boolean;
+    clearable?: boolean;
+    errorTooltipPlacement?: TooltipProps['placement'];
+    children?: React.ReactNode;
+} & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
+export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
+export declare const TextField: <T extends TextFieldTypes>({ mRef, ...props }: TextFieldProps<T> & {
+    mRef?: Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+export {};

package/lib/components/TextField.js

@@ -0,0 +1,65 @@
+// https://zeroheight.com/11d0e6dac/p/316944-text-field
+import React, { forwardRef, useRef, } from 'react';
+import cn from 'classnames';
+import { triggerNativeInputChange } from '../../src';
+import { X } from 'react-feather';
+import { useUID } from 'react-uid';
+import mergeRefs from 'react-merge-refs';
+import { Icon } from './Icon';
+import { Error, errorId } from './Error';
+import { FieldHeader } from './FieldHeader';
+import { helpTooltipId } from './Help';
+import { IconButton } from './IconButton';
+import styles from './TextField.module.scss';
+/**
+ * ### Purpose
+ * Forms require input from users. When you only need basic information, use text fields to gather exactly what you need.
+ * Text fields accept several types of data and can impose various restrictions to ensure you get what you need from users. And help and error guidance to ensure they know what to enter.
+ *
+ * ### General Info
+ * - Text Field is available in 2 variations: `small` (height of 30 px) and `medium` (height of 40 px). The use depends mainly on the space in UI.
+ * - All the variations can be either with the label, or without label.
+ * - Standard label alignment is left-aligned with the field underneath.
+ * - If needed, you can use icon on the left side or on the right side inside the Text Input (e.g. Eye icon to show / hide password).
+ *
+ * ### Usage
+ * Use a text input when the expected user input is a single line of text.
+ */
+const TextFieldInternal = (props, ref) => {
+    const { 'data-test': dataTest = 'text-field', ariaLabel, className, disabled, error, errorClassName, helperText, helperTextTooltipWordBreak, id: explicitId, inputClassName, inputContainerChild, inputContainerClassName, inputBorderOverlayClassName, inputIcon, inputTrailingIcon, inputTrailingIconLabel, label, labelClassName, showAriaLabel = false, name, size = 'medium', variant = 'primary', onBlur, onFocus, onChange, onKeyDown, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', children, containerRef, ...htmlAttrs } = props;
+    const autoId = useUID();
+    const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
+    const inputRef = useRef(null);
+    const isNotEmpty = value !== undefined && (typeof value === 'string' ? value.length > 0 : true);
+    const mergedRef = ref ? mergeRefs([ref, inputRef]) : inputRef;
+    const handleClear = () => {
+        if (inputRef.current) {
+            triggerNativeInputChange('', inputRef.current);
+        }
+    };
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.withError]: 'error' in props,
+            [styles.small]: size === 'small',
+            [styles.large]: size === 'large',
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.withIcon]: inputIcon,
+            [styles.empty]: value === undefined,
+        }, className) },
+        React.createElement(FieldHeader, { id: id, size: size, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, "data-test": `${dataTest}-header`, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
+        React.createElement("div", { className: styles.inputBlock },
+            React.createElement("div", { ref: containerRef, className: cn(styles.inputContainer, inputContainerClassName) },
+                React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, onKeyDown: onKeyDown, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel || label : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
+                        [styles.trailingIcon]: inputTrailingIcon,
+                    }), ...htmlAttrs }),
+                React.createElement("div", { className: cn(styles.borderOverlay, inputBorderOverlayClassName) }),
+                inputIcon && (React.createElement(Icon, { icon: inputIcon, ariaLabel: label, containerClassName: cn(styles.inputIconContainer, styles.inputLeftIconContainer), className: styles.inputIcon, size: "small" })),
+                clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, size: size, ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
+                inputContainerChild,
+                inputTrailingIcon && inputTrailingIconLabel && (React.createElement(Icon, { icon: inputTrailingIcon, ariaLabel: inputTrailingIconLabel, containerClassName: cn(styles.inputIconContainer, styles.inputTrailingIconContainer), className: styles.inputIconTrailing, size: iconSize }))),
+            children),
+        React.createElement(Error, { truncated: true, inputId: id, error: error, "data-test": `${dataTest}-error`, tooltipPlacement: errorTooltipPlacement, className: cn(styles.errorContainer, errorClassName) })));
+};
+const TextFieldWithRef = forwardRef(TextFieldInternal);
+export const TextField = ({ mRef, ...props }) => (React.createElement(TextFieldWithRef, { ref: mRef, ...props }));
+//# sourceMappingURL=TextField.js.map

package/lib/components/TextField.js.map

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

package/lib/components/TextField.module.scss

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

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import { TextFieldExtraProps, TextFieldTypes } from './TextField';
+import { FieldValidatorGeneric } from '../utils/formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type TextFieldFormikProps<V extends object> = TextFieldExtraProps<Exclude<TextFieldTypes, 'number' | 'password'>> & {
+    name: ExtractKeysOfValueType<V, string | undefined>;
+    validate?: FieldValidatorGeneric<string | undefined>;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+};
+export declare const TextFieldFormik: <V extends object>({ type, name, validate, onChange, onBlur, ...props }: TextFieldFormikProps<V>) => ReactElement;

package/lib/components/TextFieldFormik.js

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

package/lib/components/TextFieldFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldFormik.js","sourceRoot":"","sources":["../../src/components/TextFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAUtE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAChD,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACgB,EAAgB,EAAE;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACrG,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,CAAC,CAAC,CAAA;QACX,CAAC;QACD,YAAY,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YAC1B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TimeField.d.ts

@@ -0,0 +1,17 @@
+import { FocusEvent, ChangeEvent, FC, InputHTMLAttributes } from 'react';
+import { DataTestProp } from '../../src';
+import { FieldHeaderProps } from './FieldHeader';
+export type TimeFieldCoreProps = {
+    name: string;
+    value?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    error?: string;
+};
+export type TimeFieldExtraProps = {
+    inputClassName?: string;
+    errorClassName?: string;
+    seconds?: boolean;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'className' | 'autoFocus' | 'disabled' | 'required'> & Omit<FieldHeaderProps, 'id'>;
+export type TypeFieldProps = TimeFieldCoreProps & TimeFieldExtraProps & DataTestProp;
+export declare const TimeField: FC<TypeFieldProps>;

package/lib/components/TimeField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import SimpleTimeField from 'react-simple-timefield';
+import styles from './TimeField.module.scss';
+import { TextField } from './TextField';
+export const TimeField = (props) => {
+    const { 'data-test': dataTest = 'time-field', className, disabled, error, errorClassName, id: explicitId, inputClassName, label, labelClassName, name, onBlur, onChange, required, seconds = false, value, helperText, size, showAriaLabel, ...rest } = props;
+    // Use an auto generated id if it's not set explicitly
+    const autoId = useUID();
+    const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
+    return (React.createElement("div", { className: cn(styles.container, className) },
+        React.createElement(SimpleTimeField, { showSeconds: seconds, input: React.createElement(TextField, { name: name, id: id, label: label, error: error, onChange: onChange, errorClassName: errorClassName, inputClassName: inputClassName, labelClassName: labelClassName, onBlur: onBlur, size: size, required: required, disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, "data-test": dataTest, ...rest }), onChange: onChange, value: value })));
+};
+//# sourceMappingURL=TimeField.js.map

package/lib/components/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAKpD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAmBvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,GAAG,YAAY,EACpC,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC7C,oBAAC,eAAe,IACd,WAAW,EAAE,OAAO,EACpB,KAAK,EACH,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,eACX,QAAQ,KACf,IAAI,GACR,EAEJ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TimeFieldFormik.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { TimeFieldExtraProps } from './TimeField';
+import { ExtractKeysOfValueType } from '../utils/types';
+import { FieldValidatorGeneric } from '../utils/formik';
+export type TimeFieldFormikProps<V extends object> = TimeFieldExtraProps & {
+    name: ExtractKeysOfValueType<V, string | undefined>;
+    validate?: FieldValidatorGeneric<string | undefined>;
+};
+export declare const TimeFieldFormik: <V extends object>({ name, validate, ...props }: TimeFieldFormikProps<V>) => ReactElement;

package/lib/components/TimeFieldFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldFormik.js","sourceRoot":"","sources":["../../src/components/TimeFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAS5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAgB,EAAE;IACvH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toast.d.ts

@@ -0,0 +1,29 @@
+import React, { FC, ReactNode } from 'react';
+import { Icon as IconType } from 'react-feather';
+import { DataTestProp } from '../../src';
+export type ToastType = 'success' | 'info' | 'warning' | 'critical';
+export type ToastIconDescriptor = {
+    icon: IconType;
+    ariaLabel: string;
+};
+export declare const ToastIcon: {
+    [key in ToastType]: ToastIconDescriptor;
+};
+export type ToastProps = {
+    type: ToastType;
+    content: ReactNode;
+    dismissableByEscKey?: boolean;
+    closeToast?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    className?: string;
+} & DataTestProp;
+/**
+ * ### 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 declare const Toast: FC<ToastProps>;

package/lib/components/Toast.js

@@ -0,0 +1,56 @@
+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, 'data-test': dataTest = 'toast', }) => {
+    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", { "data-test": dataTest, 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": `${dataTest}-icon`, ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
+        React.createElement("div", { "data-test": `${dataTest}-content`, className: styles.content }, content),
+        closeToast && (React.createElement(IconButton, { "data-test": `${dataTest}-close`, kind: "transparent", className: styles.close, ariaLabel: "Close icon", icon: X, onClick: closeToast }))));
+};
+//# sourceMappingURL=Toast.js.map

package/lib/components/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/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;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,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,EACpC,IAAI,EACJ,OAAO,EACP,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,SAAS,EACT,WAAW,EAAE,QAAQ,GAAG,OAAO,GAChC,EAAE,EAAE;IACH,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,CAAC;YACxB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;QACxC,CAAC;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,0CACa,QAAQ,EACnB,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,iBAAY,GAAG,QAAQ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACjG,0CAAgB,GAAG,QAAQ,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACE,GAAG,QAAQ,QAAQ,EAC9B,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/components/Toast.module.scss

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

@@ -0,0 +1,21 @@
+import React, { FC, FocusEvent, ChangeEvent } from 'react';
+import { DataTestProp } from '../../src';
+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/components/Toggle.js

@@ -0,0 +1,22 @@
+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 = 'toggle', } = 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, "data-test": `${dataTest}-label` }, label)),
+            React.createElement("span", { className: styles.toggleTrack },
+                React.createElement("span", { className: styles.toggleTrackText, "data-test": `${dataTest}-state` }, checked ? 'ON' : 'OFF'))),
+        helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, "data-test": `${dataTest}-helperText` }),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: styles.errorContainer, inputId: id })));
+};
+//# sourceMappingURL=Toggle.js.map

package/lib/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/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,GAAG,QAAQ,GACjC,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,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,GAAG,QAAQ,QAAQ,IAC9D,KAAK,CACD,CACR;YAED,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,eAAa,GAAG,QAAQ,QAAQ,IACpE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAClB,CACF,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,eAAa,GAAG,QAAQ,aAAa,GAAI;QAEhI,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5G,CACP,CAAA;AACH,CAAC,CAAA"}