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

package/lib/components/EmptyState.module.scss

@@ -0,0 +1,87 @@
+@use '../../styles/constants' as c;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .content {
+    .title {
+      margin: c.$grid * 4.5 0 0 0;
+
+      @include c.typographyBodyNormal('bold' !important);
+    }
+
+    .description {
+      color: c.$colorTextSecondary;
+      margin: c.$grid 0 0 0;
+
+      @include c.typographyBodySmall;
+    }
+
+    .action {
+      flex: 1;
+      min-width: c.$emptyStateButtonMinWidthNormal;
+      margin-top: c.$grid * 5;
+    }
+  }
+
+  // Size
+  &.large {
+    .content {
+      .title {
+        margin-top: c.$grid * 5.5;
+      }
+
+      .description {
+        margin-top: c.$grid * 2;
+
+        @include c.typographyBodyNormal;
+      }
+
+      .action {
+        min-width: c.$emptyStateButtonMinWidthLarge;
+        margin-top: c.$grid * 6;
+      }
+    }
+  }
+
+  // Direction
+  &.horizontal {
+    flex: 1;
+    flex-direction: row;
+    text-align: start;
+
+    .icon {
+      flex: 0 0 auto;
+      align-self: flex-start;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-left: c.$grid * 2;
+
+      .title {
+        margin: 0;
+
+        @include c.typographyBodyNormal('bold' !important);
+      }
+
+      .description {
+        margin-top: c.$grid;
+
+        @include c.typographyBodySmall;
+      }
+
+      .action {
+        align-self: flex-start;
+        min-width: auto;
+        margin: c.$grid 0 0 0;
+      }
+    }
+  }
+}

package/lib/components/Error.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { DataTestProp } from '../../src';
+import { TooltipProps } from './Tooltip';
+export declare const errorId: (inputId: string) => string;
+interface ErrorProps extends DataTestProp {
+    error?: string;
+    className?: string;
+    inputId: string;
+    truncated?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
+}
+export declare const Error: FC<ErrorProps>;
+export {};

package/lib/components/Error.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import { TruncatedText } from './TruncatedText';
+import styles from './Error.module.scss';
+export const errorId = (inputId) => `${inputId}-error`;
+/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
+export const Error = ({ error, className, inputId, truncated, tooltipPlacement, 'data-test': dataTest = 'error' }) => (React.createElement("div", { role: "alert", id: errorId(inputId), "data-test": dataTest, className: cn(styles.container, error && styles.hasError, className) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement, hoverAbleTooltip: false }) : error));
+//# sourceMappingURL=Error.js.map

package/lib/components/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../src/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CACpI,6BAAK,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,IAC9H,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAClH,CACP,CAAA"}

package/lib/components/Error.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/constants' as c;
+
+.container {
+  @include c.typographyBodySmall;
+
+  color: c.$colorError;
+  display: none;
+
+  &.hasError {
+    display: block;
+  }
+}

package/lib/components/FieldHeader.d.ts

@@ -0,0 +1,24 @@
+import React, { CSSProperties } from 'react';
+import { HelpProps } from './Help';
+import { DataTestProp } from '../../src';
+export type FieldHeaderSize = 'small' | 'medium' | 'large';
+export type FieldHeaderVariant = 'primary' | 'secondary';
+export type FieldHeaderLabelProps = {
+    label?: string;
+    labelClassName?: string;
+    helperText?: HelpProps['helperText'];
+    helperTextTooltipWordBreak?: CSSProperties['wordBreak'];
+};
+export type FieldHeaderNoLabelProps = {
+    label: never;
+    labelClassName: never;
+    helperText: never;
+    helperTextTooltipWordBreak: never;
+};
+export type FieldHeaderProps = {
+    size?: FieldHeaderSize;
+    variant?: FieldHeaderVariant;
+    id: string;
+    showAriaLabel?: boolean;
+} & DataTestProp & (FieldHeaderNoLabelProps | FieldHeaderLabelProps);
+export declare const FieldHeader: (props: FieldHeaderProps) => React.JSX.Element | null;

package/lib/components/FieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../../src/components/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAwB9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,KAAK,EACL,EAAE,EACF,OAAO,EACP,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,cAAc,EACd,WAAW,EAAE,QAAQ,EACrB,aAAa,EACb,0BAA0B,GAC3B,GAAG,KAAK,CAAA;IAET,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QAEzB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,eACL,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,cAAc,CAAC,GACjF;QACD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,gBAAgB,EAAE,0BAA0B,eACjC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/lib/components/FieldHeader.module.scss

@@ -0,0 +1,20 @@
+@use '../../styles/constants' as c;
+
+.root {
+  display: flex;
+  margin-bottom: c.$grid;
+}
+
+.label {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+
+  &.small {
+    @include c.typographyBodySmall;
+  }
+}
+
+.helperText {
+  flex-shrink: 0;
+  margin-top: c.$grid * 0.5;
+}

package/lib/components/Help.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, FC, ReactElement } from 'react';
+import { DataTestProp } from '../../src';
+import { IconSize } from './Icon';
+import { TooltipProps } from './Tooltip';
+export declare const helpTooltipId: (inputId: string) => string;
+export interface HelpProps extends DataTestProp {
+    parentId: string;
+    helperText: string | ReactElement;
+    placement?: TooltipProps['placement'];
+    className?: string;
+    popperRef?: TooltipProps['popperRef'];
+    size?: IconSize;
+    tooltipWordBreak?: CSSProperties['wordBreak'];
+}
+export declare const Help: FC<HelpProps>;

package/lib/components/Help.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { HelpCircle } from 'react-feather';
+import cn from 'classnames';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+import styleConsts from '../../styles/constants/export.module.scss';
+import styles from './Help.module.scss';
+export const helpTooltipId = (inputId) => `${inputId}-help`;
+export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, popperRef, size = 'small', 'data-test': dataTest = 'help', }) => {
+    const tooltipId = helpTooltipId(parentId);
+    return (React.createElement(Tooltip, { placement: placement, content: helperText, id: tooltipId, popperRef: popperRef, wordBreak: tooltipWordBreak }, (ref) => (React.createElement("div", { ref: ref, "data-test": dataTest, className: cn(styles.container, className) },
+        React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size })))));
+};
+//# sourceMappingURL=Help.js.map

package/lib/components/Help.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAY3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,IACjH,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,eAAa,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC5E,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Help.module.scss

@@ -0,0 +1,9 @@
+@use '../../styles/constants' as c;
+
+.container {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 1;
+  padding-left: c.$grid;
+  padding-right: c.$grid;
+}

package/lib/components/Icon.d.ts

@@ -0,0 +1,30 @@
+import React, { FC, SVGAttributes } from 'react';
+import { DataTestProp } from '../../src';
+export type IconSize = 'small' | 'smallMedium' | 'medium' | 'large' | 'xlarge';
+export type IconAriaProps = {
+    ariaLabel: string | undefined;
+    ariaLabelledBy?: never;
+    ariaHidden?: never;
+} | {
+    ariaLabel?: never;
+    ariaLabelledBy: string;
+    ariaHidden?: never;
+} | {
+    ariaLabel?: never;
+    ariaLabelledBy?: never;
+    ariaHidden?: boolean;
+};
+export type IconType = FC<SVGAttributes<SVGElement> & {
+    color?: string;
+    size?: string | number;
+}>;
+export type IconProps = {
+    color?: string;
+    icon: IconType;
+    size?: IconSize;
+    className?: string;
+    containerClassName?: string;
+    bold?: boolean;
+    role?: string;
+} & IconAriaProps & DataTestProp;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Icon.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import styleConsts from '../../styles/constants/export.module.scss';
+import styles from './Icon.module.scss';
+export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false, role = 'img', 'data-test': dataTest, }, ref) => {
+    const iconStroke = bold ? styleConsts.iconStrokeWidthBold : styleConsts.iconStrokeWidth;
+    const props = {
+        'aria-label': ariaLabel || 'icon',
+        'aria-labelledby': ariaLabelledBy,
+        'aria-hidden': ariaHidden,
+        color,
+        width: '1em',
+        height: '1em',
+        className: cn({
+            [styles.small]: size === 'small',
+            [styles.smallMedium]: size === 'smallMedium',
+            [styles.medium]: size === 'medium',
+            [styles.large]: size === 'large',
+            [styles.xlarge]: size === 'xlarge',
+        }, className),
+        strokeWidth: iconStroke,
+    };
+    return (React.createElement("div", { className: cn(styles.iconContainer, containerClassName), "data-test": dataTest, ref: ref },
+        React.createElement(IconElement, { role: role, ...props })));
+});
+Icon.displayName = 'Icon';
+//# sourceMappingURL=Icon.js.map

package/lib/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAwCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,IAAI,EAAE,WAAW,EACjB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,KAAK,EACZ,WAAW,EAAE,QAAQ,GACtB,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS,IAAI,MAAM;QACjC,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,eAAa,QAAQ,EAAE,GAAG,EAAE,GAAG;QACzF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAClC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/lib/components/Icon.module.scss

@@ -0,0 +1,33 @@
+@use '../../styles/constants' as c;
+
+.iconContainer {
+  display: inline-block;
+
+  // Note: Font-size reset in order break inheritance.
+  font-size: 0;
+
+  .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;
+  }
+}

package/lib/components/IconButton.d.ts

@@ -0,0 +1,49 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { Icon as FeatherIcon } from 'react-feather';
+import { IconProps, IconAriaProps } from './Icon';
+import { TooltipProps } from './Tooltip';
+import { LinkRel, LinkTarget } from './Link';
+import { DataTestProp } from '../helpers/types';
+export type IconButtonKind = 'primary' | 'transparent';
+type IconButtonCommonProps = {
+    icon: FeatherIcon;
+    iconClassName?: string;
+    iconColor?: string;
+    iconRole?: string;
+    loaderRole?: string;
+    kind?: IconButtonKind;
+    size?: IconProps['size'];
+    padding?: 'normal';
+    tooltip?: string;
+    tooltipVisible?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
+} & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
+export type IconButtonNotDisabledProps = {
+    disabledTooltip?: never;
+    disabled?: never;
+    disabledTooltipPlacement?: never;
+    disabledTooltipVisible?: never;
+};
+export type IconButtonDisabledProps = {
+    disabledTooltip: string;
+    disabled: boolean;
+    disabledTooltipPlacement?: TooltipProps['placement'];
+    disabledTooltipVisible?: boolean;
+};
+type IconButtonComponentProps = ({
+    component: 'a';
+    href: string;
+    target?: LinkTarget;
+    rel?: LinkRel | LinkRel[];
+    type?: never;
+    loading?: never;
+} & IconButtonNotDisabledProps) | ({
+    component?: 'button';
+    href?: never;
+    target?: never;
+    rel?: never;
+    loading?: boolean;
+} & (IconButtonDisabledProps | IconButtonNotDisabledProps) & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>);
+export type IconButtonProps = IconButtonCommonProps & IconButtonComponentProps;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/IconButton.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import mergeRefs from 'react-merge-refs';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+import { Loader } from './Loader';
+import styles from './IconButton.module.scss';
+export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, iconRole, loaderRole, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel, 
+// Disabled tooltip
+disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel = 'noopener', target, type = 'button', loading, padding, tooltip, tooltipPlacement, tooltipVisible, 'data-test': dataTest = 'icon-button', ...rest }, ref) => {
+    const tooltipId = useUID();
+    const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
+    const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, placement: disabled ? disabledTooltipPlacement : tooltipPlacement, visible: disabled ? disabledTooltipVisible : tooltipVisible }, (tooltipRef) => (React.createElement(Component, { className: cn(styles.iconButton, {
+            [styles.primary]: kind === 'primary',
+            [styles.transparent]: kind === 'transparent',
+            [styles.paddingNormal]: padding === 'normal',
+        }, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, "data-test": dataTest, ...rest },
+        React.createElement("span", { className: styles.body, ref: mergeRefs([ref, tooltipRef]) },
+            loading && React.createElement(Loader, { role: loaderRole, size: size }),
+            !loading && (React.createElement(Icon, { role: iconRole, className: iconClassName, color: iconColor, "data-test": `${dataTest}-icon`, icon: icon, size: size, ariaHidden: true })))))));
+});
+IconButton.displayName = 'IconButton';
+//# sourceMappingURL=IconButton.js.map

package/lib/components/IconButton.js.map

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

package/lib/components/IconButton.module.scss

@@ -0,0 +1,59 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.iconButton {
+  display: inline-flex;
+  cursor: pointer;
+  border: c.$borderWidth solid transparent;
+  background-color: transparent;
+  border-radius: c.$borderRadius;
+  color: inherit;
+  padding: 0;
+  box-sizing: border-box;
+
+  &.paddingNormal {
+    // With icon size "normal" matches text input
+    /* doiuse-disable calc */
+    padding: calc(#{c.$grid * 2} - #{c.$borderWidth});
+    /* doiuse-enable calc */
+  }
+
+  .body {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    color: c.$colorPrimary;
+
+    &:hover,
+    &.hover {
+      background-color: c.$colorNeutralLighter;
+      border-color: c.$colorNeutralLight;
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: c.$colorTextSecondary;
+    }
+
+    &:focus,
+    &.focus {
+      @include h.outlineFormField;
+    }
+  }
+
+  &.transparent {
+    color: inherit;
+
+    &:focus,
+    &.focus {
+      @include h.outlineFormField;
+    }
+  }
+}

package/lib/components/InteractiveList.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataTestProp } from '../../src';
+import { ExtractKeysOfValueType } from '../utils/types';
+import { FieldHeaderProps } from './FieldHeader';
+import { TextFieldExtraProps } from './TextField';
+export type InteractiveListExtraProps = {
+    children?: React.ReactNode | React.ReactNode[];
+    iconClassName?: string;
+    itemClassName?: string;
+    listClassName?: string;
+} & Pick<TextFieldExtraProps<'text'>, 'inputIcon' | 'type' | 'placeholder' | 'inputClassName' | 'className'> & Omit<FieldHeaderProps, 'id'>;
+export type InteractiveListCoreProps<V> = {
+    name: ExtractKeysOfValueType<V, string[]>;
+    value: string[];
+    error?: string;
+    inputValue: string;
+    setInputValue: (val: string) => void;
+    onAddItem: () => Promise<string | undefined>;
+    onRemoveItem: (idx: number) => boolean;
+} & InteractiveListExtraProps & DataTestProp;
+export type InteractiveListProps<V> = InteractiveListExtraProps & InteractiveListCoreProps<V>;
+export type InteractiveListInputRef = {
+    setValue: (value: string) => void;
+    addItem: () => Promise<string | undefined>;
+    getValue: () => string;
+};
+export type InteractiveListItemProps = {
+    content: string;
+    error?: string;
+    idx: number;
+    onRemoveItem: (idx: number) => boolean;
+} & DataTestProp;
+export declare const InteractiveListItem: ({ onRemoveItem, content, error, idx, "data-test": dataTest }: InteractiveListItemProps) => React.JSX.Element;
+/**
+ * This component is meant to be used only from InteractiveListFormik
+ * @private
+ */
+export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, "data-test": dataTest, }: InteractiveListProps<V>) => React.JSX.Element;

package/lib/components/InteractiveList.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Plus, X } from 'react-feather';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { IconButton } from './IconButton';
+import { Error, errorId } from './Error';
+import { TextField } from './TextField';
+import styles from './InteractiveList.module.scss';
+export const InteractiveListItem = ({ onRemoveItem, content, error, idx, 'data-test': dataTest }) => {
+    const id = useUID();
+    const errorProps = error
+        ? {
+            'aria-invalid': true,
+            'aria-errormessage': errorId(id),
+        }
+        : {};
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-test": dataTest, className: styles.content },
+            React.createElement("span", { id: id, ...errorProps }, content),
+            ' ',
+            React.createElement(IconButton, { kind: "primary", ariaLabel: "Remove Item", icon: X, size: "medium", className: styles.removeIcon, onClick: () => {
+                    onRemoveItem(idx);
+                } })),
+        error && React.createElement(Error, { error: error, inputId: id })));
+};
+/**
+ * This component is meant to be used only from InteractiveListFormik
+ * @private
+ */
+export const InteractiveList = ({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, 'data-test': dataTest = 'interactive-list', }) => {
+    const id = useUID();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-test": dataTest, className: cn(styles.inputRow, className) },
+            React.createElement(TextField, { id: id, type: type, helperText: helperText, inputIcon: inputIcon, inputClassName: cn(styles.input, inputClassName), inputContainerClassName: styles.inputContainer, inputBorderOverlayClassName: styles.inputBorderOverlay, error: typeof error === 'string' ? error : undefined, label: label, name: name, value: inputValue, onChange: ({ target: { value } }) => {
+                    setInputValue(value);
+                }, onKeyDown: async (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        await onAddItem();
+                    }
+                } },
+                React.createElement(IconButton, { "data-test": `${dataTest}-add-button`, kind: "transparent", ariaLabel: "Add Icon", icon: Plus, className: cn(styles.addIcon, iconClassName), size: "medium", onClick: () => void onAddItem() }))),
+        children,
+        React.createElement("ul", { className: cn(styles.list, listClassName) }, value.map((str, idx) => (React.createElement("li", { key: str, className: itemClassName },
+            React.createElement(InteractiveListItem, { onRemoveItem: onRemoveItem, idx: idx, content: str, "data-test": `${dataTest}-item`, error: typeof error === 'object' && error[idx] ? error[idx] : undefined })))))));
+};
+//# sourceMappingURL=InteractiveList.js.map

package/lib/components/InteractiveList.js.map

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

package/lib/components/InteractiveList.module.scss

@@ -0,0 +1,72 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+
+$addIconSpacing: c.$grid;
+
+.inputRow {
+  display: flex;
+  margin-bottom: c.$grid * 3;
+
+  .input {
+    border-right: none;
+  }
+
+  .inputBorderOverlay {
+    border-radius: c.$borderRadius 0 0 c.$borderRadius;
+    border-right: none;
+  }
+
+  .inputContainer {
+    border-radius: c.$borderRadius 0 0 c.$borderRadius;
+
+    .input:focus {
+      & ~ .inputBorderOverlay {
+        border-right: none;
+        box-shadow: none;
+        border-color: c.$colorPrimary;
+      }
+    }
+  }
+
+  .addIcon {
+    display: block;
+    border-radius: 0 c.$borderRadius c.$borderRadius 0;
+    border: c.$borderWidth solid c.$colorPrimary;
+    background-color: c.$colorPrimary;
+    color: c.$colorNeutralWhite;
+    height: c.$inputHeight;
+    width: c.$inputHeight;
+
+    &:hover {
+      background-color: c.$colorPrimaryLight;
+      border-color: c.$colorPrimaryLight;
+    }
+  }
+}
+
+ul.list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .removeIcon {
+    margin-right: 0;
+
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: c.$colorPrimaryLight;
+    }
+  }
+
+  .content {
+    background: c.$colorOverlayBackground;
+    padding: math.div(c.$grid, 3) c.$grid math.div(c.$grid, 3) c.$grid * 2;
+    margin-top: c.$grid * 3;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: c.$borderRadius;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}