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

package/lib/TextArea.module.scss

@@ -1,144 +0,0 @@
-@use '../styles/constants' as c;
-@use '../styles/helpers' as h;
-
-// Why is it so complex? Why do we need .borderOverlay?
-// Ideally, we would have used native `border` for every style: hover, error, focus.
-// Since our focus outline is thicker than the native border, we cannot use the native border for focus styles.
-// Say, the initial border is 1px. For focus you make it 2px.
-// As result, it shifts the content inside. Not nice UX at all.
-// To work around that in other places, we do not change the thickness of the border on focus.
-// Instead we add a 1px inset box-shadow which adds ups to the border and gives us the desired 2px outline on focus.
-// Back to the textarea. As you can see it is supposed to have rounded corners. So we use border-radius.
-// Ideally, we would have used border-radius on the textarea itself
-// and applied the same technique with the inset box-shadow.
-// Guess what? Chrome does not apply border-radius to the scrollbar inside of the textarea.
-// Next step is to add a wrapping div to the textarea, and apply the border-radius,
-// the border itself and the inset box-shadow there.
-// Now the inset box-shadow is rendered under the textarea,
-// so the scrollbar is rendered on top of it and the textarea text as well.
-// At least it makes sense. After all, it is a shadow. It is supposed to decorate, not overlap and override.
-// Let's go deeper down the rabbit hole.
-// We add the wrapping div and add the border-radius there, but we do not add the border itself.
-// Instead we make the wrapping div relative.
-// Next, we add an absolute child div. We add the border with the inset box-shadow to that div,
-// so it is rendered on top of the textarea.
-// Finally, we add textarea:focus styling to support IE11 that does not play nice with :focus-within.
-
-.container {
-  @include c.typographyBodySmall;
-
-  color: c.$colorText;
-  box-sizing: border-box;
-
-  .label {
-    display: block;
-    margin-bottom: c.$grid;
-
-    &.small {
-      @include c.typographyBodySmall;
-    }
-  }
-
-  .helperText {
-    display: block;
-    margin: 2 * c.$grid 0 0 c.$grid;
-  }
-
-  .textAreaContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  .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;
-  }
-
-  .textAreaWrapper {
-    position: relative;
-    width: 100%;
-    border-radius: c.$borderRadius;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  textarea {
-    display: block;
-    padding: c.$grid * 2 c.$grid * 3;
-    border: none;
-    box-sizing: border-box;
-    width: 100%;
-    font-family: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    background-color: c.$colorOverlayBackground;
-    /* doiuse-disable css-resize */
-    resize: vertical;
-    /* doiuse-enable css-resize */
-
-    // Note: Resize is not supported by IE11, it's presence does no harm though
-    &.notResizable {
-      /* doiuse-disable css-resize */
-      resize: none;
-      /* doiuse-enable css-resize */
-    }
-
-    &::placeholder {
-      color: c.$colorTextSecondary;
-    }
-  }
-
-  &.hover .textAreaWrapper,
-  .textAreaWrapper:hover {
-    .borderOverlay {
-      border-color: c.$colorPrimary;
-    }
-  }
-
-  &.disabled {
-    .textAreaWrapper {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
-
-      .borderOverlay {
-        border-color: c.$colorNeutralLight;
-      }
-    }
-  }
-
-  &.hasError {
-    .textAreaWrapper .borderOverlay {
-      border-color: c.$colorError;
-    }
-
-    label {
-      color: c.$colorError;
-    }
-  }
-
-  textarea:focus {
-    // Do not remove outline for high-contrast modes
-    // https://stackoverflow.com/a/52616313
-    outline: transparent solid c.$outlineWidth;
-  }
-
-  &.focus .textAreaWrapper .borderOverlay,
-  .textAreaWrapper textarea:focus + .borderOverlay {
-    @include h.outlineFormField;
-  }
-}
-
-@include h.withError;

package/lib/TextAreaFormik.d.ts

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

package/lib/TextAreaFormik.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextAreaFormik.js","sourceRoot":"","sources":["../src/TextAreaFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AAQzD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA0B,EAAgB,EAAE;IACrH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,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/TextField.d.ts

@@ -1,49 +0,0 @@
-import React, { ChangeEvent, FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactElement, MouseEvent, Ref } from 'react';
-import { DataTestProp } from '@hazelcast/helpers';
-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;
-    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;
-    onKeyPress?: (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?: React.Ref<HTMLInputElement> | undefined;
-}) => JSX.Element;
-export {};

package/lib/TextField.js

@@ -1,65 +0,0 @@
-// https://zeroheight.com/11d0e6dac/p/316944-text-field
-import React, { forwardRef, useRef, } from 'react';
-import cn from 'classnames';
-import { triggerNativeInputChange } from '@hazelcast/helpers';
-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 of 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, 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, onKeyPress, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', children, ...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, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
-        React.createElement("div", { className: styles.inputBlock },
-            React.createElement("div", { 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, onKeyPress: onKeyPress, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel : 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, 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/TextField.js.map

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

package/lib/TextField.module.scss

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

@@ -1,11 +0,0 @@
-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/TextFieldFormik.js

@@ -1,23 +0,0 @@
-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/TextFieldFormik.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextFieldFormik.js","sourceRoot":"","sources":["../src/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,gBAAgB,CAAA;AAUrE,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;YACV,MAAM,CAAC,CAAC,CAAC,CAAA;SACV;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;gBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;aACzB;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/TimeField.d.ts

@@ -1,17 +0,0 @@
-import { FocusEvent, ChangeEvent, FC, InputHTMLAttributes } from 'react';
-import { DataTestProp } from '@hazelcast/helpers';
-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/TimeField.js

@@ -1,15 +0,0 @@
-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, 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", { "data-test": dataTest, 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, ...rest }), onChange: onChange, value: value })));
-};
-//# sourceMappingURL=TimeField.js.map

package/lib/TimeField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../src/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,EACrB,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,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAClE,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,KAClB,IAAI,GACR,EAEJ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/TimeFieldFormik.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-import { TimeFieldExtraProps } from './TimeField';
-import { ExtractKeysOfValueType } from '../src/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/TimeFieldFormik.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeFieldFormik.js","sourceRoot":"","sources":["../src/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/Toast.d.ts

@@ -1,28 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-import { Icon as IconType } from 'react-feather';
-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;
-};
-/**
- * ### 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>;