@seeqdev/qomponents 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/index.esm.js +2 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +2 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +9 -4
  6. package/package.json +1 -1
  7. package/dist/Button/Button.js +0 -71
  8. package/dist/Button/Button.js.map +0 -1
  9. package/dist/Button/Button.stories.js +0 -58
  10. package/dist/Button/Button.stories.js.map +0 -1
  11. package/dist/Button/Button.test.js +0 -49
  12. package/dist/Button/Button.test.js.map +0 -1
  13. package/dist/Button/Button.types.js +0 -4
  14. package/dist/Button/Button.types.js.map +0 -1
  15. package/dist/Button/index.js +0 -2
  16. package/dist/Button/index.js.map +0 -1
  17. package/dist/Checkbox/Checkbox.js +0 -23
  18. package/dist/Checkbox/Checkbox.js.map +0 -1
  19. package/dist/Checkbox/Checkbox.stories.js +0 -29
  20. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  21. package/dist/Checkbox/Checkbox.test.js +0 -94
  22. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  23. package/dist/Checkbox/Checkbox.types.js +0 -2
  24. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  25. package/dist/Checkbox/index.js +0 -2
  26. package/dist/Checkbox/index.js.map +0 -1
  27. package/dist/Icon/Icon.js +0 -54
  28. package/dist/Icon/Icon.js.map +0 -1
  29. package/dist/Icon/Icon.stories.js +0 -40
  30. package/dist/Icon/Icon.stories.js.map +0 -1
  31. package/dist/Icon/Icon.test.js +0 -55
  32. package/dist/Icon/Icon.test.js.map +0 -1
  33. package/dist/Icon/Icon.types.js +0 -16
  34. package/dist/Icon/Icon.types.js.map +0 -1
  35. package/dist/Icon/index.js +0 -2
  36. package/dist/Icon/index.js.map +0 -1
  37. package/dist/Select/Select.js +0 -167
  38. package/dist/Select/Select.js.map +0 -1
  39. package/dist/Select/Select.stories.js +0 -72
  40. package/dist/Select/Select.stories.js.map +0 -1
  41. package/dist/Select/Select.test.js +0 -161
  42. package/dist/Select/Select.test.js.map +0 -1
  43. package/dist/Select/Select.types.js +0 -2
  44. package/dist/Select/Select.types.js.map +0 -1
  45. package/dist/Select/index.js +0 -2
  46. package/dist/Select/index.js.map +0 -1
  47. package/dist/TextArea/TextArea.js +0 -15
  48. package/dist/TextArea/TextArea.js.map +0 -1
  49. package/dist/TextArea/TextArea.stories.js +0 -35
  50. package/dist/TextArea/TextArea.stories.js.map +0 -1
  51. package/dist/TextArea/TextArea.test.js +0 -68
  52. package/dist/TextArea/TextArea.test.js.map +0 -1
  53. package/dist/TextArea/TextArea.types.js +0 -2
  54. package/dist/TextArea/TextArea.types.js.map +0 -1
  55. package/dist/TextArea/index.js +0 -2
  56. package/dist/TextArea/index.js.map +0 -1
  57. package/dist/TextField/TextField.js +0 -56
  58. package/dist/TextField/TextField.js.map +0 -1
  59. package/dist/TextField/TextField.stories.js +0 -37
  60. package/dist/TextField/TextField.stories.js.map +0 -1
  61. package/dist/TextField/TextField.test.js +0 -35
  62. package/dist/TextField/TextField.test.js.map +0 -1
  63. package/dist/TextField/TextField.types.js +0 -2
  64. package/dist/TextField/TextField.types.js.map +0 -1
  65. package/dist/TextField/index.js +0 -2
  66. package/dist/TextField/index.js.map +0 -1
  67. package/dist/Tooltip/Tooltip.js +0 -30
  68. package/dist/Tooltip/Tooltip.js.map +0 -1
  69. package/dist/Tooltip/Tooltip.stories.js +0 -32
  70. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  71. package/dist/Tooltip/Tooltip.types.js +0 -3
  72. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  73. package/dist/Tooltip/index.js +0 -2
  74. package/dist/Tooltip/index.js.map +0 -1
  75. package/dist/sharedTypes.js +0 -1
  76. package/dist/sharedTypes.js.map +0 -1
  77. package/dist/types.js +0 -1
  78. package/dist/types.js.map +0 -1
  79. package/dist/utils/browserId.js +0 -29
  80. package/dist/utils/browserId.js.map +0 -1
@@ -1 +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"}
@@ -1,56 +0,0 @@
1
- import React, { useEffect, useRef, useState } from 'react';
2
- import '../styles.css';
3
- /**
4
- * Textfield.
5
- */
6
- export const TextField = React.forwardRef((props, ref) => {
7
- const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, } = props;
8
- const internalRef = useRef(null);
9
- const [cursor, setCursor] = useState(null);
10
- const setAllRefs = (receivedRef) => {
11
- if (ref)
12
- ref.current = receivedRef;
13
- internalRef.current = receivedRef;
14
- };
15
- useEffect(() => {
16
- const input = internalRef.current;
17
- if (input && type !== 'number')
18
- input.setSelectionRange(cursor, cursor);
19
- }, [ref, cursor, value]);
20
- const handleChange = (e) => {
21
- setCursor(e.target.selectionStart);
22
- onChange && onChange(e);
23
- };
24
- useEffect(() => {
25
- /**
26
- * we need to change the value only if it's different since the internal state of "input" will change it anyway
27
- * this will only be the case when the value has been changed externally via store (undo / redo)
28
- */
29
- if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
30
- // we need to use this method because using the value props directly will switch the input to a "controlled"
31
- // component
32
- internalRef.current.value = `${value}`;
33
- }
34
- }, [value]);
35
- const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
36
- ' disabled:tw-pointer-events-none' +
37
- ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
38
- ' dark:tw-placeholder-sq-dark-text-lighter specTextField';
39
- const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
40
- ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
41
- const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
42
- const sizeClasses = {
43
- sm: 'tw-text-sm',
44
- lg: 'tw-text-xl',
45
- };
46
- let borderRadius = 'tw-rounded-sm';
47
- if (inputGroup === 'left') {
48
- borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
49
- }
50
- else if (inputGroup === 'right') {
51
- borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
52
- }
53
- const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius}`;
54
- 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, step: step }));
55
- });
56
- //# sourceMappingURL=TextField.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}
@@ -1,37 +0,0 @@
1
- import React from 'react';
2
- import { TextField } from './TextField';
3
- export default {
4
- title: 'TextField',
5
- };
6
- export const AllTextFields = () => {
7
- const renderAllVariations = () => (React.createElement(React.Fragment, null,
8
- React.createElement("div", { className: "tw-p-4 light" },
9
- React.createElement("div", { className: "tw-p-4" },
10
- React.createElement(TextField, { value: "value provided" })),
11
- React.createElement("div", { className: "tw-p-4" },
12
- React.createElement(TextField, { placeholder: "placeholder text" })),
13
- React.createElement("div", { className: "tw-p-4" },
14
- React.createElement(TextField, { value: "read-only", readonly: true })),
15
- React.createElement("div", { className: "tw-p-4" },
16
- React.createElement(TextField, { value: "large", size: "lg" }))),
17
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
18
- React.createElement("div", { className: "tw-p-4" },
19
- React.createElement(TextField, { value: "value provided" })),
20
- React.createElement("div", { className: "tw-p-4" },
21
- React.createElement(TextField, { placeholder: "placeholder text" })),
22
- React.createElement("div", { className: "tw-p-4" },
23
- React.createElement(TextField, { value: "read-only", readonly: true })),
24
- React.createElement("div", { className: "tw-p-4" },
25
- React.createElement(TextField, { value: "large", size: "lg" })))));
26
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
27
- React.createElement("div", { className: "color_topic" },
28
- React.createElement("b", null, "Topic Colors"),
29
- renderAllVariations()),
30
- React.createElement("div", { className: "color_analysis" },
31
- React.createElement("b", null, "Analysis Colors"),
32
- renderAllVariations()),
33
- React.createElement("div", { className: "color_datalab" },
34
- React.createElement("b", null, "Datalab Colors"),
35
- renderAllVariations())));
36
- };
37
- //# sourceMappingURL=TextField.stories.js.map
@@ -1 +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"}
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import { TextField } from './TextField';
6
- describe('TextField', () => {
7
- class Context {
8
- testId = 'textFieldTestId';
9
- props = {
10
- onChange: jest.fn(),
11
- testId: this.testId,
12
- };
13
- }
14
- let tc;
15
- beforeEach(() => {
16
- tc = new Context();
17
- });
18
- const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
19
- it('renders the provided value', () => {
20
- const value = 'hello';
21
- renderTextField({ ...tc.props, value });
22
- expect(screen.getByDisplayValue(value)).toBeInTheDocument();
23
- });
24
- it('renders the provided placeholder', () => {
25
- const placeholder = 'Prompt to enter';
26
- renderTextField({ ...tc.props, placeholder });
27
- expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
28
- });
29
- it('calls onChange handler', async () => {
30
- renderTextField({ ...tc.props });
31
- await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
32
- expect(tc.props.onChange).toHaveBeenCalled();
33
- });
34
- });
35
- //# sourceMappingURL=TextField.test.js.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=TextField.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export { TextField as default } from './TextField';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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"}
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
4
- /**
5
- * This component displays a Tooltip for the provided children.
6
- */
7
- export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
8
- const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
9
- const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
10
- const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
11
- const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
12
- before:tw-border-l-transparent before:tw-border-r-black`;
13
- const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
14
- before:tw-border-l-black before:tw-border-r-transparent`;
15
- const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
16
- before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
17
- const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
18
- before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
19
- const placements = {
20
- top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
21
- left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
22
- right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
23
- bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
24
- };
25
- return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
26
- children,
27
- React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
28
- 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)));
29
- };
30
- //# sourceMappingURL=Tooltip.js.map
@@ -1 +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"}
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import { Tooltip } from './Tooltip';
3
- import Icon from '../Icon';
4
- import Button from '../Button';
5
- import { tooltipPositions } from './Tooltip.types';
6
- export default {
7
- title: 'Tooltip',
8
- };
9
- export const AllTooltips = () => {
10
- const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
11
- React.createElement(Tooltip, { text: `Tooltip on the ${position}`, position: position },
12
- React.createElement(Button, { label: position })))));
13
- const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
14
- React.createElement(Tooltip, { text: React.createElement("div", null,
15
- React.createElement("h2", null, "Fancy Tooltip"),
16
- " This is a special tooltip. Why?",
17
- React.createElement("br", null),
18
- "Because it supports ",
19
- React.createElement("b", null, "HTML!")), position: position },
20
- React.createElement(Icon, { icon: "fc-sun" })))));
21
- const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
22
- React.createElement(Tooltip, { text: "Helpful information provided here", position: position },
23
- React.createElement("span", null,
24
- "Hover for Tooltip (on the ",
25
- position,
26
- ")")))));
27
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
28
- renderButtonsWithTooltip(),
29
- renderIconsWithHtmlTooltip(),
30
- renderTextTooltipOnText()));
31
- };
32
- //# sourceMappingURL=Tooltip.stories.js.map
@@ -1 +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"}
@@ -1,3 +0,0 @@
1
- export const DEFAULT_TOOL_TIP_DELAY = 1000;
2
- export const tooltipPositions = ['top', 'left', 'right', 'bottom'];
3
- //# sourceMappingURL=Tooltip.types.js.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export { Tooltip as default } from './Tooltip';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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"}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=sharedTypes.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../src/sharedTypes.ts"],"names":[],"mappings":""}
package/dist/types.js DELETED
@@ -1 +0,0 @@
1
- //# sourceMappingURL=types.js.map
package/dist/types.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
@@ -1,29 +0,0 @@
1
- /**
2
- * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
3
- * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
4
- */
5
- export const browserId = (function () {
6
- let tem;
7
- const ua = navigator.userAgent;
8
- let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
9
- if (/trident/i.test(M[1])) {
10
- tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
11
- return `IE ${tem[1] || ''}`;
12
- }
13
- if (M[1] === 'Chrome') {
14
- tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
15
- if (tem !== null) {
16
- return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
17
- }
18
- }
19
- M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
20
- if ((tem = ua.match(/version\/(\d+)/i)) !== null) {
21
- M.splice(1, 1, tem[1]);
22
- }
23
- return M.join(' ');
24
- })();
25
- export const browserName = browserId && browserId.split(' ', 2)[0];
26
- export const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);
27
- export const browserIsFirefox = browserId && browserName === 'Firefox';
28
- export const browserIsEdgeBeforeChromium = browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;
29
- //# sourceMappingURL=browserId.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"browserId.js","sourceRoot":"","sources":["../../src/utils/browserId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW,CAAC;IAChC,IAAI,GAAG,CAAC;IACR,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,8DAA8D,CAAC,IAAI,EAAE,CAAC;IACvF,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;QACzB,GAAG,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QACvC,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;KAC7B;IAED,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACrB,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,IAAI,EAAE;YAChB,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;SAChF;KACF;IAED,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1E,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,IAAI,EAAE;QAChD,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KACxB;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACrB,CAAC,CAAC,EAAE,CAAC;AACL,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,IAAI,WAAW,KAAK,SAAS,CAAC;AACvE,MAAM,CAAC,MAAM,2BAA2B,GACtC,WAAW,IAAI,cAAc,IAAI,WAAW,KAAK,MAAM,IAAI,cAAc,GAAG,EAAE,CAAC"}