@seeqdev/qomponents 0.0.132 → 0.0.133

package/dist/TextArea/TextArea.test.js

@@ -1,68 +1,68 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TextArea } from './TextArea';
-describe('TextArea', () => {
-    class Context {
-        testId = 'textAreaTestId';
-        props = {
-            onChange: jest.fn(),
-            onKeyUp: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderTextArea = (props) => render(React.createElement(TextArea, { ...props }));
-    it('renders the provided value', () => {
-        const value = 'hello, this is text for a text area.';
-        renderTextArea({ ...tc.props, value });
-        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
-    });
-    it('renders the provided placeholder', () => {
-        const placeholder = 'Prompt to enter';
-        renderTextArea({ ...tc.props, placeholder });
-        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
-    });
-    it('calls onChange handler', async () => {
-        renderTextArea({ ...tc.props });
-        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
-        expect(tc.props.onChange).toHaveBeenCalled();
-    });
-    it('calls the onKeyUp handler', async () => {
-        renderTextArea({ ...tc.props });
-        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
-        expect(tc.props.onKeyUp).toHaveBeenCalled();
-    });
-    it('respects readOnly', async () => {
-        renderTextArea({ ...tc.props, disabled: true });
-        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
-    });
-    it('provides rows', async () => {
-        renderTextArea({ ...tc.props, rows: 7 });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('rows', 7);
-    });
-    it('provides cols', async () => {
-        renderTextArea({ ...tc.props, cols: 8 });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('cols', 8);
-    });
-    it('provides name', async () => {
-        const name = 'myTextArea';
-        renderTextArea({ ...tc.props, name });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
-    });
-    it('provides id', async () => {
-        const id = 'myTextId';
-        renderTextArea({ ...tc.props, id });
-        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
-    });
-    it('provides extraClassNames', async () => {
-        const extraClassNames = 'extra css';
-        renderTextArea({ ...tc.props, extraClassNames });
-        expect(screen.getByTestId(tc.testId)).toHaveClass(extraClassNames);
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextArea } from './TextArea';
+describe('TextArea', () => {
+    class Context {
+        testId = 'textAreaTestId';
+        props = {
+            onChange: jest.fn(),
+            onKeyUp: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderTextArea = (props) => render(React.createElement(TextArea, { ...props }));
+    it('renders the provided value', () => {
+        const value = 'hello, this is text for a text area.';
+        renderTextArea({ ...tc.props, value });
+        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
+    });
+    it('renders the provided placeholder', () => {
+        const placeholder = 'Prompt to enter';
+        renderTextArea({ ...tc.props, placeholder });
+        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+    });
+    it('calls onChange handler', async () => {
+        renderTextArea({ ...tc.props });
+        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
+        expect(tc.props.onChange).toHaveBeenCalled();
+    });
+    it('calls the onKeyUp handler', async () => {
+        renderTextArea({ ...tc.props });
+        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
+        expect(tc.props.onKeyUp).toHaveBeenCalled();
+    });
+    it('respects readOnly', async () => {
+        renderTextArea({ ...tc.props, disabled: true });
+        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
+    });
+    it('provides rows', async () => {
+        renderTextArea({ ...tc.props, rows: 7 });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('rows', 7);
+    });
+    it('provides cols', async () => {
+        renderTextArea({ ...tc.props, cols: 8 });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('cols', 8);
+    });
+    it('provides name', async () => {
+        const name = 'myTextArea';
+        renderTextArea({ ...tc.props, name });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
+    });
+    it('provides id', async () => {
+        const id = 'myTextId';
+        renderTextArea({ ...tc.props, id });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
+    });
+    it('provides extraClassNames', async () => {
+        const extraClassNames = 'extra css';
+        renderTextArea({ ...tc.props, extraClassNames });
+        expect(screen.getByTestId(tc.testId)).toHaveClass(extraClassNames);
+    });
+});
 //# sourceMappingURL=TextArea.test.js.map

package/dist/TextArea/TextArea.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=TextArea.types.js.map

package/dist/TextArea/index.js

@@ -1,2 +1,2 @@
-export { TextArea as default } from './TextArea';
+export { TextArea as default } from './TextArea';
 //# sourceMappingURL=index.js.map

package/dist/TextField/TextField.js

@@ -1,79 +1,79 @@
-import React, { useEffect, useRef, useState } from 'react';
-import '../styles.css';
-import { setValidInputDimension } from '../utils/validateStyleDimension';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = [
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-].join(' ');
-const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
-    ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
-    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
-    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
-const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
-const sizeClasses = {
-    sm: 'tw-text-sm',
-    lg: 'tw-text-xl',
-};
-/**
- * Textfield.
- */
-export const TextField = React.forwardRef((props, ref) => {
-    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
-    const internalRef = useRef(null);
-    const [cursor, setCursor] = useState(null);
-    const tooltipData = getQTipData(tooltipProps);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
-    useEffect(() => {
-        const input = internalRef.current;
-        if (input && type !== 'number' && type !== 'email')
-            input.setSelectionRange(cursor, cursor);
-    }, [ref, cursor, value]);
-    const handleChange = (e) => {
-        setCursor(e.target.selectionStart);
-        onChange && onChange(e);
-    };
-    useEffect(() => {
-        /**
-         * we need to change the value only if it's different since the internal state of "input" will change it anyway
-         * this will only be the case when the value has been changed externally via store (undo / redo)
-         */
-        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
-            // we need to use this method because using the value props directly will switch the input to a "controlled"
-            // component
-            internalRef.current.value = `${value}`;
-        }
-    }, [value]);
-    let borderRadius = 'tw-rounded-sm';
-    if (inputGroup === 'left') {
-        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
-    }
-    else if (inputGroup === 'right') {
-        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
-    }
-    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
-    const inputProp = setValidInputDimension(inputWidth, inputHeight)
-        ? {
-            style: setValidInputDimension(inputWidth, inputHeight),
-        }
-        : {};
-    const inputLenghtProp = {};
-    if (maxLength)
-        inputLenghtProp.maxLength = maxLength;
-    if (minLength)
-        inputLenghtProp.minLength = minLength;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
-        errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
-});
+import React, { useEffect, useRef, useState } from 'react';
+import '../styles.css';
+import { setValidInputDimension } from '../utils/validateStyleDimension';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+    ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
+    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+const sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
+/**
+ * Textfield.
+ */
+export const TextField = React.forwardRef((props, ref) => {
+    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
+    const internalRef = useRef(null);
+    const [cursor, setCursor] = useState(null);
+    const tooltipData = getQTipData(tooltipProps);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    useEffect(() => {
+        const input = internalRef.current;
+        if (input && type !== 'number' && type !== 'email')
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    const handleChange = (e) => {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    useEffect(() => {
+        /**
+         * we need to change the value only if it's different since the internal state of "input" will change it anyway
+         * this will only be the case when the value has been changed externally via store (undo / redo)
+         */
+        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
+            // we need to use this method because using the value props directly will switch the input to a "controlled"
+            // component
+            internalRef.current.value = `${value}`;
+        }
+    }, [value]);
+    let borderRadius = 'tw-rounded-sm';
+    if (inputGroup === 'left') {
+        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
+    }
+    else if (inputGroup === 'right') {
+        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+    }
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const inputProp = setValidInputDimension(inputWidth, inputHeight)
+        ? {
+            style: setValidInputDimension(inputWidth, inputHeight),
+        }
+        : {};
+    const inputLenghtProp = {};
+    if (maxLength)
+        inputLenghtProp.maxLength = maxLength;
+    if (minLength)
+        inputLenghtProp.minLength = minLength;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
+        errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
+});
 //# sourceMappingURL=TextField.js.map

package/dist/TextField/TextField.stories.js

@@ -1,70 +1,70 @@
-import React from 'react';
-import { TextField } from './TextField';
-import { QTip } from '../Tooltip';
-export default {
-    title: 'TextField',
-};
-export const AllTextFields = () => {
-    const renderAllVariations = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4 light" },
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "value provided" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "placeholder text" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error", showError: true })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", null, "max value = 10"),
-                React.createElement(TextField, { type: "number", value: 20, max: 10 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", null, "min value = 2"),
-                React.createElement(TextField, { type: "number", value: 1, min: 2 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "large", size: "lg" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" }))),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "value provided" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "placeholder text" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error", showError: true })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "max value = 10"),
-                React.createElement(TextField, { type: "number", value: 8, max: 10 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "min value = 2"),
-                React.createElement(TextField, { type: "number", value: 10, min: 2 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "large", size: "lg" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" })))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement(QTip, null),
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations())));
-};
+import React from 'react';
+import { TextField } from './TextField';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'TextField',
+};
+export const AllTextFields = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "max value = 10"),
+                React.createElement(TextField, { type: "number", value: 20, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "min value = 2"),
+                React.createElement(TextField, { type: "number", value: 1, min: 2 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "max value = 10"),
+                React.createElement(TextField, { type: "number", value: 8, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "min value = 2"),
+                React.createElement(TextField, { type: "number", value: 10, min: 2 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
 //# sourceMappingURL=TextField.stories.js.map

package/dist/TextField/TextField.test.js

@@ -1,39 +1,39 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TextField } from './TextField';
-describe('TextField', () => {
-    class Context {
-        testId = 'textFieldTestId';
-        props = {
-            onChange: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
-    it('renders the provided value', () => {
-        const value = 'hello';
-        renderTextField({ ...tc.props, value });
-        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
-    });
-    it('renders the provided placeholder', () => {
-        const placeholder = 'Prompt to enter';
-        renderTextField({ ...tc.props, placeholder });
-        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
-    });
-    it('calls onChange handler', async () => {
-        renderTextField({ ...tc.props });
-        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
-        expect(tc.props.onChange).toHaveBeenCalled();
-    });
-    it('autofocuses the textfield', async () => {
-        renderTextField({ ...tc.props, autoFocus: true });
-        expect(screen.getByTestId(tc.testId)).toHaveFocus();
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextField } from './TextField';
+describe('TextField', () => {
+    class Context {
+        testId = 'textFieldTestId';
+        props = {
+            onChange: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
+    it('renders the provided value', () => {
+        const value = 'hello';
+        renderTextField({ ...tc.props, value });
+        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
+    });
+    it('renders the provided placeholder', () => {
+        const placeholder = 'Prompt to enter';
+        renderTextField({ ...tc.props, placeholder });
+        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+    });
+    it('calls onChange handler', async () => {
+        renderTextField({ ...tc.props });
+        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
+        expect(tc.props.onChange).toHaveBeenCalled();
+    });
+    it('autofocuses the textfield', async () => {
+        renderTextField({ ...tc.props, autoFocus: true });
+        expect(screen.getByTestId(tc.testId)).toHaveFocus();
+    });
+});
 //# sourceMappingURL=TextField.test.js.map

package/dist/TextField/TextField.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=TextField.types.js.map

package/dist/TextField/index.js

@@ -1,2 +1,2 @@
-export { TextField as default } from './TextField';
+export { TextField as default } from './TextField';
 //# sourceMappingURL=index.js.map