@seeqdev/qomponents 0.0.3 → 0.0.5

package/dist/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Select/Select.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import '../styles.css';
+import { createFilter, default as ReactSelect } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+/**
+ * Select Component
+ *  - based on react-select (https://react-select.com/)
+ */
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = false, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
+    const baseClasses = ['tw-px-2.5', 'focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+    const errorClasses = 'tw-border-sq-danger-color';
+    const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+    const borderStyles = [
+        'tw-border-solid',
+        'tw-border',
+        'hover:tw-border-sq-color-dark',
+        'focus:tw-border-sq-color-dark',
+        'active:tw-border-sq-color-dark',
+        'dark:hover:tw-border-sq-color-dark-dark',
+        'dark:focus:tw-border-sq-color-dark-dark',
+        'dark:active:tw-border-sq-color-dark-dark',
+    ].join(' ');
+    const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
+    const textActiveStyles = [
+        'hover:tw-text-sq-color-dark',
+        'focus:tw-text-sq-color-dark',
+        'active:tw-text-sq-color-dark',
+        'dark:tw-text-sq-dark-disabled-gray',
+        'dark:hover:tw-text-sq-color-dark-dark',
+        'dark:focus:tw-text-sq-color-dark-dark',
+        'dark:active:tw-text-sq-color-dark-dark',
+    ].join(' ');
+    const menuStyles = [
+        'tw-border-solid',
+        'tw-border-x',
+        'tw-border-b',
+        'tw-rounded-b',
+        'tw-border-sq-disabled-gray',
+        'dark:tw-border-sq-dark-disabled-gray',
+        'tw-whitespace-nowrap',
+        'tw-min-w-fit',
+    ].join(' ');
+    const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
+    const dropDownIndicatorStyles = `${textStyles} ${textActiveStyles}`;
+    const getOptionOrSelectedLabel = (option, { context }) => {
+        const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
+        if (getOptionLabel || getSelectedValueLabel) {
+            if (context === 'value') {
+                return getSelectedOptionLabel ? getSelectedOptionLabel(option) : option.label;
+            }
+            else {
+                return getOptionLabel ? getOptionLabel(option) : option.label;
+            }
+        }
+        else {
+            return option.label;
+        }
+    };
+    const interceptOnChange = (newValue, actionMeta) => {
+        if (isMulti && onRemove && actionMeta.action === 'remove-value') {
+            onRemove({ id: actionMeta.removedValue });
+            return;
+        }
+        onChange(newValue);
+    };
+    const props = {
+        id,
+        value,
+        inputId,
+        placeholder,
+        closeMenuOnSelect,
+        isSearchable: creatable ? true : isSearchable,
+        isMulti,
+        isClearable,
+        isLoading,
+        defaultValue,
+        noOptionsMessage: () => noOptionsMessage,
+        menuPortalTarget,
+        menuIsOpen,
+        onChange: interceptOnChange,
+        unstyled: true,
+        menuPlacement,
+        formatOptionLabel: getOptionOrSelectedLabel,
+        formatGroupLabel,
+        getOptionValue,
+        options,
+        isDisabled,
+        hideSelectedOptions: isMulti,
+        filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
+        classNames: {
+            control: ({ menuIsOpen }) => {
+                let border = menuIsOpen ? 'tw-rounded-t-sm' : 'tw-rounded-sm';
+                // if it's on the left side of the input group make sure the right side is straight and not curved
+                if (inputGroup === 'left') {
+                    border = menuIsOpen ? 'tw-rounded-tl-sm' : 'tw-rounded-l-sm';
+                }
+                else if (inputGroup === 'right') {
+                    border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
+                }
+                const appliedClasses = `${borderStyles} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''}`;
+            },
+            placeholder: () => 'tw-text-gray-400 dark:tw-text-sq-dark-text-lighter specOpenSelect',
+            container: () => `${textStyles} ${extraClassNames}`,
+            input: () => textStyles + ' specSelectInput',
+            menuList: () => `tw-rounded-b tw-bg-white dark:tw-bg-sq-dark-background tw-min-w-fit specSelectMenu tw-z-[9999]`,
+            menu: () => menuStyles,
+            menuPortal: () => '!tw-z-[9000]',
+            dropdownIndicator: () => `${dropDownIndicatorStyles} specOpenIt`,
+            option: ({ isSelected, isDisabled }) => {
+                let classes = 'hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-py-1 tw-px-2.5' +
+                    ' specSelectOption ';
+                if (isDisabled) {
+                    classes += 'specDisabledOption ';
+                }
+                return isSelected ? classes + 'tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
+            },
+            singleValue: () => 'specOpenSelect',
+            multiValue: () => 'tw-bg-sq-disabled-gray dark:tw-bg-sq-multi-gray-dark tw-text-sm tw-py-0.5 tw-px-1 tw-m-0.5 tw-rounded-sm specOpenSelect',
+            multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
+            clearIndicator: () => 'hover:tw-text-sq-danger-color specClearSelect',
+            group: () => 'specSelectGroup',
+            groupHeading: () => 'tw-bg-sq-light-gray dark:tw-bg-sq-dark-disabled-gray tw-text-sq-darkish-gray tw-py-1 tw-px-2.5' +
+                ' specSelectGroupHeading',
+        },
+    };
+    return creatable ? React.createElement(CreatableSelect, { ...props }) : React.createElement(ReactSelect, { ...props });
+};
+export default Select;
+//# sourceMappingURL=Select.js.map

package/dist/Select/Select.js.map

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

package/dist/Select/Select.stories.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Select from './Select';
+import TextField from '../TextField';
+export default {
+    title: 'Select',
+};
+export const AllSelectVariants = () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const groupedOptions = [
+        {
+            label: 'Ice Cream Flavors',
+            options: options,
+        },
+        {
+            label: 'Colors',
+            options: colorOptions,
+        },
+    ];
+    const allSelects = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" }),
+            React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value", small: true }),
+            React.createElement(Select, { id: "disabled", onChange: () => { }, options: options, placeholder: "disabled", isDisabled: true }),
+            React.createElement(Select, { id: "error", onChange: () => { }, options: options, placeholder: "error", showError: true })),
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "stays open", closeMenuOnSelect: false, creatable: true })),
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { onChange: () => { }, options: groupedOptions, placeholder: "grouped" })),
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { onChange: () => { }, options: options, creatable: true, placeholder: "create option" })),
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { onChange: () => { }, options: options, placeholder: "multi-select", isMulti: true, isSearchable: false })),
+        React.createElement("div", { className: "tw-p-10" },
+            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, isSearchable: true })),
+        React.createElement("div", { className: "tw-p-10 tw-flex tw-flex-row" },
+            React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, inputGroup: "left", extraClassNames: "tw-w-[200px]" }),
+            React.createElement(TextField, { onChange: () => { }, placeholder: "text goes here", inputGroup: "right" }))));
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-grid tw-gap-4" },
+            allSelects(),
+            React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" }, allSelects()))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        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())));
+};
+//# sourceMappingURL=Select.stories.js.map

package/dist/Select/Select.stories.js.map

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

package/dist/Select/Select.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Select from './Select';
+describe('Button', () => {
+    class Context {
+        testId = 'buttonTestId';
+        label = 'button label';
+        props = {
+            onChange: jest.fn(),
+            options: [],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderSelect = (props) => render(React.createElement(Select, { ...props }));
+    it('TODO', () => {
+        expect(true).toBeTruthy();
+    });
+});
+//# sourceMappingURL=Select.test.js.map

package/dist/Select/Select.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../src/Select/Select.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;QACd,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Select/Select.types.js

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

package/dist/Select/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":""}

package/dist/Select/index.js

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

package/dist/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/TextArea/TextArea.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles.css';
+const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+    ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+/**
+ * TextArea.
+ */
+export const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, }) => {
+    const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;
+    return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,GACf,iEAAiE;IACjE,kEAAkE,CAAC;AAErE,MAAM,SAAS,GACb,8FAA8F;IAC9F,mFAAmF,CAAC;AACtF,MAAM,UAAU,GACd,+GAA+G,CAAC;AAElH;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,EAC/D,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,SAAS,GAAG,KAAK,GAClB,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;IAEtF,OAAO,CACL,iDACe,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/TextArea/TextArea.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TextArea } from './TextArea';
+export default {
+    title: 'TextArea',
+};
+export const AllTextAreas = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { value: "Short text provided." })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio aenean. Lectus sit amet est placerat in egestas erat. Dui nunc mattis enim ut tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nibh mauris cursus mattis molestie a. Aenean vel elit scelerisque mauris pellentesque. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Tortor dignissim convallis aenean et tortor at risus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Consequat interdum varius sit amet mattis. Lacus laoreet non curabitur gravida arcu ac tortor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Odio ut enim blandit volutpat maecenas volutpat." })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { value: "read-only", readonly: true }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextArea, { value: "read-only", readonly: true })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        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())));
+};
+//# sourceMappingURL=TextArea.stories.js.map

package/dist/TextArea/TextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,sBAAsB,GAAG,CACrC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,q7BAAq7B,GAAG,CACp8B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAC/B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/TextArea/TextArea.test.js

@@ -0,0 +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, readonly: 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.test.js.map

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

package/dist/TextArea/TextArea.types.d.ts

@@ -1,3 +1,4 @@
+type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export interface TextAreaProps {
     /** extra class names to be placed on the TextArea component */
     extraClassNames?: string;
@@ -24,3 +25,4 @@ export interface TextAreaProps {
     /** value of the TextArea */
     value?: string | string[] | number;
 }
+export {};

package/dist/TextArea/TextArea.types.js

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

package/dist/TextArea/TextArea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.types.ts"],"names":[],"mappings":""}

package/dist/TextArea/index.js

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

package/dist/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/TextField/TextField.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from 'react';
+import '../styles.css';
+/**
+ * Textfield.
+ */
+export const TextField = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', } = props;
+    const internalRef = useRef(null);
+    const [cursor, setCursor] = useState(null);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    useEffect(() => {
+        const input = internalRef.current;
+        if (input)
+            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]);
+    const baseClasses = 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +
+        ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';
+    const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
+        ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
+    const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
+    const sizeClasses = {
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
+    };
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;
+    return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp }));
+});
+//# sourceMappingURL=TextField.js.map

package/dist/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,eAAe,CAAC;AAEvB;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4C,KAAK,CAAC,UAAU,CAChF,CAAC,KAAK,EAAE,GAAQ,EAAE,EAAE;IAClB,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,IAAI,GAAG,MAAM,GACd,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,WAAgB,EAAE,EAAE;QACtC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC;QACnC,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,OAAuC,CAAC;QAClE,IAAI,KAAK;YAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,CAAC,CAAM,EAAE,EAAE;QAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb;;;WAGG;QACH,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE;YACxG,4GAA4G;YAC5G,YAAY;YACZ,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;SACxC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GACf,8GAA8G;QAC9G,kEAAkE,CAAC;IAErE,MAAM,SAAS,GAAG,8FAA8F;QAC9G,mFAAmF,CAAC;IACtF,MAAM,UAAU,GAAG,+GAA+G,CAAC;IAEnI,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;IAE3G,OAAO,CACL,+BACE,GAAG,EAAE,UAAU,iBACF,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/TextField/TextField.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TextField } from './TextField';
+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, { value: "read-only", readonly: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" }))),
+        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, { value: "read-only", readonly: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
+        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())));
+};
+//# sourceMappingURL=TextField.stories.js.map

package/dist/TextField/TextField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/TextField/TextField.test.js

@@ -0,0 +1,35 @@
+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();
+    });
+});
+//# sourceMappingURL=TextField.test.js.map

package/dist/TextField/TextField.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.test.js","sourceRoot":"","sources":["../../src/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,OAAO;QACX,MAAM,GAAG,iBAAiB,CAAC;QAC3B,KAAK,GAAmB;YACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,KAAK,GAAG,OAAO,CAAC;QACtB,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACjC,MAAM,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/TextField/TextField.types.d.ts

@@ -1,3 +1,4 @@
+type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export interface TextFieldProps {
     readonly?: boolean;
     onChange?: React.ChangeEventHandler<FormControlElement>;
@@ -12,3 +13,4 @@ export interface TextFieldProps {
     testId?: string;
     ref?: any;
 }
+export {};

package/dist/TextField/TextField.types.js

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

package/dist/TextField/TextField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}

package/dist/TextField/index.js

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

package/dist/TextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}