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

package/lib/components/Terminal.module.scss

@@ -0,0 +1,109 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.container {
+  // Match TextField
+  @include c.typographyBodySmall;
+
+  color: c.$colorText;
+  padding: c.$grid * 5;
+  background-color: c.$colorNeutralWhite;
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+
+  > input {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: none;
+    border-bottom: c.$outlineWidth solid c.$colorNeutral;
+    padding: 0;
+
+    // Align input bottom line with the icon
+    margin-bottom: c.$grid;
+    outline: none;
+    background-color: transparent;
+    color: c.$colorText;
+    box-sizing: border-box;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+
+    &.blank {
+      border-bottom-color: transparent;
+    }
+
+    &:hover,
+    &.hover {
+      border-bottom-color: c.$colorText;
+    }
+
+    &:focus-visible,
+    &.focus {
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: transparent solid c.$outlineWidth;
+      border-bottom-color: c.$colorAccessibilityOutline;
+    }
+
+    &:disabled {
+      color: c.$colorTextSecondary;
+      background-color: transparent;
+      border-bottom-color: c.$colorNeutral;
+    }
+
+    &:read-only {
+      border-bottom-color: c.$colorNeutral;
+    }
+  }
+}
+
+.welcome {
+  @include c.typographyBodySmall('bold');
+
+  margin: 0;
+  margin-bottom: c.$grid * 5;
+}
+
+.commandRes {
+  color: c.$colorSuccessDarkest;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+
+  > p {
+    margin: 0;
+    margin-bottom: c.$grid;
+    white-space: break-spaces;
+  }
+}
+
+.commandError {
+  color: c.$colorErrorDark;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+}
+
+.loading {
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+  position: relative;
+}
+
+.loadingA11yText {
+  @include h.visuallyHidden;
+}
+
+.terminalIcon {
+  margin-right: c.$grid * 3;
+}
+
+.prompt {
+  @include c.typographyBodySmall('bold');
+
+  margin-right: c.$grid;
+}

package/lib/components/TextArea.js

@@ -1,80 +1,25 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactUid = require('react-uid');
-var components_Error = require('./Error.js');
-var components_FieldHeader = require('./FieldHeader.js');
-var TextArea_module = require('./TextArea.module.scss.js');
-
-const TextArea = props => {
-  const {
-    error,
-    label,
-    name,
-    onBlur,
-    onChange,
-    placeholder,
-    value,
-    disabled,
-    className,
-    labelClassName,
-    textareaClassName,
-    errorClassName,
-    required,
-    resizable = true,
-    helperText,
-    size = 'medium',
-    'data-test': dataTest = 'textarea',
-    ...htmlAttrs
-  } = props;
-  const id = reactUid.useUID();
-  const textareaRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(TextArea_module.default.container, {
-      [TextArea_module.default.disabled]: disabled,
-      [TextArea_module.default.hasError]: error,
-      [TextArea_module.default.withError]: 'error' in props
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_FieldHeader.FieldHeader, {
-    "data-test": dataTest,
-    label: label,
-    id: id,
-    helperText: helperText,
-    labelClassName: labelClassName,
-    size: size
-  }), /*#__PURE__*/React.createElement("div", {
-    className: TextArea_module.default.textAreaContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: TextArea_module.default.textAreaWrapper
-  }, /*#__PURE__*/React.createElement("textarea", {
-    ref: textareaRef,
-    "aria-invalid": !!error,
-    "aria-required": required,
-    "aria-errormessage": error && components_Error.errorId(id),
-    id: id,
-    className: cn({
-      [TextArea_module.default.notResizable]: !resizable
-    }, textareaClassName),
-    placeholder: placeholder,
-    name: name,
-    onBlur: onBlur,
-    onChange: onChange,
-    required: required,
-    value: value !== null && value !== void 0 ? value : '',
-    disabled: disabled,
-    ...htmlAttrs
-  }), /*#__PURE__*/React.createElement("div", {
-    className: TextArea_module.default.borderOverlay
-  }))), /*#__PURE__*/React.createElement(components_Error.Error, {
-    "data-test": `${dataTest}-error`,
-    truncated: true,
-    error: error,
-    className: cn(TextArea_module.default.errorContainer, errorClassName),
-    inputId: id
-  }));
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import { Error, errorId } from './Error';
+import { FieldHeader } from './FieldHeader';
+import styles from './TextArea.module.scss';
+export const TextArea = (props) => {
+    const { error, label, name, onBlur, onChange, placeholder, value, disabled, className, labelClassName, textareaClassName, errorClassName, required, resizable = true, helperText, size = 'medium', 'data-test': dataTest = 'textarea', ...htmlAttrs } = props;
+    const id = useUID();
+    const textareaRef = useRef(null);
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.withError]: 'error' in props,
+        }, className) },
+        React.createElement(FieldHeader, { "data-test": dataTest, label: label, id: id, helperText: helperText, labelClassName: labelClassName, size: size }),
+        React.createElement("div", { className: styles.textAreaContainer },
+            React.createElement("div", { className: styles.textAreaWrapper },
+                React.createElement("textarea", { ref: textareaRef, "aria-invalid": !!error, "aria-required": required, "aria-errormessage": error && errorId(id), id: id, className: cn({
+                        [styles.notResizable]: !resizable,
+                    }, textareaClassName), placeholder: placeholder, name: name, onBlur: onBlur, onChange: onChange, required: required, value: value !== null && value !== void 0 ? value : '', disabled: disabled, ...htmlAttrs }),
+                React.createElement("div", { className: styles.borderOverlay }))),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
 };
-
-exports.TextArea = TextArea;
-//# sourceMappingURL=TextArea.js.map
+//# sourceMappingURL=TextArea.js.map

package/lib/components/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../src/components/TextArea.tsx"],"sourcesContent":[null],"names":["TextArea","props","error","label","name","onBlur","onChange","placeholder","value","disabled","className","labelClassName","textareaClassName","errorClassName","required","resizable","helperText","size","dataTest","htmlAttrs","id","useUID","textareaRef","useRef","React","createElement","cn","styles","container","hasError","withError","FieldHeader","textAreaContainer","textAreaWrapper","ref","errorId","notResizable","borderOverlay","Error","truncated","errorContainer","inputId"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAsB3C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IAErD,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;SACrC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,iBAAY,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI;QAC9H,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;YACtC,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;gBACpC,kCACE,GAAG,EAAE,WAAW,kBACF,CAAC,CAAC,KAAK,mBACN,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,CACX;wBACE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS;qBAClC,EACD,iBAAiB,CAClB,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChI,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TextArea.module.scss

@@ -0,0 +1,144 @@
+@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/components/TextAreaFormik.js

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

package/lib/components/TextAreaFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaFormik.js","sources":["../../src/components/TextAreaFormik.tsx"],"sourcesContent":[null],"names":["TextAreaFormik","name","validate","props","field","meta","useField","React","createElement","TextArea","value","onChange","onBlur","error","touched","initialError","undefined"],"mappings":";;;;;;AAWO,MAAMA,cAAc,GAAGA,CAAmB;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAA0B,KAAkB;AACrH,EAAA,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAqB;IACjDL,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,4BAAQ,EAAA;AAAA,IAAA,GACHN,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":"TextAreaFormik.js","sourceRoot":"","sources":["../../src/components/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/components/TextField.js

@@ -1,19 +1,16 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var reactUid = require('react-uid');
-var mergeRefs = require('react-merge-refs');
-var helpers_forms = require('../helpers/forms.js');
-var components_Icon = require('./Icon.js');
-var components_Error = require('./Error.js');
-var components_FieldHeader = require('./FieldHeader.js');
-var components_Help = require('./Help.js');
-var components_IconButton = require('./IconButton.js');
-var TextField_module = require('./TextField.module.scss.js');
-
 // https://zeroheight.com/11d0e6dac/p/316944-text-field
+import React, { forwardRef, useRef, } from 'react';
+import cn from 'classnames';
+import { X } from 'react-feather';
+import { useUID } from 'react-uid';
+import mergeRefs from 'react-merge-refs';
+import { triggerNativeInputChange } from '../helpers/forms';
+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.
@@ -29,143 +26,40 @@ var TextField_module = require('./TextField.module.scss.js');
  * Use a text input when the expected user input is a single line of text.
  */
 const TextFieldInternal = (props, ref) => {
-  const {
-    'data-test': dataTest = 'text-field',
-    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,
-    onKeyDown,
-    placeholder,
-    required,
-    type = 'text',
-    value,
-    readOnly,
-    onClick,
-    clearable,
-    iconSize = size,
-    errorTooltipPlacement = 'top',
-    children,
-    containerRef,
-    ...htmlAttrs
-  } = props;
-  const autoId = reactUid.useUID();
-  const id = explicitId !== null && explicitId !== void 0 ? explicitId : autoId;
-  const inputRef = React.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) {
-      helpers_forms.triggerNativeInputChange('', inputRef.current);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: cn(TextField_module.default.container, {
-      [TextField_module.default.withError]: 'error' in props,
-      [TextField_module.default.small]: size === 'small',
-      [TextField_module.default.large]: size === 'large',
-      [TextField_module.default.disabled]: disabled,
-      [TextField_module.default.hasError]: error,
-      [TextField_module.default.withIcon]: inputIcon,
-      [TextField_module.default.empty]: value === undefined
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_FieldHeader.FieldHeader, {
-    id: id,
-    size: size,
-    label: label,
-    variant: variant,
-    helperText: helperText,
-    showAriaLabel: showAriaLabel,
-    labelClassName: labelClassName,
-    "data-test": `${dataTest}-header`,
-    helperTextTooltipWordBreak: helperTextTooltipWordBreak
-  }), /*#__PURE__*/React.createElement("div", {
-    className: TextField_module.default.inputBlock
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: cn(TextField_module.default.inputContainer, inputContainerClassName)
-  }, /*#__PURE__*/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,
-    onKeyDown: onKeyDown,
-    onClick: onClick,
-    "aria-label": showAriaLabel ? ariaLabel || label : undefined,
-    "aria-invalid": !!error,
-    "aria-required": required,
-    "aria-describedby": helperText && components_Help.helpTooltipId(id),
-    "aria-errormessage": error && components_Error.errorId(id),
-    disabled: disabled,
-    placeholder: placeholder,
-    className: cn(inputClassName, {
-      [TextField_module.default.trailingIcon]: inputTrailingIcon
-    }),
-    ...htmlAttrs
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn(TextField_module.default.borderOverlay, inputBorderOverlayClassName)
-  }), inputIcon && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: inputIcon,
-    ariaLabel: label,
-    containerClassName: cn(TextField_module.default.inputIconContainer, TextField_module.default.inputLeftIconContainer),
-    className: TextField_module.default.inputIcon,
-    size: "small"
-  })), clearable && !disabled && isNotEmpty && (/*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    icon: reactFeather.X,
-    size: size,
-    ariaLabel: "Clear field",
-    onClick: handleClear,
-    className: TextField_module.default.clearButton,
-    "data-test": dataTest ? `${dataTest}-clear` : undefined
-  })), inputContainerChild, inputTrailingIcon && inputTrailingIconLabel && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: inputTrailingIcon,
-    ariaLabel: inputTrailingIconLabel,
-    containerClassName: cn(TextField_module.default.inputIconContainer, TextField_module.default.inputTrailingIconContainer),
-    className: TextField_module.default.inputIconTrailing,
-    size: iconSize
-  }))), children), /*#__PURE__*/React.createElement(components_Error.Error, {
-    truncated: true,
-    inputId: id,
-    error: error,
-    "data-test": `${dataTest}-error`,
-    tooltipPlacement: errorTooltipPlacement,
-    className: cn(TextField_module.default.errorContainer, errorClassName)
-  }));
+    const { 'data-test': dataTest = 'text-field', 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, onKeyDown, placeholder, required, type = 'text', value, readOnly, onClick, clearable, iconSize = size, errorTooltipPlacement = 'top', children, containerRef, ...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, "data-test": `${dataTest}-header`, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
+        React.createElement("div", { className: styles.inputBlock },
+            React.createElement("div", { ref: containerRef, 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, onKeyDown: onKeyDown, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel || label : 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, "data-test": `${dataTest}-error`, tooltipPlacement: errorTooltipPlacement, className: cn(styles.errorContainer, errorClassName) })));
 };
-const TextFieldWithRef = /*#__PURE__*/React.forwardRef(TextFieldInternal);
-const TextField = ({
-  mRef,
-  ...props
-}) => (/*#__PURE__*/React.createElement(TextFieldWithRef, {
-  ref: mRef,
-  ...props
-}));
-
-exports.TextField = TextField;
-//# sourceMappingURL=TextField.js.map
+const TextFieldWithRef = forwardRef(TextFieldInternal);
+export const TextField = ({ mRef, ...props }) => (React.createElement(TextFieldWithRef, { ref: mRef, ...props }));
+//# sourceMappingURL=TextField.js.map