@seeqdev/qomponents 0.0.0 → 0.0.1

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

@@ -0,0 +1,16 @@
+declare type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export interface TextFieldProps {
+    readonly?: boolean;
+    onChange?: React.ChangeEventHandler<FormControlElement>;
+    onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+    id?: string;
+    name?: string;
+    size?: 'sm' | 'lg';
+    value?: string | string[] | number;
+    placeholder?: string;
+    extraClassNames?: string;
+    type?: 'text' | 'password';
+    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.d.ts

@@ -0,0 +1 @@
+export { TextField as default } from './TextField';

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"}

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../styles.css';
+import { TooltipProps } from './Tooltip.types';
+/**
+ * This component displays a Tooltip for the provided children.
+ */
+export declare const Tooltip: React.FunctionComponent<TooltipProps>;

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../styles.css';
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+/**
+ * This component displays a Tooltip for the provided children.
+ */
+export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
+    const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
+    const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
+    const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+  before:tw-border-l-transparent before:tw-border-r-black`;
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+   before:tw-border-l-black before:tw-border-r-transparent`;
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
+    const placements = {
+        top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
+        left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
+        right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
+        bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
+    };
+    return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
+        children,
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAgB,MAAM,iBAAiB,CAAC;AAEvE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAA0C,CAAC,EAC7D,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,sBAAsB,GAC/B,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,8DAA8D,CAAC;IACxF,MAAM,qBAAqB,GAAG,8CAA8C,CAAC;IAC7E,MAAM,uBAAuB,GAAG,+CAA+C,CAAC;IAChF,MAAM,UAAU,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;0DACP,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;2DACL,CAAC;IAE1D,MAAM,WAAW,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;+FAC2B,CAAC;IAC9F,MAAM,QAAQ,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;yFACwB,CAAC;IAExF,MAAM,UAAU,GAAG;QACjB,GAAG,EAAE,kEAAkE,QAAQ,EAAE;QACjF,IAAI,EAAE,kEAAkE,SAAS,EAAE;QACnF,KAAK,EAAE,kEAAkE,UAAU,EAAE;QACrF,MAAM,EAAE,oEAAoE,WAAW,EAAE;KAC1F,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QAClD,QAAQ;QACT,6BACE,SAAS,EAAE,4FAA4F,KAAK;qHACC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAClI,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTooltips: () => JSX.Element;

package/dist/Tooltip/Tooltip.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+export default {
+    title: 'Tooltip',
+};
+export const AllTooltips = () => {
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
+        React.createElement(Tooltip, { text: `Tooltip on the ${position}`, position: position },
+            React.createElement(Button, { label: position })))));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
+        React.createElement(Tooltip, { text: React.createElement("div", null,
+                React.createElement("h2", null, "Fancy Tooltip"),
+                " This is a special tooltip. Why?",
+                React.createElement("br", null),
+                "Because it supports ",
+                React.createElement("b", null, "HTML!")), position: position },
+            React.createElement(Icon, { icon: "fc-sun" })))));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement(Tooltip, { text: "Helpful information provided here", position: position },
+            React.createElement("span", null,
+                "Hover for Tooltip (on the ",
+                position,
+                ")")))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
+        renderButtonsWithTooltip(),
+        renderIconsWithHtmlTooltip(),
+        renderTextTooltipOnText()));
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,OAAO,IAAC,IAAI,EAAE,kBAAkB,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC7D,oBAAC,MAAM,IAAC,KAAK,EAAE,QAAQ,GAAI,CACnB,CACN,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IACN,IAAI,EACF;gBACE,gDAAsB;;gBACtB,+BAAM;;gBACc,uCAAY,CAC5B,EAER,QAAQ,EAAE,QAAQ;YAClB,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACN,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,mCAAmC,EAAC,QAAQ,EAAE,QAAQ;YAClE;;gBAAiC,QAAQ;oBAAS,CAC1C,CACN,CACP,CAAC,CAAC;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,gDAAgD;QAC5D,wBAAwB,EAAE;QAC1B,0BAA0B,EAAE;QAC5B,uBAAuB,EAAE,CACtB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_TOOL_TIP_DELAY = 1000;
+export declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
+export type TooltipPosition = typeof tooltipPositions[number];
+export interface TooltipProps {
+    position?: TooltipPosition;
+    children?: JSX.Element | string;
+    text: JSX.Element | string;
+    delay?: number;
+}

package/dist/Tooltip/Tooltip.types.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOOL_TIP_DELAY = 1000;
+export const tooltipPositions = ['top', 'left', 'right', 'bottom'];
+//# sourceMappingURL=Tooltip.types.js.map

package/dist/Tooltip/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC"}

package/dist/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip as default } from './Tooltip';

package/dist/Tooltip/index.js

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

package/dist/Tooltip/index.js.map

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

package/dist/index.d.ts

@@ -1,2 +1,6 @@
 import Button from './Button';
+import TextField from './TextField';
+import Tooltip from './Tooltip';
 export { Button };
+export { TextField };
+export { Tooltip };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
 /**
  * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
@@ -28,27 +28,149 @@ const browserName = browserId && browserId.split(' ', 2)[0];
 browserId && parseInt(browserId.split(' ', 2)[1], 10);
 const browserIsFirefox = browserId && browserName === 'Firefox';
 
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, }) => {
-    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';
+const DEFAULT_TOOL_TIP_DELAY = 1000;
+
+/**
+ * This component displays a Tooltip for the provided children.
+ */
+const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
+    const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
+    const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
+    const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+  before:tw-border-l-transparent before:tw-border-r-black`;
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+   before:tw-border-l-black before:tw-border-r-transparent`;
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
+    const placements = {
+        top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
+        left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
+        right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
+        bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
+    };
+    return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
+        children,
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
+};
+
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipDelay, tooltipPlacement, number, hasExternalTooltipHandler = false, }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const colorClasses = {
+        'theme': 'tw-text-sq-color-dark',
+        'white': 'tw-text-white',
+        'dark-gray': 'tw-text-sq-fairly-dark-gray',
+        'warning': 'tw-text-sq-warning-color',
+        'darkish-gray': 'tw-text-sq-darkish-gray',
+        'gray': 'tw-text-sq-disabled-gray',
+        'color': '',
+        'info': 'tw-text-sq-link',
+        'text': 'tw-text-sq-text-color',
+        'inherit': '',
+        'danger': 'tw-text-sq-danger-color',
+        'theme-light': 'tw-text-sq-color-light',
+        'success': 'tw-text-sq-success-color',
+    };
+    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${colorClasses[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    const iconTag = (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number }));
+    return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (React.createElement(Tooltip, { text: tooltip, delay: tooltipDelay, position: tooltipPlacement }, iconTag)) : (iconTag);
+};
+
+/**
+ * All-in-one Button:
+ *  - use "variant" to achieve the desired style
+ *  - include tooltips and/or icons
+ */
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
+    const textClassesByVariant = {
+        'outline': 'tw-text-sq-text-color',
+        'theme': 'tw-text-white',
+        'theme-light': 'tw-text-white',
+        'danger': 'tw-text-white',
+        'no-border': 'tw-text-sq-text-color',
+        'warning': 'tw-text-white',
+    };
     const classesByVariant = {
-        outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +
-            ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',
-        theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',
-        danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',
-        'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',
+        'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
+            ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
+        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
         'no-border': '',
-        'warning': '',
+        'warning': 'tw-bg-sq-warning-color',
     };
     const sizeClasses = {
-        sm: 'text-xs',
-        lg: 'text-xl',
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
     };
-    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;
-    return (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
+    const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick();
-        }, className: appliedClasses }, label));
+        }, className: appliedClasses },
+        icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
+        label));
+    return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
 };
 
-export { Button };
+/**
+ * Textfield.
+ */
+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-sq-disabled-gray tw-border-solid tw-border' +
+        ' 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}`;
+    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 }));
+});
+
+export { Button, TextField, Tooltip };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/utils/browserId.ts","../src/Button/Button.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n  let tem;\n  const ua = navigator.userAgent;\n  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n  if (/trident/i.test(M[1])) {\n    tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n    return `IE ${tem[1] || ''}`;\n  }\n\n  if (M[1] === 'Chrome') {\n    tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n    if (tem !== null) {\n      return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n    }\n  }\n\n  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n  if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n    M.splice(1, 1, tem[1]);\n  }\n\n  return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n  browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\n\nconst Button: React.FunctionComponent<ButtonProps> =\n  ({\n    onClick,\n    label,\n    variant = 'outline',\n    type = 'button',\n    size = 'sm',\n    disabled,\n    extraClassNames,\n    id,\n    testId,\n    stopPropagation = true,\n  }) => {\n    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';\n    const classesByVariant = {\n      outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +\n        ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',\n      theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',\n      danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',\n      'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',\n      'no-border': '',\n      'warning': '',\n    };\n    const sizeClasses = {\n      sm: 'text-xs',\n      lg: 'text-xl',\n    };\n    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;\n\n    return (\n      <button\n        id={id}\n        disabled={disabled}\n        data-testid={testId}\n        type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n        onClick={(e) => {\n          stopPropagation && e.stopPropagation();\n          onClick && onClick();\n        }}\n        className={appliedClasses}>\n        {label}\n      </button>\n    );\n  };\nexport default Button;\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n  let tem;\n  const ua = navigator.userAgent;\n  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n  if (/trident/i.test(M[1])) {\n    tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n    return `IE ${tem[1] || ''}`;\n  }\n\n  if (M[1] === 'Chrome') {\n    tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n    if (tem !== null) {\n      return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n    }\n  }\n\n  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n  if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n    M.splice(1, 1, tem[1]);\n  }\n\n  return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n  browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n  position?: TooltipPosition;\n  children?: JSX.Element | string;\n  text: JSX.Element | string;\n  delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n  position = 'bottom',\n  children,\n  text,\n  delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n  const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n  const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n  const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n  const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n  before:tw-border-l-transparent before:tw-border-r-black`;\n\n  const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n   before:tw-border-l-black before:tw-border-r-transparent`;\n\n  const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n  const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n  const placements = {\n    top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n    left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n    right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n    bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n  };\n\n  return (\n    <div className=\"tw-group tw-relative tw-inline-block\">\n      {children}\n      <div\n        className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n        {text}\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n *  - access to Seeq custom icons by providing the desired icon\n *  - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n  onClick,\n  icon,\n  type = 'theme',\n  extraClassNames,\n  id,\n  large,\n  small,\n  color,\n  testId,\n  customId,\n  tooltip,\n  tooltipDelay,\n  tooltipPlacement,\n  number,\n  hasExternalTooltipHandler = false,\n}) => {\n  if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n    const errorMessage =\n      color === undefined || color === ''\n        ? 'Icon with type=\"color\" must have prop color specified.'\n        : 'Icon with prop color must have type=\"color\".';\n    return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n  }\n\n  const colorClasses = {\n    'theme': 'tw-text-sq-color-dark',\n    'white': 'tw-text-white',\n    'dark-gray': 'tw-text-sq-fairly-dark-gray',\n    'warning': 'tw-text-sq-warning-color',\n    'darkish-gray': 'tw-text-sq-darkish-gray',\n    'gray': 'tw-text-sq-disabled-gray',\n    'color': '',\n    'info': 'tw-text-sq-link',\n    'text': 'tw-text-sq-text-color',\n    'inherit': '',\n    'danger': 'tw-text-sq-danger-color',\n    'theme-light': 'tw-text-sq-color-light',\n    'success': 'tw-text-sq-success-color',\n  };\n\n  const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n  const style = type === 'color' && color ? { color } : {};\n  const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${\n    colorClasses[type]\n  } ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n  const iconTag = (\n    <i\n      className={appliedClassNames}\n      style={style}\n      onClick={onClick}\n      data-testid={testId}\n      data-customid={customId}\n      id={id}\n      data-number={number}\n    />\n  );\n\n  return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n    <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n      {iconTag}\n    </Tooltip>\n  ) : (\n    iconTag\n  );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n *  - use \"variant\" to achieve the desired style\n *  - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  onClick,\n  label,\n  variant = 'outline',\n  type = 'button',\n  size = 'sm',\n  disabled,\n  extraClassNames,\n  id,\n  testId,\n  stopPropagation = true,\n  tooltip,\n  tooltipOptions,\n  iconStyle = 'text',\n  icon,\n  iconColor,\n}) => {\n  const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n  const textClassesByVariant = {\n    'outline': 'tw-text-sq-text-color',\n    'theme': 'tw-text-white',\n    'theme-light': 'tw-text-white',\n    'danger': 'tw-text-white',\n    'no-border': 'tw-text-sq-text-color',\n    'warning': 'tw-text-white',\n  };\n  const classesByVariant = {\n    'outline':\n      'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +\n      ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n    'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',\n    'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n    'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',\n    'no-border': '',\n    'warning': 'tw-bg-sq-warning-color',\n  };\n  const sizeClasses = {\n    sm: 'tw-text-sm',\n    lg: 'tw-text-xl',\n  };\n  const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;\n\n  const button = (\n    <button\n      id={id}\n      disabled={disabled}\n      data-testid={testId}\n      type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n      onClick={(e) => {\n        stopPropagation && e.stopPropagation();\n        onClick && onClick();\n      }}\n      className={appliedClasses}>\n      {icon && (\n        <Icon\n          icon={icon}\n          type={iconStyle}\n          color={iconColor}\n          extraClassNames={label ? `tw-mr-1 ${textClassesByVariant[variant]}` : ''}\n          testId={`${id}_spinner`}\n        />\n      )}\n      {label}\n    </button>\n  );\n\n  return tooltip ? (\n    <Tooltip text={tooltip} {...tooltipOptions}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (props, ref: any) => {\n    const {\n      readonly = false,\n      onChange,\n      onKeyUp,\n      id,\n      name,\n      size = 'sm',\n      value,\n      placeholder,\n      extraClassNames,\n      testId,\n      type = 'text',\n    } = props;\n\n    const internalRef = useRef<HTMLInputElement | null>(null);\n    const [cursor, setCursor] = useState(null);\n\n    const setAllRefs = (receivedRef: any) => {\n      if (ref) ref.current = receivedRef;\n      internalRef.current = receivedRef;\n    };\n\n    useEffect(() => {\n      const input = internalRef.current! as unknown as HTMLInputElement;\n      if (input) input.setSelectionRange(cursor, cursor);\n    }, [ref, cursor, value]);\n\n    const handleChange = (e: any) => {\n      setCursor(e.target.selectionStart);\n      onChange && onChange(e);\n    };\n\n    useEffect(() => {\n      /**\n       * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n       * this will only be the case when the value has been changed externally via store (undo / redo)\n       */\n      if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n        // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n        // component\n        internalRef.current.value = `${value}`;\n      }\n    }, [value]);\n\n    const baseClasses =\n      'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n      ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +\n      ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n    const sizeClasses = {\n      sm: 'tw-text-sm',\n      lg: 'tw-text-xl',\n    };\n\n    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;\n\n    return (\n      <input\n        ref={setAllRefs}\n        data-testid={testId}\n        name={name}\n        id={id}\n        type={type}\n        value={value}\n        className={appliedClasses}\n        placeholder={placeholder}\n        disabled={readonly}\n        autoComplete=\"none\"\n        onChange={handleChange}\n        onKeyUp={onKeyUp}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -30,27 +30,151 @@ const browserName = browserId && browserId.split(' ', 2)[0];
 browserId && parseInt(browserId.split(' ', 2)[1], 10);
 const browserIsFirefox = browserId && browserName === 'Firefox';
 
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, }) => {
-    const baseClasses = 'py-1 px-3 rounded-sm focus:ring-0 disabled:pointer-events-none';
+const DEFAULT_TOOL_TIP_DELAY = 1000;
+
+/**
+ * This component displays a Tooltip for the provided children.
+ */
+const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
+    const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
+    const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
+    const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+  before:tw-border-l-transparent before:tw-border-r-black`;
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+   before:tw-border-l-black before:tw-border-r-transparent`;
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+  before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+  before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
+    const placements = {
+        top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
+        left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
+        right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
+        bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
+    };
+    return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
+        children,
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
+};
+
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipDelay, tooltipPlacement, number, hasExternalTooltipHandler = false, }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const colorClasses = {
+        'theme': 'tw-text-sq-color-dark',
+        'white': 'tw-text-white',
+        'dark-gray': 'tw-text-sq-fairly-dark-gray',
+        'warning': 'tw-text-sq-warning-color',
+        'darkish-gray': 'tw-text-sq-darkish-gray',
+        'gray': 'tw-text-sq-disabled-gray',
+        'color': '',
+        'info': 'tw-text-sq-link',
+        'text': 'tw-text-sq-text-color',
+        'inherit': '',
+        'danger': 'tw-text-sq-danger-color',
+        'theme-light': 'tw-text-sq-color-light',
+        'success': 'tw-text-sq-success-color',
+    };
+    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${colorClasses[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    const iconTag = (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number }));
+    return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (React.createElement(Tooltip, { text: tooltip, delay: tooltipDelay, position: tooltipPlacement }, iconTag)) : (iconTag);
+};
+
+/**
+ * All-in-one Button:
+ *  - use "variant" to achieve the desired style
+ *  - include tooltips and/or icons
+ */
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
+    const textClassesByVariant = {
+        'outline': 'tw-text-sq-text-color',
+        'theme': 'tw-text-white',
+        'theme-light': 'tw-text-white',
+        'danger': 'tw-text-white',
+        'no-border': 'tw-text-sq-text-color',
+        'warning': 'tw-text-white',
+    };
     const classesByVariant = {
-        outline: 'text-sq-text-color border-sq-disabled-gray border-solid border hover:bg-sq-light-gray' +
-            ' focus:bg-sq-dark-gray active:bg-sq-dark-gray focus:border-sq-color-dark active:border-sq-color-dark',
-        theme: 'bg-sq-color-dark hover:bg-sq-color-highlight text-white disabled:bg-opacity-50',
-        danger: 'bg-sq-danger-color text-white hover:bg-sq-danger-color-hover disabled:bg-opacity-50',
-        'theme-light': 'bg-sq-icon text-white hover:bg-sq-link disabled:bg-opacity-50',
+        'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
+            ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
+        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
         'no-border': '',
-        'warning': '',
+        'warning': 'tw-bg-sq-warning-color',
     };
     const sizeClasses = {
-        sm: 'text-xs',
-        lg: 'text-xl',
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
     };
-    const appliedClasses = baseClasses + ' ' + sizeClasses[size] + ' ' + classesByVariant[variant] + ' ' + extraClassNames;
-    return (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
+    const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick();
-        }, className: appliedClasses }, label));
+        }, className: appliedClasses },
+        icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
+        label));
+    return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
 };
 
+/**
+ * Textfield.
+ */
+const TextField = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', } = props;
+    const internalRef = React.useRef(null);
+    const [cursor, setCursor] = React.useState(null);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    React.useEffect(() => {
+        const input = internalRef.current;
+        if (input)
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    const handleChange = (e) => {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    React.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-sq-disabled-gray tw-border-solid tw-border' +
+        ' 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}`;
+    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 }));
+});
+
 exports.Button = Button;
+exports.TextField = TextField;
+exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.js.map