@hazelcast/ui 1.1.1 → 1.3.0

package/lib/Alert.d.ts

@@ -20,10 +20,11 @@ export declare type AlertActionLink = {
 export declare type AlertAction = AlertActionButton | AlertActionLink;
 export declare type AlertProps = {
     type: ToastType;
-    title: string;
-    content: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
     actions?: AlertAction[];
     className?: string;
+    titleClassName?: string;
     dismissableByEscKey?: boolean;
     closeToast?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 };

package/lib/Alert.js

@@ -10,7 +10,7 @@ import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 import styles from './Alert.module.scss';
 const isAlertActionButton = (action) => action.onClick !== undefined;
-export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast }) => {
+export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast, titleClassName, }) => {
     const { icon, ariaLabel } = ToastIcon[type];
     const closeByEsc = useCallback((nativeEvent) => {
         if (dismissableByEscKey) {
@@ -25,26 +25,27 @@ export const Alert = ({ type, title, content, actions, className, dismissableByE
             [styles.warning]: type === 'warning',
             [styles.critical]: type === 'critical',
         }, className) },
-        React.createElement("div", { className: styles.header },
-            React.createElement(Icon, { "data-test": "alert-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
-            React.createElement("div", { "data-test": "alert-title", className: styles.title }, title),
-            !!closeToast && React.createElement(IconButton, { "data-test": "alert-close", kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
-        React.createElement("div", { "data-test": "alert-body", className: styles.body },
-            React.createElement("div", { "data-test": "alert-content" }, content),
-            (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
-                if (isAlertActionButton(action)) {
-                    const { text, icon, ariaLabel, onClick } = action;
-                    const iconLeftProps = icon && ariaLabel
-                        ? {
-                            iconLeft: icon,
-                            iconLeftAriaLabel: ariaLabel,
-                            iconLeftClassName: styles.actionButtonIcon,
-                        }
-                        : {};
-                    return (React.createElement(Button, Object.assign({ key: aI, size: "small", kind: "transparent", capitalize: false, className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick }, iconLeftProps), text));
-                }
-                const { text, href, ...props } = action;
-                return (React.createElement(Link, Object.assign({ key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small" }, props), text));
-            }))) : null)));
+        React.createElement(Icon, { "data-test": "alert-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
+        React.createElement("div", { className: styles.rightSide },
+            React.createElement("div", { className: styles.header },
+                title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
+                !!closeToast && React.createElement(IconButton, { "data-test": "alert-close", kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
+            React.createElement("div", { "data-test": "alert-body", className: styles.body },
+                content && React.createElement("div", { "data-test": "alert-content" }, content),
+                (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
+                    if (isAlertActionButton(action)) {
+                        const { text, icon, ariaLabel, onClick } = action;
+                        const iconLeftProps = icon && ariaLabel
+                            ? {
+                                iconLeft: icon,
+                                iconLeftAriaLabel: ariaLabel,
+                                iconLeftClassName: styles.actionButtonIcon,
+                            }
+                            : {};
+                        return (React.createElement(Button, { key: aI, kind: "transparent", capitalize: false, className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
+                    }
+                    const { text, href, ...props } = action;
+                    return (React.createElement(Link, { key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small", ...props }, text));
+                }))) : null))));
 };
 //# sourceMappingURL=Alert.js.map

package/lib/Alert.js.map

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

package/lib/Alert.module.scss

@@ -3,20 +3,28 @@
 
 // TODO: potential max-height
 .alert {
-  display: inline-block;
+  display: inline-flex;
   border-radius: c.$borderRadius;
   padding: c.$grid * 2.5;
   width: c.$alertWidth;
 
+  .icon {
+    flex-shrink: 0;
+    margin-right: c.$grid * 2.5;
+  }
+
+  .rightSide {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   .header {
     display: flex;
     flex-direction: row;
     align-items: center;
 
-    .icon {
-      margin-right: c.$grid * 2.5;
-    }
-
     .title {
       flex: 1 0 auto;
       margin-right: c.$grid * 8.5;
@@ -91,7 +99,7 @@
   }
 
   .body {
-    padding: 0 c.$grid * 8.5;
+    padding-right: c.$grid * 8.5;
 
     @include c.typographyBodySmall;
 

package/lib/AutocompleteField.d.ts

@@ -5,7 +5,7 @@ export declare type AutocompleteFieldOption = {
     label: string;
     value: string;
 };
-export declare type RenderOptionFunction = (highlightedLabelText: ReactNode, option: AutocompleteFieldOption, labelMeta: FormatOptionLabelMeta<AutocompleteFieldOption>) => ReactNode;
+export declare type RenderOptionFunction<O = AutocompleteFieldOption> = (highlightedLabelText: ReactNode, option: O extends AutocompleteFieldOption ? O : never, labelMeta: FormatOptionLabelMeta<AutocompleteFieldOption>) => ReactNode;
 export declare type AutocompleteFieldProps = {
     'data-test'?: string;
     className?: string;
@@ -19,6 +19,7 @@ export declare type AutocompleteFieldProps = {
     onChange?: (newValue: string) => void;
     onInputChange?: (newInputValue: string) => void;
     onBlur?: (e: FocusEvent<HTMLElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
     required?: boolean;
     helperText?: HelpProps['helperText'];
     renderOption?: RenderOptionFunction;

package/lib/AutocompleteField.js

@@ -30,31 +30,35 @@ const Input = (innerProps) => {
         ...innerProps,
         autoComplete: 'chrome-off',
     };
-    return React.createElement(components.Input, Object.assign({}, props));
+    return React.createElement(components.Input, { ...props });
 };
 const DropdownIndicator = (props) => {
-    return (React.createElement(components.DropdownIndicator, Object.assign({}, props),
+    return (React.createElement(components.DropdownIndicator, { ...props },
         React.createElement(Search, { size: 20 })));
 };
 // innerProps set event handling
 const ClearIndicator = ({ innerProps }) => {
     // Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
-    return React.createElement(IconButton, Object.assign({}, innerProps, { icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 }));
+    return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, kind: "primary", size: "medium", className: styles.clear, tabIndex: -1 });
 };
 export const highlightOptionText = (labelText, inputValue) => {
-    const customSeparator = '<%>';
+    const separator = '<%>';
     const query = inputValue || '';
-    return labelText
-        .replace(new RegExp(query, 'ig'), `${customSeparator}$&${customSeparator}`)
-        .split(customSeparator)
-        .filter((val) => val)
-        .map((val, i) => (React.createElement("span", { className: cn({
-            'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase(),
-        }), key: val + `${i}` }, val)));
+    return query
+        ? labelText
+            .replace(new RegExp(query, 'ig'), `${separator}$&${separator}`)
+            .split(separator)
+            .filter((val) => val)
+            .map((val, i) => (React.createElement("span", { className: cn({
+                'hz-autocomplete-field__matched-option-text': val.toLowerCase() === query.toLowerCase(),
+            }), key: val + `${i}` }, val)))
+        : labelText;
 };
-export const AutocompleteField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onInputChange, options, required, value, placeholder = 'Search...', renderOption, ...rest }) => {
+export const AutocompleteField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', renderOption, ...rest }) => {
+    // when the user clicks on an input with the value, the value should disappear,
+    // but then it should appear after the user selects something or blurs the input
+    const [isValueHidden, setValueHidden] = useState(false);
     const id = useUID();
-    const [isMenuOpen, setMenuOpen] = useState(false);
     useIsomorphicLayoutEffect(() => {
         const menuContainer = getMenuContainer(menuPortalTarget);
         if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
@@ -67,16 +71,21 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
     }, {}), [options]);
     const selectedOption = useMemo(() => getSelectedOptionFromValue({ value, optionsMap }), [optionsMap, value]);
     const onChangeFn = React.useCallback((option) => {
-        ;
+        setValueHidden(false);
         onChange(option === null ? null : option.value);
     }, [onChange]);
-    const onInputChangeFn = React.useCallback((value) => {
-        // keep menu closed if no value
-        setMenuOpen(!!value);
-        if (onInputChange) {
-            onInputChange(value);
+    const onFocusFn = React.useCallback((e) => {
+        if (onFocus) {
+            onFocus(e);
         }
-    }, [onInputChange]);
+        setValueHidden(true);
+    }, [onFocus]);
+    const onBlurFn = React.useCallback((e) => {
+        if (onBlur) {
+            onBlur(e);
+        }
+        setValueHidden(false);
+    }, [onBlur]);
     const formatOptionLabelFn = React.useCallback((option, labelMeta) => {
         const { inputValue } = labelMeta;
         let optionText = option.label;
@@ -103,6 +112,7 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         'aria-errormessage': error && errorId(id),
         'aria-invalid': !!error,
         'aria-required': required,
+        error,
         isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
         isDisabled: disabled,
         isSearchable: true,
@@ -112,6 +122,8 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         placeholder,
         options,
         onChange: onChangeFn,
+        onFocus: onFocusFn,
+        onBlur: onBlurFn,
         menuPortalTarget: getMenuContainer(menuPortalTarget),
         components: {
             DropdownIndicator,
@@ -121,6 +133,7 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         ...rest,
     };
     return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.withError]: 'error' in props,
             [styles.disabled]: disabled,
             [styles.hasError]: error,
             [styles.empty]: !value,
@@ -131,8 +144,18 @@ export const AutocompleteField = ({ 'data-test': dataTest, className, disabled,
         styles.menuContainer, className) },
         React.createElement(Label, { id: id, label: label, className: cn(styles.label, labelClassName) }),
         React.createElement("div", { className: styles.selectBlock },
-            React.createElement(ReactSelect, Object.assign({ menuIsOpen: isMenuOpen, onInputChange: onInputChangeFn, formatOptionLabel: formatOptionLabelFn }, props)),
+            React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, openMenuOnClick: false, styles: {
+                    ...props.styles,
+                    singleValue: (base) => {
+                        var _a;
+                        return ({
+                            ...base,
+                            ...(_a = props.styles) === null || _a === void 0 ? void 0 : _a.singleValue,
+                            visibility: isValueHidden ? 'hidden' : 'visible',
+                        });
+                    },
+                }, ...props }),
             helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText })),
-        React.createElement(Error, { error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
+        React.createElement(Error, { truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
 //# sourceMappingURL=AutocompleteField.js.map

package/lib/AutocompleteField.js.map

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

package/lib/AutocompleteField.module.scss

@@ -3,7 +3,6 @@
 
 $selectHorizontalPadding: c.$grid * 3;
 $menuMargin: c.$grid * 3;
-
 $select: ':global .hz-autocomplete-field__control';
 
 .container {
@@ -12,10 +11,6 @@ $select: ':global .hz-autocomplete-field__control';
     margin-bottom: c.$grid;
   }
 
-  .errorContainer {
-    margin-top: c.$grid;
-  }
-
   .helperText {
     margin-left: c.$grid * 1.5;
     display: block;
@@ -131,6 +126,7 @@ $select: ':global .hz-autocomplete-field__control';
       line-height: c.$grid * 8;
       padding: 0 $selectHorizontalPadding;
       background-color: transparent;
+
       // Do not remove outline for high-contrast modes
       // https://stackoverflow.com/a/52616313
       outline: c.$outlineWidth solid transparent;
@@ -148,3 +144,5 @@ $select: ':global .hz-autocomplete-field__control';
     }
   }
 }
+
+@include h.withError;

package/lib/AutocompleteFieldFormik.d.ts

@@ -3,6 +3,7 @@ import { AutocompleteFieldProps } from './AutocompleteField';
 import { FieldValidatorGeneric } from './utils/formik';
 declare type AutocompleteFieldFormikProps = AutocompleteFieldProps & {
     validate?: FieldValidatorGeneric<string | null>;
+    onChange?: (value: string | null) => void;
 };
-export declare const AutocompleteFieldFormik: ({ name, validate, ...props }: AutocompleteFieldFormikProps) => ReactElement;
+export declare const AutocompleteFieldFormik: ({ name, validate, onChange, ...props }: AutocompleteFieldFormikProps) => ReactElement;
 export {};

package/lib/AutocompleteFieldFormik.js

@@ -1,13 +1,19 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useField } from 'formik';
 import { AutocompleteField } from './AutocompleteField';
 import { formikTouchAndUpdate, getFieldError } from './utils/formik';
-export const AutocompleteFieldFormik = ({ name, validate, ...props }) => {
-    const [field, meta, { setValue, setTouched }] = useField({
+export const AutocompleteFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
         name,
         validate,
     });
-    const onChange = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-    return (React.createElement(AutocompleteField, Object.assign({}, props, { value: field.value, onChange: onChange, name: name, onBlur: field.onBlur, error: getFieldError(meta) })));
+    const setFormikValue = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange(newValue);
+        }
+        setFormikValue(newValue);
+    }, [setFormikValue, onChange]);
+    return React.createElement(AutocompleteField, { ...props, value: value, onChange: handleChange, name: name, onBlur: onBlur, error: getFieldError(meta) });
 };
 //# sourceMappingURL=AutocompleteFieldFormik.js.map

package/lib/AutocompleteFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFieldFormik.js","sourceRoot":"","sources":["../src/AutocompleteFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,OAAO,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAC/E,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAM3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC,EAAgB,EAAE;IAClH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAgB;QACtE,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAgB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAEjH,OAAO,CACL,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CACvI,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"AutocompleteFieldFormik.js","sourceRoot":"","sources":["../src/AutocompleteFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAC/E,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAO3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC,EAAgB,EAAE;IAC5H,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAgB;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAgB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IACvH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,QAAQ,CAAC,CAAA;SACnB;QAED,cAAc,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AACvI,CAAC,CAAA"}