@economic/taco 2.45.0-alpha.0 → 2.45.0-alpha.10

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AVAILABLE_COLORS } from './utils/tailwind';
 export declare type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete' | 'transparent';
-export declare type State = 'default' | 'success' | 'error' | 'warning' | 'information';
+export declare type State = 'default' | 'success' | 'error' | 'experiment' | 'warning' | 'information';
 export declare type Locale = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';
 export declare type Orientation = 'horizontal' | 'vertical';
 export declare type Align = 'start' | 'center' | 'end';

package/dist/utils/dom.d.ts

@@ -2,7 +2,8 @@ export declare const hasFocusableElement: (element: HTMLElement | null) => boole
 export declare const isOverflowing: (element: HTMLElement | null) => boolean;
 export declare const getIndexOfFirstChildOverflowingParent: (element: HTMLElement, overscan?: number) => number | null;
 export declare const getNextFocussableElement: (currentElement: HTMLElement | null) => HTMLElement | null;
-export declare function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null): boolean;
+export declare function isElementTriggeredFromContainer(element: Element | null, container: Element | null): any;
+export declare function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null): any;
 export declare function isElementInsideOverlay(element: Element | null): boolean;
 export declare function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null): boolean;
 export declare function isElementInteractive(element: Element | null): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "2.45.0-alpha.0",
+    "version": "2.45.0-alpha.10",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -16,6 +16,7 @@
     "files": [
         "dist",
         "plugins",
+        "tailwind.colors.js",
         "tailwind.config.js",
         "types.json"
     ],
@@ -41,22 +42,21 @@
     "dependencies": {
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^7.0.1",
-        "@economic/taco-tokens": "^1.4.1",
-        "@radix-ui/react-accordion": "^1.0.1",
-        "@radix-ui/react-alert-dialog": "^1.0.2",
-        "@radix-ui/react-checkbox": "^1.0.1",
-        "@radix-ui/react-collapsible": "^1.0.3",
-        "@radix-ui/react-dialog": "^1.0.2",
-        "@radix-ui/react-dropdown-menu": "^2.0.1",
-        "@radix-ui/react-hover-card": "^1.0.2",
-        "@radix-ui/react-popover": "^1.0.2",
-        "@radix-ui/react-radio-group": "^1.1.0",
-        "@radix-ui/react-scroll-area": "^1.0.1",
-        "@radix-ui/react-switch": "^1.0.1",
-        "@radix-ui/react-tabs": "^1.0.1",
-        "@radix-ui/react-tooltip": "^1.0.2",
-        "@radix-ui/react-use-controllable-state": "^1.0.0",
-        "@react-aria/focus": "^3.9.0",
+        "@radix-ui/react-accordion": "1.0.1",
+        "@radix-ui/react-alert-dialog": "1.0.2",
+        "@radix-ui/react-checkbox": "1.0.1",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-dialog": "1.0.2",
+        "@radix-ui/react-dropdown-menu": "2.0.1",
+        "@radix-ui/react-hover-card": "1.0.2",
+        "@radix-ui/react-popover": "1.0.2",
+        "@radix-ui/react-radio-group": "1.1.0",
+        "@radix-ui/react-scroll-area": "1.0.1",
+        "@radix-ui/react-switch": "1.0.1",
+        "@radix-ui/react-tabs": "1.0.1",
+        "@radix-ui/react-tooltip": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
         "@tanstack/react-table": "^8.20.5",
         "@tanstack/react-virtual": "^3.0.1",
@@ -70,6 +70,7 @@
         "react-table": "^7.8.0",
         "react-window": "^1.8.8",
         "react-window-infinite-loader": "^1.0.8",
+        "recharts": "^2.13.3",
         "typeface-open-sans": "^1.1.13",
         "uuid": "^9.0.0"
     },
@@ -87,7 +88,7 @@
         "@testing-library/user-event": "13.0.0",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.14.187",
-        "@types/react": "^18.3.11",
+        "@types/react": "18.3.11",
         "@types/react-dom": "18.3.0",
         "@types/react-table": "^7.7.12",
         "@types/react-window": "^1.8.5",
@@ -128,5 +129,5 @@
             "not ie < 11"
         ]
     },
-    "gitHead": "a44e1425d430f382db8347ea4939eea169b24bca"
+    "gitHead": "3bcec75689f513ff5a2af43df501e6e58b84ebc9"
 }

package/tailwind.colors.js

@@ -0,0 +1,121 @@
+// NOTE: this file is intentianally a js file so that it can be consumed by tailwind.config.js
+
+const THEME_COLORS = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: '#fff',
+    black: '#1c1c1c',
+    brand: {
+        vismaRed: '#E70641',
+        paleOrange: '#FFF5E5',
+        sunsetOrange: '#E89C2E',
+        midnightBlue: '#29283E',
+        coolBlue: '#F5F7F9',
+    },
+    grey: {
+        lightest: '#fafafa',
+        light: '#F6F6F6',
+        DEFAULT: '#EBEBEB',
+        dark: '#DDDDDD',
+        darker: '#ACACAC',
+        darkest: '#595959',
+        darkNew: '#a5a6a9',
+        50: '#fafafa',
+        100: '#F6F6F6',
+        200: '#EBEBEB',
+        300: '#DDDDDD',
+        500: '#ACACAC',
+        700: '#595959',
+        900: '#303030',
+    },
+    purple: {
+        lightest: '#585c74',
+        light: '#4b4f64',
+        DEFAULT: '#3d4153',
+        dark: '#353a48',
+        darker: '#29283e',
+        darkest: '#212032',
+        darkNew_1: '#373647',
+        darkNew_2: '#414050',
+        100: '#EEE5FF',
+        200: '#ddd1ff',
+        300: '#CBBCFE',
+        500: '#9270FA',
+        700: '#6542D1',
+        900: '#412970',
+    },
+    blue: {
+        lightest: '#DEEBFF',
+        light: '#75A0F5',
+        DEFAULT: '#4573D2',
+        dark: '#2B57B4',
+        100: '#DEEBFF',
+        200: '#AACCFF',
+        300: '#75A0F5',
+        500: '#4573D2',
+        700: '#2B57B4',
+        900: '#29283E',
+    },
+    red: {
+        lightest: '#FFDAD2',
+        light: '#E66568',
+        DEFAULT: '#CE3F42',
+        dark: '#950027',
+        100: '#FFDAD2',
+        200: '#f3a09d',
+        300: '#E66568',
+        500: '#CE3F42',
+        700: '#950027',
+        900: '#64001B',
+    },
+    green: {
+        lightest: '#cdf0e7',
+        light: '#52C7AB',
+        DEFAULT: '#08AE87',
+        dark: '#028465',
+        100: '#cdf0e7',
+        200: '#9be1ce',
+        300: '#52C7AB',
+        500: '#08AE87',
+        700: '#028465',
+        900: '#14493A',
+    },
+    yellow: {
+        lightest: '#FFF1C3',
+        light: '#FFD665',
+        DEFAULT: '#FFBD3B',
+        dark: '#e89c2e',
+        100: '#FFF1C3',
+        200: '#ffe494',
+        300: '#FFD665',
+        500: '#FFBD3B',
+        700: '#e89c2e',
+        900: '#733700',
+    },
+    pink: {
+        100: '#FFE3F7',
+        200: '#fcb9e9',
+        300: '#F98EDB',
+        500: '#E165BF',
+        700: '#CF49AA',
+        900: '#870062',
+    },
+    brown: {
+        100: '#EEE0DA',
+        200: '#DFCCC2',
+        300: '#C4AB9E',
+        500: '#93715D',
+        700: '#73503B',
+        900: '#45291F',
+    },
+    orange: {
+        100: '#FFE3BB',
+        200: '#FCCB80',
+        300: '#FAB64D',
+        500: '#F99702',
+        700: '#EF7D00',
+        900: '#4A2811',
+    },
+};
+
+export default THEME_COLORS;

package/tailwind.config.js

@@ -1,10 +1,11 @@
-const tokens = require('@economic/taco-tokens').default;
 const plugin = require('tailwindcss/plugin');
 const defaultTheme = require('tailwindcss/defaultTheme');
 
+const colors = require('./tailwind.colors.js').default;
+
 module.exports = {
     theme: {
-        colors: tokens.colors,
+        colors,
         fontFamily: {
             display: ['Helvetica, Arial, sans-serif'],
             mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],

package/dist/components/Table3/components/Row/Editing/CreateRowButton.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';
-import { ScrollToOptions } from '@tanstack/react-virtual';
-declare type Props<TType = unknown> = {
-    table: ReactTable<TType>;
-    tableMeta: ReactTableMeta<TType>;
-    onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;
-    scrollToIndex: (index: number, options?: ScrollToOptions) => void;
-};
-export default function CreateNewRowButton<TType = unknown>(props: Props<TType>): React.JSX.Element;
-export {};

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js

@@ -1,90 +0,0 @@
-import React__default from 'react';
-import { useLocalization } from '../../../../Provider/Localization.js';
-import { Button } from '../../../../Button/Button.js';
-import { animateCreateRow } from '../../../util/editing.js';
-
-function CreateNewRowButton(props) {
-  const {
-    onEditingCreate,
-    scrollToIndex,
-    table,
-    tableMeta
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);
-  const [rowCreated, setRowCreated] = React__default.useState({
-    rowFinder: undefined
-  });
-  const handleKeyDown = event => {
-    if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
-      tableMeta.editing.saveChanges();
-    }
-  };
-  const handleCreate = function () {
-    try {
-      if (!onEditingCreate) {
-        return Promise.resolve();
-      }
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder = rowCreated.rowFinder) === null || _rowCreated$rowFinder === void 0 ? void 0 : _rowCreated$rowFinder.call(rowCreated, row.original);
-      });
-      const _temp = function () {
-        if (createdRow) {
-          return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
-            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
-              const rowFinder = onEditingCreate();
-              setRowCreated({
-                rowFinder
-              });
-            }
-          });
-        } else {
-          const rowFinder = onEditingCreate();
-          setRowCreated({
-            rowFinder
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React__default.useEffect(() => {
-    if (typeof (rowCreated === null || rowCreated === void 0 ? void 0 : rowCreated.rowFinder) === 'function') {
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder2;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder2 = rowCreated.rowFinder) === null || _rowCreated$rowFinder2 === void 0 ? void 0 : _rowCreated$rowFinder2.call(rowCreated, row.original);
-      });
-      if (createdRow) {
-        const rowInTable = table.getRowModel().rows.filter(row => row.original !== undefined).find(row => {
-          var _rowCreated$rowFinder3;
-          return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder3 = rowCreated.rowFinder) === null || _rowCreated$rowFinder3 === void 0 ? void 0 : _rowCreated$rowFinder3.call(rowCreated, row.original);
-        });
-        if (rowInTable) {
-          tableMeta.editing.toggleEditing(true);
-          tableMeta.rowActive.setRowActiveIndex(createdRow.index);
-          scrollToIndex(createdRow.index);
-          requestAnimationFrame(() => animateCreateRow(createdRow.id));
-        }
-        requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));
-      }
-    }
-  }, [rowCreated]);
-  return /*#__PURE__*/React__default.createElement("tr", {
-    onClick: handleCreate,
-    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
-  }, /*#__PURE__*/React__default.createElement("td", {
-    className: "!border-t-0 !bg-transparent"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    onKeyDown: handleKeyDown,
-    className: "group-hover:bg-grey-200 sticky left-0",
-    appearance: "transparent"
-  }, "+ ", texts.table3.editing.buttons.create.label)));
-}
-
-export default CreateNewRowButton;
-//# sourceMappingURL=CreateRowButton.js.map

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CreateRowButton.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateRowButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions } from '@tanstack/react-virtual';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { animateCreateRow } from '../../../util/editing';\n\ntype Props<TType = unknown> = {\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;\n    scrollToIndex: (index: number, options?: ScrollToOptions) => void;\n};\n\nexport default function CreateNewRowButton<TType = unknown>(props: Props<TType>) {\n    const { onEditingCreate, scrollToIndex, table, tableMeta } = props;\n    const { texts } = useLocalization();\n    const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);\n\n    const [rowCreated, setRowCreated] = React.useState<{ rowFinder: ((row: Partial<TType>) => boolean) | undefined }>({\n        rowFinder: undefined,\n    });\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {\n            tableMeta.editing.saveChanges();\n        }\n    };\n\n    const handleCreate = async () => {\n        if (!onEditingCreate) {\n            return;\n        }\n        const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n        if (createdRow) {\n            await tableMeta.editing.saveChanges();\n\n            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {\n                const rowFinder = onEditingCreate();\n\n                setRowCreated({ rowFinder });\n            }\n        } else {\n            const rowFinder = onEditingCreate();\n            setRowCreated({ rowFinder });\n        }\n    };\n\n    React.useEffect(() => {\n        if (typeof rowCreated?.rowFinder === 'function') {\n            const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n            if (createdRow) {\n                const rowInTable = table\n                    .getRowModel()\n                    .rows.filter(row => row.original !== undefined)\n                    .find(row => rowCreated?.rowFinder?.(row.original));\n                if (rowInTable) {\n                    tableMeta.editing.toggleEditing(true);\n                    tableMeta.rowActive.setRowActiveIndex(createdRow.index);\n                    scrollToIndex(createdRow.index);\n                    requestAnimationFrame(() => animateCreateRow(createdRow.id));\n                }\n                requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow as any));\n            }\n        }\n    }, [rowCreated]);\n\n    return (\n        <tr\n            onClick={handleCreate}\n            className=\"border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t\">\n            <td className=\"!border-t-0 !bg-transparent\">\n                <Button onKeyDown={handleKeyDown} className=\"group-hover:bg-grey-200 sticky left-0\" appearance=\"transparent\">\n                    + {texts.table3.editing.buttons.create.label}\n                </Button>\n            </td>\n        </tr>\n    );\n}\n"],"names":["CreateNewRowButton","props","onEditingCreate","scrollToIndex","table","tableMeta","texts","useLocalization","rows","getCoreRowModel","filter","row","original","undefined","rowCreated","setRowCreated","React","useState","rowFinder","handleKeyDown","event","editing","hasChanges","key","saveChanges","handleCreate","Promise","resolve","createdRow","find","_rowCreated$rowFinder","call","_temp","then","hasRowErrors","id","e","reject","useEffect","_rowCreated$rowFinder2","rowInTable","getRowModel","_rowCreated$rowFinder3","toggleEditing","rowActive","setRowActiveIndex","index","requestAnimationFrame","animateCreateRow","addCreatedRowChangeset","onClick","className","Button","onKeyDown","appearance","table3","buttons","create","label"],"mappings":"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"}