@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../src/components/TextField.tsx"],"sourcesContent":[null],"names":["TextFieldInternal","props","ref","dataTest","ariaLabel","className","disabled","error","errorClassName","helperText","helperTextTooltipWordBreak","id","explicitId","inputClassName","inputContainerChild","inputContainerClassName","inputBorderOverlayClassName","inputIcon","inputTrailingIcon","inputTrailingIconLabel","label","labelClassName","showAriaLabel","name","size","variant","onBlur","onFocus","onChange","onKeyDown","placeholder","required","type","value","readOnly","onClick","clearable","iconSize","errorTooltipPlacement","children","containerRef","htmlAttrs","autoId","useUID","inputRef","useRef","isNotEmpty","undefined","length","mergedRef","mergeRefs","handleClear","current","triggerNativeInputChange","React","createElement","cn","styles","container","withError","small","large","hasError","withIcon","empty","FieldHeader","inputBlock","inputContainer","helpTooltipId","errorId","trailingIcon","borderOverlay","Icon","icon","containerClassName","inputIconContainer","inputLeftIconContainer","IconButton","X","clearButton","inputTrailingIconContainer","inputIconTrailing","Error","truncated","inputId","tooltipPlacement","errorContainer","TextFieldWithRef","forwardRef","TextField","mRef"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"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"}

package/lib/components/TextField.module.scss

@@ -0,0 +1,209 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+$inputHorizontalPadding: c.$grid * 3;
+$marginLeftWithIcon: c.$grid * 5;
+
+.container {
+  color: c.$colorText;
+  box-sizing: border-box;
+
+  @include c.typographyBodySmall;
+
+  .inputBlock {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .inputContainer {
+    position: relative;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    box-sizing: border-box;
+    height: c.$inputHeight;
+    background-color: c.$colorOverlayBackground;
+    border-radius: c.$borderRadius;
+  }
+
+  .inputIconContainer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: $marginLeftWithIcon + $inputHorizontalPadding;
+  }
+
+  .inputTrailingIconContainer {
+    width: auto;
+    margin-right: c.$grid * 1.5;
+  }
+
+  .inputLeftIconContainer {
+    order: -1;
+  }
+
+  .inputIcon,
+  .inputIconTrailing {
+    pointer-events: none;
+  }
+
+  .inputIcon {
+    left: ($marginLeftWithIcon + $inputHorizontalPadding) * 0.5;
+  }
+
+  .inputIconTrailing {
+    right: -(c.$grid);
+    color: c.$colorPrimary;
+  }
+
+  // Here we go. Another border hack. Why?
+  // TextField is re-used for PasswordField. PasswordField is meant for passwords.
+  // Passwords are often handled by password managers.
+  // Password managers often add their own UI on top of the password inputs.
+  // To make our password visibility toggle and their UI not overlap,
+  // we have to make the actual input shorter than its visual representation.
+  // However, visually we still would like our users to see it as one unit.
+  // As result, we cannot apply border to the input itself (because it's shorter).
+  // We could have applied border styles to .inputContainer. But IE11 does not support :focus-within.
+  // So to properly apply focus styles we need a sibling element to the actual input that supports :focus.
+  // .borderOverlay is that very sibling element.
+  .borderOverlay {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    z-index: c.$zIndex100;
+    border-radius: c.$borderRadius;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    box-sizing: border-box;
+  }
+
+  input {
+    display: block;
+    flex: 1 1 auto;
+    background-color: transparent;
+    padding: 0 $inputHorizontalPadding;
+    margin: 0;
+    border: none;
+    box-sizing: border-box;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    height: 100%;
+    width: 100%;
+
+    &::placeholder {
+      color: c.$colorTextSecondary;
+    }
+  }
+
+  .clearButton {
+    display: inline-flex;
+    align-items: center;
+    margin-right: c.$grid * 1.5;
+  }
+
+  &.small {
+    .inputContainer {
+      height: c.$inputHeightSmall;
+    }
+  }
+
+  &.large {
+    .inputContainer {
+      height: c.$inputHeightLarge;
+    }
+  }
+
+  &.mockAutofill {
+    input {
+      @include h.mockChromeAutofill;
+    }
+  }
+
+  &.withIcon {
+    input {
+      padding-left: 0;
+    }
+  }
+
+  &.empty {
+    color: c.$colorTextSecondary;
+  }
+
+  input:hover,
+  input.hover {
+    & ~ .borderOverlay {
+      border-color: c.$colorPrimary;
+    }
+
+    & ~ .inputIconContainer > .inputIcon {
+      color: c.$colorPrimary;
+    }
+  }
+
+  &.hasError input {
+    & ~ .borderOverlay {
+      border-color: c.$colorError;
+    }
+  }
+
+  &.hasError label {
+    color: c.$colorError;
+  }
+
+  input:focus,
+  input.focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: transparent solid c.$outlineWidth;
+
+    & ~ .borderOverlay {
+      @include h.outlineFormField;
+    }
+
+    & ~ .inputIconContainer > .inputIcon {
+      color: c.$colorPrimary;
+    }
+  }
+
+  // .hasError styles split in two groups to always color the icon with the error colors
+  // but the change the color of the border
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &.hasError input {
+    ~ .inputIconContainer > .inputIcon {
+      color: c.$colorError;
+    }
+  }
+
+  &.disabled {
+    color: c.$colorTextSecondary;
+
+    .inputContainer {
+      background-color: c.$colorNeutral;
+    }
+
+    input {
+      & ~ .borderOverlay {
+        border-color: c.$colorNeutralLight;
+      }
+
+      & ~ .inputIconContainer > .inputIcon {
+        color: c.$colorTextSecondary;
+      }
+
+      & ~ .inputIconContainer > .inputIconTrailing {
+        color: c.$colorTextSecondary;
+      }
+    }
+  }
+}
+
+@include h.withError;

package/lib/components/TextFieldFormik.js

@@ -1,47 +1,23 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_TextField = require('./TextField.js');
-var utils_formik = require('../utils/formik.js');
-
-const TextFieldFormik = ({
-  type,
-  name,
-  validate,
-  onChange,
-  onBlur,
-  ...props
-}) => {
-  const [{
-    onBlur: onFormikBlur,
-    value,
-    onChange: onFormikChange
-  }, meta] = formik.useField({
-    name,
-    validate
-  });
-  const onBlurInner = React.useCallback(e => {
-    if (onBlur) {
-      onBlur(e);
-    }
-    onFormikBlur(e);
-  }, [onBlur, onFormikBlur]);
-  return /*#__PURE__*/React.createElement(components_TextField.TextField, {
-    ...props,
-    type: type,
-    name: name,
-    value: value,
-    onChange: React.useCallback(e => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-      onFormikChange(e);
-    }, [onFormikChange, onChange]),
-    onBlur: onBlurInner,
-    error: utils_formik.getFieldError(meta)
-  });
+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) }));
 };
-
-exports.TextFieldFormik = TextFieldFormik;
-//# sourceMappingURL=TextFieldFormik.js.map
+//# sourceMappingURL=TextFieldFormik.js.map

package/lib/components/TextFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFormik.js","sources":["../../src/components/TextFieldFormik.tsx"],"sourcesContent":[null],"names":["TextFieldFormik","type","name","validate","onChange","onBlur","props","onFormikBlur","value","onFormikChange","meta","useField","onBlurInner","React","useCallback","e","createElement","TextField","target","error","getFieldError"],"mappings":";;;;;;;AAcO,MAAMA,eAAe,GAAGA,CAAmB;EAChDC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAK,CACgB,KAAkB;AAC1C,EAAA,MAAM,CAAC;AAAED,IAAAA,MAAM,EAAEE,YAAY;IAAEC,KAAK;AAAEJ,IAAAA,QAAQ,EAAEK;AAAc,GAAE,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAqB;IACrGT,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMS,WAAW,GAAGC,KAAK,CAACC,WAAW,CAClCC,CAAmB,IAAI;AACtB,IAAA,IAAIV,MAAM,EAAE;MACVA,MAAM,CAACU,CAAC,CAAC;AACX,IAAA;IACAR,YAAY,CAACQ,CAAC,CAAC;AACjB,EAAA,CAAC,EACD,CAACV,MAAM,EAAEE,YAAY,CAAC,CACvB;AAED,EAAA,oBACEM,KAAA,CAAAG,aAAA,CAACC,8BAAS,EAAA;AAAA,IAAA,GACJX,KAAK;AACTL,IAAAA,IAAI,EAAEA,IAAI;AACVC,IAAAA,IAAI,EAAEA,IAAI;AACVM,IAAAA,KAAK,EAAEA,KAAK;AACZJ,IAAAA,QAAQ,EAAEU,iBAAW,CAClBC,CAAC,IAAI;AACJ,MAAA,IAAIX,QAAQ,EAAE;AACZA,QAAAA,QAAQ,CAACW,CAAC,CAACG,MAAM,CAACV,KAAK,CAAC;AAC1B,MAAA;MAEAC,cAAc,CAACM,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAACN,cAAc,EAAEL,QAAQ,CAAC,CAC3B;AACDC,IAAAA,MAAM,EAAEO,WAAW;IACnBO,KAAK,EAAEC,0BAAa,CAACV,IAAI;AAAC,GAAA,CAC1B;AAEN;;;;"}
+{"version":3,"file":"TextFieldFormik.js","sourceRoot":"","sources":["../../src/components/TextFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAUtE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAChD,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACgB,EAAgB,EAAE;IAC1C,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACrG,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,CAAC,CAAC,CAAA;QACX,CAAC;QACD,YAAY,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YAC1B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TimeField.js

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

package/lib/components/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../src/components/TimeField.tsx"],"sourcesContent":[null],"names":["TimeField","props","dataTest","className","disabled","error","errorClassName","id","explicitId","inputClassName","label","labelClassName","name","onBlur","onChange","required","seconds","value","helperText","size","showAriaLabel","rest","autoId","useUID","React","createElement","cn","styles","container","SimpleTimeField","showSeconds","input","TextField"],"mappings":";;;;;;;;;AA4BO,MAAMA,SAAS,GAAwBC,KAAK,IAAI;EACrD,MAAM;IACJ,WAAW,EAAEC,QAAQ,GAAG,YAAY;IACpCC,SAAS;IACTC,QAAQ;IACRC,KAAK;IACLC,cAAc;AACdC,IAAAA,EAAE,EAAEC,UAAU;IACdC,cAAc;IACdC,KAAK;IACLC,cAAc;IACdC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACRC,IAAAA,OAAO,GAAG,KAAK;IACfC,KAAK;IACLC,UAAU;IACVC,IAAI;IACJC,aAAa;IACb,GAAGC;AAAI,GACR,GAAGpB,KAAK;AACT;AACA,EAAA,MAAMqB,MAAM,GAAGC,eAAM,EAAE;AACvB,EAAA,MAAMhB,EAAE,GAAGC,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAVA,UAAU,GAAIc,MAAM;AAE/B,EAAA,oBACEE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,SAAS,EAAEuB,EAAE,CAACC,wBAAM,CAACC,SAAS,EAAEzB,SAAS;AAAC,GAAA,eAC7CqB,KAAA,CAAAC,aAAA,CAACI,eAAe,EAAA;AACdC,IAAAA,WAAW,EAAEd,OAAO;AACpBe,IAAAA,KAAK,eACHP,KAAA,CAAAC,aAAA,CAACO,8BAAS;AACRpB,MAAAA,IAAI,EAAEA,IAAI;AACVL,MAAAA,EAAE,EAAEA,EAAE;AACNG,MAAAA,KAAK,EAAEA,KAAK;AACZL,MAAAA,KAAK,EAAEA,KAAK;AACZS,MAAAA,QAAQ,EAAEA,QAAQ;AAClBR,MAAAA,cAAc,EAAEA,cAAc;AAC9BG,MAAAA,cAAc,EAAEA,cAAc;AAC9BE,MAAAA,cAAc,EAAEA,cAAc;AAC9BE,MAAAA,MAAM,EAAEA,MAAM;AACdM,MAAAA,IAAI,EAAEA,IAAI;AACVJ,MAAAA,QAAQ,EAAEA,QAAQ;AAClBX,MAAAA,QAAQ,EAAEA,QAAQ;AAClBgB,MAAAA,aAAa,EAAEA,aAAa;AAC5BF,MAAAA,UAAU,EAAEA,UAAU;AAAA,MAAA,WAAA,EACXhB,QAAQ;MAAA,GACfmB;MACJ;AAEJP,IAAAA,QAAQ,EAAEA,QAAQ;AAClBG,IAAAA,KAAK,EAAEA;AAAK,GAAA,CACZ,CACE;AAEV;;;;"}
+{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,eAAe,MAAM,wBAAwB,CAAA;AAKpD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAmBvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EACJ,WAAW,EAAE,QAAQ,GAAG,YAAY,EACpC,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,EAAE,EAAE,UAAU,EACd,cAAc,EACd,KAAK,EACL,cAAc,EACd,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,sDAAsD;IACtD,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC7C,oBAAC,eAAe,IACd,WAAW,EAAE,OAAO,EACpB,KAAK,EACH,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,eACX,QAAQ,KACf,IAAI,GACR,EAEJ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TimeField.module.scss

@@ -0,0 +1,4 @@
+.container {
+  display: inline-flex;
+  flex-direction: column;
+}

package/lib/components/TimeFieldFormik.js

@@ -1,27 +1,11 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_TimeField = require('./TimeField.js');
-
-const TimeFieldFormik = ({
-  name,
-  validate,
-  ...props
-}) => {
-  const [field, meta] = formik.useField({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement(components_TimeField.TimeField, {
-    ...props,
-    name: name,
-    value: field.value,
-    onChange: field.onChange,
-    onBlur: field.onBlur,
-    error: meta.touched || meta.initialError === meta.error ? meta.error : undefined
-  });
+import React from 'react';
+import { useField } from 'formik';
+import { TimeField } from './TimeField';
+export const TimeFieldFormik = ({ name, validate, ...props }) => {
+    const [field, meta] = useField({
+        name,
+        validate,
+    });
+    return (React.createElement(TimeField, { ...props, name: name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, error: meta.touched || meta.initialError === meta.error ? meta.error : undefined }));
 };
-
-exports.TimeFieldFormik = TimeFieldFormik;
-//# sourceMappingURL=TimeFieldFormik.js.map
+//# sourceMappingURL=TimeFieldFormik.js.map

package/lib/components/TimeFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFieldFormik.js","sources":["../../src/components/TimeFieldFormik.tsx"],"sourcesContent":[null],"names":["TimeFieldFormik","name","validate","props","field","meta","useField","React","createElement","TimeField","value","onChange","onBlur","error","touched","initialError","undefined"],"mappings":";;;;;;AAYO,MAAMA,eAAe,GAAGA,CAAmB;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAA2B,KAAkB;AACvH,EAAA,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAqB;IACjDL,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,8BAAS,EAAA;AAAA,IAAA,GACJN,KAAK;AACTF,IAAAA,IAAI,EAAEA,IAAI;IACVS,KAAK,EAAEN,KAAK,CAACM,KAAK;IAClBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,MAAM,EAAER,KAAK,CAACQ,MAAM;AACpBC,IAAAA,KAAK,EAAER,IAAI,CAACS,OAAO,IAAIT,IAAI,CAACU,YAAY,KAAKV,IAAI,CAACQ,KAAK,GAAGR,IAAI,CAACQ,KAAK,GAAGG;AAAS,GAAA,CAChF;AAEN;;;;"}
+{"version":3,"file":"TimeFieldFormik.js","sourceRoot":"","sources":["../../src/components/TimeFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAS5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAgB,EAAE;IACvH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toast.js

@@ -1,31 +1,28 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var useKey = require('react-use/lib/useKey');
-var utils_keyboard = require('../utils/keyboard.js');
-var components_IconButton = require('./IconButton.js');
-var components_Icon = require('./Icon.js');
-var Toast_module = require('./Toast.module.scss.js');
-
-const ToastIcon = {
-  success: {
-    icon: reactFeather.CheckCircle,
-    ariaLabel: 'Check circle icon'
-  },
-  info: {
-    icon: reactFeather.Info,
-    ariaLabel: 'Info circle icon'
-  },
-  warning: {
-    icon: reactFeather.AlertTriangle,
-    ariaLabel: 'Warning triangle icon'
-  },
-  critical: {
-    icon: reactFeather.AlertCircle,
-    ariaLabel: 'Info critical circle icon'
-  }
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { AlertTriangle, CheckCircle, AlertCircle, Info, X } from 'react-feather';
+import useKey from 'react-use/lib/useKey';
+import { escKeyFilterPredicate } from '../utils/keyboard';
+import { IconButton } from './IconButton';
+import { Icon } from './Icon';
+import styles from './Toast.module.scss';
+export const ToastIcon = {
+    success: {
+        icon: CheckCircle,
+        ariaLabel: 'Check circle icon',
+    },
+    info: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    warning: {
+        icon: AlertTriangle,
+        ariaLabel: 'Warning triangle icon',
+    },
+    critical: {
+        icon: AlertCircle,
+        ariaLabel: 'Info critical circle icon',
+    },
 };
 /**
  * ### Purpose
@@ -37,55 +34,23 @@ const ToastIcon = {
  * ### Note
  * The toast is designed to be integrated with https://fkhadra.github.io/react-toastify/introduction/
  */
-const Toast = ({
-  type,
-  content,
-  dismissableByEscKey = true,
-  closeToast,
-  className,
-  'data-test': dataTest = 'toast'
-}) => {
-  const {
-    icon,
-    ariaLabel
-  } = ToastIcon[type];
-  const closeByEsc = React.useCallback(nativeEvent => {
-    if (dismissableByEscKey) {
-      closeToast === null || closeToast === void 0 ? void 0 : closeToast();
-      nativeEvent.stopImmediatePropagation();
-    }
-  }, [closeToast, dismissableByEscKey]);
-  useKey(utils_keyboard.escKeyFilterPredicate, closeByEsc, {
-    options: {
-      once: true
-    }
-  }, [closeByEsc, dismissableByEscKey]);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(Toast_module.default.toast, {
-      [Toast_module.default.success]: type === 'success',
-      [Toast_module.default.info]: type === 'info',
-      [Toast_module.default.warning]: type === 'warning',
-      [Toast_module.default.critical]: type === 'critical'
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": `${dataTest}-icon`,
-    ariaLabel: ariaLabel,
-    icon: icon,
-    className: Toast_module.default.icon
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-test": `${dataTest}-content`,
-    className: Toast_module.default.content
-  }, content), closeToast && (/*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    "data-test": `${dataTest}-close`,
-    kind: "transparent",
-    className: Toast_module.default.close,
-    ariaLabel: "Close icon",
-    icon: reactFeather.X,
-    onClick: closeToast
-  })));
+export const Toast = ({ type, content, dismissableByEscKey = true, closeToast, className, 'data-test': dataTest = 'toast', }) => {
+    const { icon, ariaLabel } = ToastIcon[type];
+    const closeByEsc = useCallback((nativeEvent) => {
+        if (dismissableByEscKey) {
+            closeToast === null || closeToast === void 0 ? void 0 : closeToast();
+            nativeEvent.stopImmediatePropagation();
+        }
+    }, [closeToast, dismissableByEscKey]);
+    useKey(escKeyFilterPredicate, closeByEsc, { options: { once: true } }, [closeByEsc, dismissableByEscKey]);
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.toast, {
+            [styles.success]: type === 'success',
+            [styles.info]: type === 'info',
+            [styles.warning]: type === 'warning',
+            [styles.critical]: type === 'critical',
+        }, className) },
+        React.createElement(Icon, { "data-test": `${dataTest}-icon`, ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
+        React.createElement("div", { "data-test": `${dataTest}-content`, className: styles.content }, content),
+        closeToast && (React.createElement(IconButton, { "data-test": `${dataTest}-close`, kind: "transparent", className: styles.close, ariaLabel: "Close icon", icon: X, onClick: closeToast }))));
 };
-
-exports.Toast = Toast;
-exports.ToastIcon = ToastIcon;
-//# sourceMappingURL=Toast.js.map
+//# sourceMappingURL=Toast.js.map