@hazelcast/ui 1.0.3 → 1.2.1-next.24

package/lib/SelectField.js

@@ -1,196 +0,0 @@
-import React, { useMemo } from 'react';
-import cn from 'classnames';
-import ReactSelect, { components } from 'react-select';
-import ReactSelectCreatable from 'react-select/creatable';
-import { ChevronDown, X } from 'react-feather';
-import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
-import { useUID } from 'react-uid';
-import { Error, errorId } from './Error';
-import { Label } from './Label';
-import { Help } from './Help';
-import { Icon } from './Icon';
-import { IconButton } from './IconButton';
-import { canUseDOM } from './utils/ssr';
-import styles from './SelectField.module.scss';
-const isRenderMenuFooterFunction = (fn) => typeof fn === 'function';
-const DropdownIndicator = () => React.createElement(Icon, { icon: ChevronDown, ariaHidden: true, size: "medium", className: styles.chevron });
-// 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 }));
-};
-const Input = (innerProps) => {
-    // autoComplete='off' is hard-coded inside SelectField, but doesn't work in Chrome.
-    // Having an invalid value hard-coded disabled it in all browsers.
-    const props = {
-        ...innerProps,
-        autoComplete: 'chrome-off',
-    };
-    return React.createElement(components.Input, Object.assign({}, props));
-};
-// This component is implemented because we want to style things with the css (as opposed to the react-select
-// recommended way of styling things via js).
-//
-// We simply inject `.multiValueIsFocused`.
-const MultiValue = (props) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    props.components.Remove = MultiValueRemove;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    props.components.Label = MultiValueLabel;
-    return React.createElement(components.MultiValue, Object.assign({}, props, { className: cn(styles.multiValue, { [styles.multiValueIsFocused]: props.isFocused }) }));
-};
-// Self styled version of the MultiValue/Label
-const MultiValueLabel = (props) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment
-    const children = props.children;
-    return React.createElement("div", { className: cn(styles.multiValueLabel) },
-        " ",
-        children,
-        " ");
-};
-// Self styled version of the MultiValue/Remove button
-const MultiValueRemove = (props) => {
-    // We have to pass down the onClick
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment
-    const onClick = props.innerProps.onClick;
-    const handleMouseDown = (event) => {
-        // prevent opening the dropdown
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    const handleClick = (event) => {
-        event.button === 0 && onClick && onClick(event);
-    };
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { className: cn(styles.multiValueRemove), onClick: handleClick, onMouseDown: handleMouseDown, role: "button", tabIndex: -1, "aria-label": "Remove" },
-        React.createElement(Icon, { icon: X, size: "small", ariaHidden: true })));
-};
-const MenuList = (props) => {
-    const { renderMenuFooter } = props.selectProps;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(components.MenuList, Object.assign({}, props), props.children),
-        isRenderMenuFooterFunction(renderMenuFooter) && renderMenuFooter()));
-};
-function isSimpleOption(option) {
-    return !!option.value;
-}
-function isOptionsGroup(option) {
-    return !!option.options;
-}
-function isMultipleModeGuard(value, isMultiple) {
-    return isMultiple;
-}
-const getMenuContainer = (menuPortalTarget) => {
-    if (menuPortalTarget == 'body') {
-        // There is no document is SSR environment
-        return canUseDOM ? document.body : undefined;
-    }
-    if (menuPortalTarget == 'self') {
-        return undefined;
-    }
-    return menuPortalTarget;
-};
-/**
- * Transforms the value passed to our Select component so that it's in a format as underlying react-select expects
- * @param value - single value or an array of values
- * @param optionsMap - an object where option values are mapped to react-select expected objects
- * @param isMulti - boolean indicating whether we're in a multiple mode or not
- */
-export function getSelectedOptionFromValue({ value, optionsMap, isMulti, }) {
-    var _a;
-    if (isMultipleModeGuard(value, isMulti)) {
-        // if it's multi value, let's transform a value array to an array containing SelectFieldOptions
-        return value.map((val) => { var _a; return (_a = optionsMap[val]) !== null && _a !== void 0 ? _a : { value: val, label: val }; });
-    }
-    else {
-        if (value === null) {
-            return null;
-        }
-        return (_a = optionsMap[value]) !== null && _a !== void 0 ? _a : { value: value, label: value };
-    }
-}
-export const SelectField = ({ 'data-test': dataTest, className, disabled, error, errorClassName, helperText, isClearable, isCreatable = false, isMulti = false, isSearchable = true, label, labelClassName, showAriaLabel = false, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, ...iconAndRest }) => {
-    const id = useUID();
-    const { iconLeft, iconLeftAriaLabel, iconLeftClassName, iconLeftContainerClassName, ...rest } = iconAndRest;
-    useIsomorphicLayoutEffect(() => {
-        const menuContainer = getMenuContainer(menuPortalTarget);
-        if (menuContainer && !menuContainer.className.includes(styles.menuContainer)) {
-            menuContainer.className = `${menuContainer.className} ${styles.menuContainer}`;
-        }
-    }, [menuPortalTarget]);
-    const optionsMap = React.useMemo(() => 
-    // need this type assertion because of the TS issue https://github.com/microsoft/TypeScript/issues/7294
-    options.reduce((acc, optionOrGroup) => {
-        // if it's a simple non-group option
-        if (isSimpleOption(optionOrGroup)) {
-            acc[optionOrGroup.value] = optionOrGroup;
-            // else it's a group option
-        }
-        else if (isOptionsGroup(optionOrGroup)) {
-            optionOrGroup.options.reduce((innerAcc, option) => {
-                innerAcc[option.value] = option;
-                return innerAcc;
-            }, acc);
-        }
-        return acc;
-    }, {}), [options]);
-    const onChangeMultipleFn = React.useCallback((values) => {
-        ;
-        onChange(values.map(({ value }) => value));
-    }, [onChange]);
-    const onChangeFn = React.useCallback((option) => {
-        ;
-        onChange(option === null ? null : option.value);
-    }, [onChange]);
-    const selectedOption = useMemo(() => getSelectedOptionFromValue({ optionsMap, value, isMulti }), [optionsMap, isMulti, value]);
-    const props = {
-        inputId: id,
-        className: 'hz-select-field',
-        classNamePrefix: 'hz-select-field',
-        'aria-label': showAriaLabel ? label : undefined,
-        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
-        'aria-errormessage': error && errorId(id),
-        'aria-invalid': !!error,
-        'aria-required': required,
-        isClearable: isClearable !== null && isClearable !== void 0 ? isClearable : false,
-        isDisabled: disabled,
-        isSearchable: isSearchable,
-        isMulti: isMulti,
-        name: name,
-        value: selectedOption,
-        options,
-        onChange: (isMulti ? onChangeMultipleFn : onChangeFn),
-        placeholder,
-        menuPlacement,
-        menuPortalTarget: getMenuContainer(menuPortalTarget),
-        components: {
-            DropdownIndicator,
-            ClearIndicator,
-            MultiValue,
-            MenuList,
-            Input,
-        },
-        formatGroupLabel,
-        formatOptionLabel,
-        renderMenuFooter,
-        ...rest,
-    };
-    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
-            [styles.disabled]: disabled,
-            [styles.hasError]: error,
-            [styles.empty]: !value,
-            [styles.multiContainer]: isMulti,
-        }, 
-        // Menu container is either this select itself or any other element
-        // We can always add this class to the select itself because even if the menu container is any parent it won't break it
-        // However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
-        styles.menuContainer, className) },
-        !showAriaLabel && React.createElement(Label, { id: id, label: label, className: cn(styles.label, labelClassName) }),
-        React.createElement("div", { className: styles.selectBlock },
-            iconLeft && iconLeftAriaLabel && (React.createElement(Icon, { containerClassName: cn(styles.iconLeftContainer, iconLeftContainerClassName), icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "select-field-icon-left", className: cn(styles.iconLeft, iconLeftClassName) })),
-            isCreatable ? React.createElement(ReactSelectCreatable, Object.assign({}, props)) : React.createElement(ReactSelect, Object.assign({}, props)),
-            helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText })),
-        React.createElement(Error, { error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
-};
-//# sourceMappingURL=SelectField.js.map

package/lib/SelectField.js.map

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

package/lib/SelectField.module.scss

@@ -1,251 +0,0 @@
-@use '../styles/constants' as c;
-@use '../styles/helpers' as h;
-
-$selectHorizontalPadding: c.$grid * 3;
-$menuMargin: c.$grid * 3;
-
-$select: ':global .hz-select-field__control';
-
-.container {
-  .label {
-    display: block;
-    margin-bottom: c.$grid;
-  }
-
-  .errorContainer {
-    margin-top: c.$grid;
-  }
-
-  .helperText {
-    margin-left: c.$grid * 1.5;
-    display: block;
-  }
-
-  .chevron {
-    transition: 0s;
-    color: c.$colorPrimary;
-    margin-left: $selectHorizontalPadding;
-  }
-  :global .hz-select-field__control--menu-is-open :local .chevron {
-    transform: rotate(180deg);
-  }
-
-  .clear {
-    margin-left: $selectHorizontalPadding;
-  }
-
-  :global .hz-select-field {
-    flex: 1 1 auto;
-
-    @include c.typographyBodySmall;
-  }
-
-  :global .hz-select-field__value-container {
-    padding: 0;
-  }
-
-  :global .hz-select-field__indicator-separator {
-    display: none;
-  }
-
-  #{$select} {
-    cursor: pointer;
-    color: c.$colorText;
-    min-height: c.$inputHeight;
-    padding-left: c.$grid * 3;
-    padding-right: c.$grid * 2;
-    box-sizing: border-box;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    border-radius: c.$borderRadius;
-    background-color: c.$colorNeutralLighter;
-    transition: none;
-  }
-
-  &.disabled {
-    #{$select} {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
-      border-color: c.$colorNeutralLight;
-    }
-
-    .chevron {
-      transition: 0s;
-      color: c.$colorTextSecondary;
-    }
-  }
-
-  &.hasError {
-    #{$select} {
-      border-color: c.$colorError;
-    }
-  }
-
-  // We target specifically #{$select} not to apply hover styles to the select when a helper icon is hovered
-  #{$select}:hover,
-  &.hover #{$select} {
-    border-color: c.$colorPrimary;
-    transition: none;
-  }
-
-  &.focus #{$select},
-  #{$select}.hz-select-field__control--is-focused {
-    @include h.outlineFormField;
-  }
-
-  .selectBlock {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: relative;
-
-    .iconLeftContainer {
-      .iconLeft {
-        position: absolute;
-        left: 0;
-        top: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        z-index: c.$zIndex100;
-        padding: 0 c.$grid * 2 0 c.$grid * 3;
-      }
-
-      & + :global(.hz-select-field) {
-        #{$select} {
-          padding-left: c.$grid * 10;
-        }
-      }
-    }
-  }
-}
-
-// when .isMulti is true, we have some tweaks overall
-.multiContainer {
-  :global .hz-select-field__value-container {
-    padding: c.$grid 0;
-  }
-
-  :global .hz-select-field__value-container--has-value {
-    margin-left: -1.5 * c.$grid; // padding is narrower in .multiContainer (when it has any values selected)
-  }
-
-  :global .hz-select-field__indicators {
-    align-items: flex-start;
-    margin-top: c.$grid * 1.6;
-  }
-
-  .multiValue {
-    background-color: c.$colorNeutralWhite;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    border-radius: c.$borderRadius;
-    height: c.$grid * 5.5; // makes 22px; design is 21px.
-    overflow: hidden;
-  }
-
-  // Styles for MultiValue chips - focused state.
-  // We inject `.multiValueIsFocused` from js (it does not have an actual :focused state).
-  .multiValueIsFocused {
-    @include h.outlineFormField;
-
-    // override our outlineFormField inset shadow, for fixing
-    // the glitch case on an hovered remove button.
-    box-shadow: 0 0 0 (c.$outlineWidth - c.$borderWidth) c.$colorAccessibilityOutline;
-
-    :global .hz-select-field__multi-value__label {
-      // turn off the bogus shadow of the label
-      box-shadow: none;
-    }
-  }
-
-  .multiValueLabel {
-    @include c.typographyBodySmall;
-    @include h.overflowEllipsis;
-
-    color: c.$colorText;
-    padding: 0 c.$grid;
-  }
-
-  .multiValueRemove {
-    display: flex;
-    align-items: center;
-    color: c.$colorPrimary;
-
-    &:hover {
-      background-color: c.$colorNeutral;
-      border-color: c.$colorNeutralLight;
-    }
-  }
-
-  &.disabled {
-    :global .hz-select-field__multi-value--is-disabled {
-      background-color: c.$colorNeutral;
-    }
-    .multiValueRemove {
-      color: c.$colorTextSecondary;
-    }
-  }
-}
-
-.menuContainer {
-  :global .hz-select-field__menu-portal {
-    z-index: c.$zIndex2000;
-  }
-
-  :global .hz-select-field__menu {
-    margin-top: $menuMargin;
-    margin-bottom: $menuMargin;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    border-radius: c.$borderRadius;
-    background-color: c.$colorNeutralLighter;
-    overflow: hidden;
-    box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
-    z-index: c.$zIndex1000;
-
-    @include c.typographyBodySmall;
-
-    :global .hz-select-field__menu-list {
-      padding: 0;
-      color: c.$colorTextSecondary;
-    }
-
-    :global .hz-select-field__option,
-    :global .hz-select-field__menu-notice {
-      height: c.$inputHeight;
-      line-height: c.$inputHeight;
-      padding: 0 $selectHorizontalPadding;
-      background-color: transparent;
-      // Do not remove outline for high-contrast modes
-      // https://stackoverflow.com/a/52616313
-      outline: c.$outlineWidth solid transparent;
-      text-align: left;
-
-      &:global.hz-select-field__option--is-focused {
-        @include h.outlineSimple;
-
-        color: c.$colorText;
-        background-color: c.$colorNeutral;
-      }
-
-      &:global.hz-select-field__option--is-selected {
-        color: c.$colorPrimary;
-      }
-    }
-  }
-
-  :global .hz-select-field__group {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  :global .hz-select-field__group-heading {
-    margin-bottom: 0;
-    padding-top: 2 * c.$grid;
-    padding-bottom: 2 * c.$grid;
-    background-color: c.$colorNeutralWhite;
-    color: c.$colorTextSecondary;
-    font-size: c.$fontSizeBodySmaller;
-    font-weight: c.$fontWeightTextBold;
-    text-transform: inherit;
-  }
-}

package/lib/SelectFieldFormik.d.ts

@@ -1,20 +0,0 @@
-import React, { ReactElement } from 'react';
-import { SelectFieldExtraProps } from './SelectField';
-import { FieldValidatorGeneric } from './utils/formik';
-import { ExtractKeysOfValueType } from './utils/types';
-export declare type SelectFieldFormikProps<V extends object, OV = string> = SelectFieldExtraProps<OV> & ({
-    name: ExtractKeysOfValueType<V, OV | null>;
-    isClearable: true;
-    isMulti?: false;
-    validate?: FieldValidatorGeneric<OV | null>;
-} | {
-    name: ExtractKeysOfValueType<V, OV>;
-    isClearable?: false;
-    isMulti?: false;
-    validate?: FieldValidatorGeneric<OV>;
-} | {
-    name: ExtractKeysOfValueType<V, OV[]>;
-    isMulti: true;
-    validate?: FieldValidatorGeneric<OV[]>;
-});
-export declare const SelectFieldFormik: <V extends object, OV extends React.ReactText = string>({ name, validate, isClearable, isMulti, ...props }: SelectFieldFormikProps<V, OV>) => ReactElement;

package/lib/SelectFieldFormik.js

@@ -1,19 +0,0 @@
-import React, { useMemo } from 'react';
-import { useField } from 'formik';
-import { SelectField } from './SelectField';
-import { formikTouchAndUpdate, getFieldError } from './utils/formik';
-export const SelectFieldFormik = ({ name, validate, isClearable, isMulti, ...props }) => {
-    const [field, meta, { setValue, setTouched }] = useField({
-        name,
-        validate,
-    });
-    const onChange = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-    const dynamicProps = {
-        value: field.value,
-        onChange,
-        isClearable,
-        isMulti,
-    };
-    return React.createElement(SelectField, Object.assign({}, props, dynamicProps, { name: name, onBlur: field.onBlur, error: getFieldError(meta) }));
-};
-//# sourceMappingURL=SelectFieldFormik.js.map

package/lib/SelectFieldFormik.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectFieldFormik.js","sourceRoot":"","sources":["../src/SelectFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,OAAO,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAsD,MAAM,eAAe,CAAA;AAC/F,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAwB3F,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAwD,EACvF,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,GAAG,KAAK,EACsB,EAAgB,EAAE;IAIhD,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAiB;QACvE,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAiB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAElH,MAAM,YAAY,GAAG;QACnB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,QAAQ;QACR,WAAW;QACX,OAAO;KAC2B,CAAA;IAEpC,OAAO,oBAAC,WAAW,oBAAK,KAAK,EAAM,YAAY,IAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAA;AACnH,CAAC,CAAA"}