@economic/taco 1.1.5-alpha.1 → 1.1.5-alpha.102

package/dist/utils/mergeRefs.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/dist/utils/tailwind.d.ts

@@ -1 +1 @@
-export declare const getInputStateClasses: (state?: import("..").RowIndexPath) => string | false;
+export declare const getInputStateClasses: (state?: string | undefined) => string | false;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "1.1.5-alpha.1",
+    "version": "1.1.5-alpha.102+7f221a401",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -42,7 +42,7 @@
         "url": "https://github.com/e-conomic/taco/issues"
     },
     "dependencies": {
-        "@economic/taco-tokens": "^1.0.2-alpha.0",
+        "@economic/taco-tokens": "^1.0.3",
         "@radix-ui/react-accordion": "^0.1.6",
         "@radix-ui/react-checkbox": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.7",
@@ -56,7 +56,7 @@
         "@radix-ui/react-use-controllable-state": "^0.1.0",
         "@react-aria/focus": "^3.2.3",
         "@react-aria/interactions": "^3.3.2",
-        "classnames": "^2.2.6",
+        "classnames": "^2.3.1",
         "date-fns": "^2.14.0",
         "framer-motion": "^5.5.6",
         "keycode": "^2.2.0",
@@ -81,7 +81,6 @@
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
-        "@types/classnames": "^2.2.9",
         "@types/lodash": "^4.14.168",
         "@types/react": "^17.0.35",
         "@types/react-dom": "^17.0.11",
@@ -128,5 +127,5 @@
             "not ie < 11"
         ]
     },
-    "gitHead": "a5a4720d677e6748070706096b65ff750c9708cd"
+    "gitHead": "7f221a4014352944e52be9e29712d0d3f7a3cd99"
 }

package/tailwind.config.js

@@ -1,260 +1,264 @@
-const tokens = require('@economic/taco-tokens').default;
-const plugin = require('tailwindcss/plugin');
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-module.exports = {
-    theme: {
-        colors: tokens.colors,
-        fontFamily: {
-            display: ['Helvetica, Arial, sans-serif'],
-            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
-        },
-        extend: {
-            cursor: {
-                grab: 'grab',
-                grabbing: 'grabbing',
-            },
-            listStyleType: {
-                circle: 'circle',
-            },
-            spacing: {
-                18: '4.5rem',
-                72: '18rem',
-                80: '20rem',
-                88: '22rem',
-                96: '24rem',
-                104: '26rem',
-                112: '28rem',
-                120: '30rem',
-                128: '32rem',
-                xs: '32rem',
-                sm: '48rem',
-                md: '64rem',
-                lg: '80rem',
-            },
-            screens: {
-                xs: '24rem',
-                ...defaultTheme.screens,
-            },
-        },
-    },
-    plugins: [
-        require('./plugins/tailwindcss-aria-attributes'),
-        plugin(function ({ addUtilities, theme }) {
-            // ideally we would do this using the @layer utilities directive, but
-            // that causes issues in tools like tailwind where the typescript is loaded before the css
-            // resulting in "yt-focus class does not exist" errors
-            addUtilities({
-                '.fixed-center': {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center': {
-                    position: 'absolute',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center-x': {
-                    position: 'absolute',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                },
-                '.absolute-center-y': {
-                    position: 'absolute',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                }, // WCAG contrast combinations
-                '.wcag-black': {
-                    background: theme('colors.black'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-white': {
-                    background: theme('colors.white'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-lightest': {
-                    background: theme('colors.grey.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-light': {
-                    background: theme('colors.grey.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-dark': {
-                    background: theme('colors.grey.dark'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-darker': {
-                    background: theme('colors.grey.darker'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-grey-darkest': {
-                    background: theme('colors.grey.darkest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-lightest': {
-                    background: theme('colors.purple.lightest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-light': {
-                    background: theme('colors.purple.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple': {
-                    background: theme('colors.purple.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-dark': {
-                    background: theme('colors.purple.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-lightest': {
-                    background: theme('colors.blue.lightest'),
-                    color: theme('colors.blue.dark'),
-                },
-                '.wcag-blue-light': {
-                    background: theme('colors.blue.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-dark': {
-                    background: theme('colors.blue.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-lightest': {
-                    background: theme('colors.red.lightest'),
-                    color: theme('colors.red.dark'),
-                },
-                '.wcag-red-light': {
-                    background: theme('colors.red.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-dark': {
-                    background: theme('colors.red.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-lightest': {
-                    background: theme('colors.green.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green-light': {
-                    background: theme('colors.green.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-dark': {
-                    background: theme('colors.green.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-yellow-lightest': {
-                    background: theme('colors.yellow.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-light': {
-                    background: theme('colors.yellow.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-dark': {
-                    background: theme('colors.yellow.dark'),
-                    color: theme('colors.white'),
-                },
-                // Legacy
-                '.yt-transparent': {
-                    background: theme('colors.transparent'),
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-focus': {
-                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-green': {
-                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-yellow': {
-                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-red': {
-                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-blue-solid': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-blue-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-yellow-solid': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-yellow-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
-                    color: theme('colors.yellow.DEFAULT'),
-                },
-                '.yt-red-solid': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-red-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
-                    color: theme('colors.red.DEFAULT'),
-                },
-                '.yt-green-solid': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-green-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
-                    color: theme('colors.green.DEFAULT'),
-                },
-                '.yt-grey-solid': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-grey-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.grey.darkest')}`,
-                    color: theme('colors.grey.darkest'),
-                },
-                '.yt-shadow': {
-                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.yt-shadow-inset': {
-                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.pointer-events-all': {
-                    'pointer-events': 'all',
-                },
-            });
-        }),
-    ],
-};
+const tokens = require('@economic/taco-tokens').default;
+const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+    theme: {
+        colors: tokens.colors,
+        fontFamily: {
+            display: ['Helvetica, Arial, sans-serif'],
+            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
+        },
+        extend: {
+            cursor: {
+                grab: 'grab',
+                grabbing: 'grabbing',
+            },
+            listStyleType: {
+                circle: 'circle',
+            },
+            spacing: {
+                18: '4.5rem',
+                72: '18rem',
+                80: '20rem',
+                88: '22rem',
+                96: '24rem',
+                104: '26rem',
+                112: '28rem',
+                120: '30rem',
+                128: '32rem',
+                xs: '32rem',
+                sm: '48rem',
+                md: '64rem',
+                lg: '80rem',
+            },
+            screens: {
+                xs: '375px',
+                ...defaultTheme.screens,
+            },
+        },
+    },
+    plugins: [
+        require('./plugins/tailwindcss-aria-attributes'),
+        plugin(function ({ addUtilities, theme }) {
+            // ideally we would do this using the @layer utilities directive, but
+            // that causes issues in tools like tailwind where the typescript is loaded before the css
+            // resulting in "yt-focus class does not exist" errors
+            addUtilities({
+                '.fixed-center': {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center': {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center-x': {
+                    position: 'absolute',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                },
+                '.absolute-center-y': {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                }, // WCAG contrast combinations
+                '.wcag-black': {
+                    background: theme('colors.black'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-white': {
+                    background: theme('colors.white'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-lightest': {
+                    background: theme('colors.grey.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-light': {
+                    background: theme('colors.grey.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-dark': {
+                    background: theme('colors.grey.dark'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-darker': {
+                    background: theme('colors.grey.darker'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darkest': {
+                    background: theme('colors.grey.darkest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-lightest': {
+                    background: theme('colors.purple.lightest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-light': {
+                    background: theme('colors.purple.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple': {
+                    background: theme('colors.purple.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-dark': {
+                    background: theme('colors.purple.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-lightest': {
+                    background: theme('colors.blue.lightest'),
+                    color: theme('colors.blue.dark'),
+                },
+                '.wcag-blue-light': {
+                    background: theme('colors.blue.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-dark': {
+                    background: theme('colors.blue.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-lightest': {
+                    background: theme('colors.red.lightest'),
+                    color: theme('colors.red.dark'),
+                },
+                '.wcag-red-light': {
+                    background: theme('colors.red.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-dark': {
+                    background: theme('colors.red.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-lightest': {
+                    background: theme('colors.green.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green-light': {
+                    background: theme('colors.green.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-dark': {
+                    background: theme('colors.green.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-yellow-lightest': {
+                    background: theme('colors.yellow.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-light': {
+                    background: theme('colors.yellow.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-dark': {
+                    background: theme('colors.yellow.dark'),
+                    color: theme('colors.white'),
+                },
+                // Legacy
+                '.yt-transparent': {
+                    background: theme('colors.transparent'),
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-focus': {
+                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-dark': {
+                    'box-shadow': '0 0 0 3px rgba(38, 132, 255, 75%)',
+                    outline: 'none',
+                },
+                '.yt-focus-green': {
+                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-yellow': {
+                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-red': {
+                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-blue-solid': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-blue-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-yellow-solid': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-yellow-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
+                    color: theme('colors.yellow.DEFAULT'),
+                },
+                '.yt-red-solid': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-red-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
+                    color: theme('colors.red.DEFAULT'),
+                },
+                '.yt-green-solid': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-green-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
+                    color: theme('colors.green.DEFAULT'),
+                },
+                '.yt-grey-solid': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-grey-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.grey.darkest')}`,
+                    color: theme('colors.grey.darkest'),
+                },
+                '.yt-shadow': {
+                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.yt-shadow-inset': {
+                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.pointer-events-all': {
+                    'pointer-events': 'all',
+                },
+            });
+        }),
+    ],
+};

package/types.json

@@ -554,7 +554,7 @@
                     "type": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 833,
+                            "id": 841,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",
@@ -1137,10 +1137,12 @@
             "'list-search'",
             "'list'",
             "'lock-open'",
+            "'log-out'",
             "'log'",
             "'market'",
             "'match-amount'",
             "'match-entries'",
+            "'menu'",
             "'mileage'",
             "'modal-resize'",
             "'modal-shrink'",
@@ -1151,6 +1153,7 @@
             "'note-follow-up'",
             "'note-read'",
             "'note'",
+            "'numbers'",
             "'partner-api'",
             "'period'",
             "'person-change'",
@@ -1162,6 +1165,7 @@
             "'print'",
             "'process-payment'",
             "'product-ledger-card'",
+            "'profile'",
             "'project-cards'",
             "'projects'",
             "'quicklinks'",
@@ -2380,7 +2384,7 @@
                     "constraint": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 1321,
+                            "id": 1330,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",
@@ -3429,6 +3433,12 @@
                         "returnValue": "void"
                     }
                 },
+                {
+                    "description": "The scroll distance from the element scrollTop value.",
+                    "name": "scrollOffset",
+                    "optional": true,
+                    "type": "number"
+                },
                 {
                     "name": "spotlightClicks",
                     "optional": true,