@economic/taco 1.17.0-alpha.0 → 1.17.1

package/dist/utils/aria.d.ts

@@ -0,0 +1,2 @@
+export declare const isAriaSelectionKey: (event: React.KeyboardEvent) => boolean;
+export declare const isAriaDirectionKey: (event: React.KeyboardEvent) => boolean;

package/dist/utils/colors.d.ts

@@ -0,0 +1,12 @@
+export declare const colors: {
+    green: string;
+    yellow: string;
+    red: string;
+    blue: string;
+    purple: string;
+    orange: string;
+    brown: string;
+    pink: string;
+    grey: string;
+};
+export declare type Color = keyof typeof colors;

package/dist/utils/date.d.ts

@@ -0,0 +1,3 @@
+export declare const format: (date: Date | undefined, mask?: string) => string | undefined;
+export declare const parseFromCustomString: (date?: string, mask?: string) => Date | undefined;
+export declare const parseFromISOString: (date: string) => Date | undefined;

package/dist/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (fn: Function, delay: number) => (this: any, ...args: any[]) => void;

package/dist/utils/device.d.ts

@@ -0,0 +1 @@
+export declare const isMobileDevice: (navigator: Navigator | undefined) => boolean;

package/dist/utils/dom.d.ts

@@ -0,0 +1,2 @@
+export declare const isOverflowing: (element: HTMLElement | null) => boolean;
+export declare const getIndexOfFirstChildOverflowingParent: (element: HTMLElement, overscan?: number) => number | null;

package/dist/utils/hooks/useDraggable.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDraggable: (ref: React.MutableRefObject<HTMLDivElement | null>) => any;

package/dist/utils/hooks/useDropTarget.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type useDropTarget = [boolean, (undefined | {
+    onDragEnter: React.DragEventHandler;
+    onDragLeave: React.DragEventHandler;
+    onDragOver: React.DragEventHandler;
+    onDrop: React.DragEventHandler;
+})];
+export declare const useDropTarget: (onDrop: React.DragEventHandler | undefined) => useDropTarget;

package/dist/utils/hooks/useListKeyboardNavigation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Orientation } from '../../types';
+export declare const getNextIndexFromKey: (key: string, length: number, index: number | undefined, direction?: Orientation) => number | undefined;
+export declare type useListKeyboardNavigationOptions = {
+    direction?: Orientation;
+    initialIndex?: number;
+};
+export declare const useListKeyboardNavigation: (length?: number, options?: useListKeyboardNavigationOptions) => [number | undefined, (index: number | undefined) => void, (event: React.KeyboardEvent<HTMLElement>) => number | undefined];

package/dist/utils/hooks/useListScrollTo.d.ts

@@ -0,0 +1 @@
+export declare const useListScrollTo: (internalRef: any, itemRefs: any[]) => any;

package/dist/utils/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useOnClickOutside: (ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[], callback: (event: MouseEvent | TouchEvent) => void) => void;

package/dist/utils/hooks/useRefState.d.ts

@@ -0,0 +1 @@
+export declare const useRefState: <T>(initialValue: T) => [T, (value: T) => void];

package/dist/utils/hooks/useTimer.d.ts

@@ -0,0 +1,7 @@
+export interface Timer {
+    running: boolean;
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+}
+export default function useTimer(duration: number | undefined, callback: () => void): Timer;

package/dist/utils/input.d.ts

@@ -0,0 +1,3 @@
+export declare const createCustomEvent: (eventType: string) => any;
+export declare const createCustomKeyboardEvent: (event: React.KeyboardEvent<HTMLInputElement>) => any;
+export declare const setInputValueByRef: (input: HTMLInputElement | null, value: string | undefined, event?: string) => void;

package/dist/utils/mergeRefs.d.ts

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

package/dist/utils/storyutils.d.ts

@@ -0,0 +1,8 @@
+import { Faker } from '@faker-js/faker';
+import sort from 'fast-sort';
+export declare const createFakeData: (creator: (faker: any) => any, ...length: any[]) => any[];
+export declare const getRandomNumber: (max: any, min?: number) => number;
+export declare const iconNames: string[];
+export declare const generateId: () => string;
+export declare const sleep: (ms: number) => Promise<unknown>;
+export { sort };

package/dist/utils/taillwind.d.ts

@@ -0,0 +1,4 @@
+import { State, Appearance } from '../types';
+export declare const getAppearanceClasses: (value: Appearance | undefined) => string;
+export declare const getStateClasses: (value: State | undefined) => string;
+export declare const getOutlineClasses: (state: Appearance | State | undefined) => string;

package/dist/utils/tailwind.d.ts

@@ -0,0 +1 @@
+export declare const getInputStateClasses: (state?: string | undefined) => string | false;

package/package.json

@@ -1,139 +1,133 @@
-{
-    "name": "@economic/taco",
-    "version": "1.17.0-alpha.0",
-    "description": "> TODO: description",
-    "author": "Matt Daly <matthew.daly@visma.com>",
-    "homepage": "https://github.com/e-conomic/taco#readme",
-    "license": "MIT",
-    "main": "dist/taco.js",
-    "module": "dist/taco.esm.js",
-    "types": "dist/types.d.ts",
-    "source": "src/index.ts",
-    "sideEffects": [
-        "*.css"
-    ],
-    "directories": {
-        "dist": "dist",
-        "test": "__tests__"
-    },
-    "files": [
-        "dist",
-        "plugins",
-        "tailwind.config.js",
-        "types.json"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/e-conomic/taco.git"
-    },
-    "scripts": {
-        "clean": "rimraf dist",
-        "watch": "parcel watch",
-        "prebuild": "npm run clean",
-        "build": "parcel build",
-        "postbuild": "npm run generate-typedoc",
-        "lint": "eslint src",
-        "test": "jest",
-        "generate-typedoc": "node scripts/generate-typedoc",
-        "generate-icons": "node scripts/generate-icons"
-    },
-    "bugs": {
-        "url": "https://github.com/e-conomic/taco/issues"
-    },
-    "dependencies": {
-        "@dnd-kit/sortable": "^7.0.1",
-        "@economic/taco-tokens": "^1.3.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-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",
-        "@react-aria/interactions": "^3.12.0",
-        "@swc/helpers": "^0.4.14",
-        "classnames": "^2.3.2",
-        "date-fns": "^2.29.3",
-        "framer-motion": "^6.5.1",
-        "lodash-es": "4.17.21",
-        "react-day-picker": "^7.4.8",
-        "react-intersection-observer": "^9.4.0",
-        "react-joyride": "^2.5.3",
-        "react-table": "^7.8.0",
-        "react-window": "^1.8.8",
-        "react-window-infinite-loader": "^1.0.8",
-        "regenerator-runtime": "^0.13.11",
-        "typeface-open-sans": "^1.1.13",
-        "uuid": "^9.0.0"
-    },
-    "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17",
-        "tailwindcss": ">=3"
-    },
-    "devDependencies": {
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
-        "@economic/parcel-transformer-css": "*",
-        "@svgr/cli": "^5.5.0",
-        "@testing-library/dom": "^7.31.0",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^11.1.0",
-        "@testing-library/user-event": "^12.1.10",
-        "@types/jest": "^29.2.1",
-        "@types/lodash-es": "^4.17.6",
-        "@types/react": "^17.0.35",
-        "@types/react-dom": "^17.0.11",
-        "@types/react-table": "^7.7.12",
-        "@types/react-window": "^1.8.5",
-        "@types/react-window-infinite-loader": "^1.0.6",
-        "@types/uuid": "^7.0.3",
-        "autoprefixer": "^10.4.13",
-        "fast-sort": "^2.2.0",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.2.2",
-        "jest-environment-jsdom": "^29.2.2",
-        "lodash.flatten": "^4.4.0",
-        "mutationobserver-shim": "^0.3.7",
-        "parcel": "^2.7.0",
-        "postcss": "^8.4.18",
-        "postcss-nested": "^4.2.3",
-        "react-dom": "^17.0.2",
-        "resize-observer-polyfill": "^1.5.1",
-        "rimraf": "^3.0.2",
-        "rollup-plugin-commonjs": "^10.1.0",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-postcss": "^4.0.2",
-        "svgo": "^1.3.2",
-        "tailwindcss": "^3.2.1",
-        "ts-jest": "^29.0.3",
-        "ts-node": "^10.9.1",
-        "tsdx": "^0.13.2",
-        "typedoc": "0.18.0",
-        "typescript": "4.7.3"
-    },
-    "browserslist": {
-        "development": [
-            "last 2 chrome versions",
-            "last 2 firefox versions",
-            "last 2 edge versions",
-            "not ie < 11"
-        ],
-        "production": [
-            ">1%",
-            "last 4 versions",
-            "Firefox ESR",
-            "not ie < 11"
-        ]
-    }
-}
+{
+    "name": "@economic/taco",
+    "version": "1.17.1",
+    "description": "> TODO: description",
+    "author": "Matt Daly <matthew.daly@visma.com>",
+    "homepage": "https://github.com/e-conomic/taco#readme",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "dist/esm/index.js",
+    "sideEffects": false,
+    "types": "dist/index.d.ts",
+    "directories": {
+        "dist": "dist",
+        "test": "__tests__"
+    },
+    "files": [
+        "dist",
+        "plugins",
+        "tailwind.config.js",
+        "types.json"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/e-conomic/taco.git"
+    },
+    "scripts": {
+        "watch": "tsdx watch",
+        "build": "tsdx build",
+        "postbuild": "npm run generate-typedoc",
+        "lint": "eslint src",
+        "test": "jest",
+        "generate-typedoc": "node scripts/generate-typedoc",
+        "generate-icons": "node scripts/generate-icons",
+        "storybook-build": "build-storybook -o build-storybook --quiet",
+        "storybook": "start-storybook -p 6006 --no-open"
+    },
+    "bugs": {
+        "url": "https://github.com/e-conomic/taco/issues"
+    },
+    "dependencies": {
+        "@dnd-kit/sortable": "^7.0.1",
+        "@economic/taco-tokens": "^1.4.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-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",
+        "@react-aria/interactions": "^3.12.0",
+        "classnames": "^2.3.2",
+        "date-fns": "^2.29.3",
+        "framer-motion": "^6.5.1",
+        "lodash-es": "4.17.21",
+        "react-day-picker": "^7.4.8",
+        "react-intersection-observer": "^9.4.0",
+        "react-joyride": "^2.5.3",
+        "react-table": "^7.8.0",
+        "react-window": "^1.8.8",
+        "react-window-infinite-loader": "^1.0.8",
+        "typeface-open-sans": "^1.1.13",
+        "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17",
+        "tailwindcss": ">=3"
+    },
+    "devDependencies": {
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@svgr/cli": "^5.5.0",
+        "@testing-library/dom": "^7.31.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/jest": "^29.2.1",
+        "@types/lodash": "^4.14.187",
+        "@types/react": "^17.0.35",
+        "@types/react-dom": "^17.0.11",
+        "@types/react-table": "^7.7.12",
+        "@types/react-window": "^1.8.5",
+        "@types/react-window-infinite-loader": "^1.0.6",
+        "@types/uuid": "^7.0.3",
+        "autoprefixer": "^10.4.13",
+        "fast-sort": "^2.2.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^29.2.2",
+        "jest-environment-jsdom": "^29.2.2",
+        "lodash.flatten": "^4.4.0",
+        "mutationobserver-shim": "^0.3.7",
+        "postcss": "^8.4.18",
+        "postcss-nested": "^4.2.3",
+        "react-dom": "^17.0.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "rimraf": "^3.0.2",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "svgo": "^1.3.2",
+        "tailwindcss": "^3.2.1",
+        "ts-jest": "^29.0.3",
+        "ts-node": "^10.9.1",
+        "tsdx": "^0.13.2",
+        "typedoc": "0.18.0",
+        "typescript": "4.7.3"
+    },
+    "browserslist": {
+        "development": [
+            "last 2 chrome versions",
+            "last 2 firefox versions",
+            "last 2 edge versions",
+            "not ie < 11"
+        ],
+        "production": [
+            ">1%",
+            "last 4 versions",
+            "Firefox ESR",
+            "not ie < 11"
+        ]
+    },
+    "gitHead": "4038fb0ff8ee4e90a85388d22e869463232f6115"
+}

package/plugins/tailwindcss-aria-attributes.js

@@ -1,73 +1,73 @@
-// copied from this unpublished plugin https://github.com/thoughtbot/tailwindcss-aria-attributes#usage
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(({ addVariant, e }) => {
-    [
-        'atomic',
-        'busy',
-        'checked',
-        'current',
-        'disabled',
-        'expanded',
-        'grabbed',
-        'haspopup',
-        'hidden',
-        'invalid',
-        'live',
-        'modal',
-        'multiline',
-        'multiselectable',
-        'pressed',
-        'readonly',
-        'required',
-        'selected',
-    ].forEach(boolean => {
-        const selector = `aria-${boolean}`;
-        addVariant(selector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
-        );
-
-        const groupSelector = `group-aria-${boolean}`;
-        addVariant(groupSelector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
-        );
-
-        const peerSelector = `peer-aria-${boolean}`;
-        addVariant(peerSelector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
-        );
-    });
-
-    const enumerables = {
-        autocomplete: ['both', 'inline', 'list', 'none'],
-        current: ['date', 'location', 'page', 'step', 'time'],
-        dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
-        haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
-        orientation: ['horizontal', 'undefined', 'vertial'],
-        relevant: ['additions', 'all', 'removals', 'text'],
-        sort: ['ascending', 'descending', 'none', 'other'],
-    };
-
-    for (const [attribute, values] of Object.entries(enumerables)) {
-        for (const value of values) {
-            const selector = `aria-${attribute}-${value}`;
-            addVariant(selector, ({ modifySelectors, separator }) =>
-                modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
-            );
-
-            const groupSelector = `group-aria-${attribute}-${value}`;
-            addVariant(groupSelector, ({ modifySelectors, separator }) =>
-                modifySelectors(
-                    ({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`
-                )
-            );
-
-            const peerSelector = `peer-aria-${attribute}-${value}`;
-            addVariant(peerSelector, ({ modifySelectors, separator }) =>
-                modifySelectors(
-                    ({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`
-                )
-            );
-        }
-    }
-});
+// copied from this unpublished plugin https://github.com/thoughtbot/tailwindcss-aria-attributes#usage
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(({ addVariant, e }) => {
+    [
+        'atomic',
+        'busy',
+        'checked',
+        'current',
+        'disabled',
+        'expanded',
+        'grabbed',
+        'haspopup',
+        'hidden',
+        'invalid',
+        'live',
+        'modal',
+        'multiline',
+        'multiselectable',
+        'pressed',
+        'readonly',
+        'required',
+        'selected',
+    ].forEach(boolean => {
+        const selector = `aria-${boolean}`;
+        addVariant(selector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
+        );
+
+        const groupSelector = `group-aria-${boolean}`;
+        addVariant(groupSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
+        );
+
+        const peerSelector = `peer-aria-${boolean}`;
+        addVariant(peerSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
+        );
+    });
+
+    const enumerables = {
+        autocomplete: ['both', 'inline', 'list', 'none'],
+        current: ['date', 'location', 'page', 'step', 'time'],
+        dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
+        haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
+        orientation: ['horizontal', 'undefined', 'vertial'],
+        relevant: ['additions', 'all', 'removals', 'text'],
+        sort: ['ascending', 'descending', 'none', 'other'],
+    };
+
+    for (const [attribute, values] of Object.entries(enumerables)) {
+        for (const value of values) {
+            const selector = `aria-${attribute}-${value}`;
+            addVariant(selector, ({ modifySelectors, separator }) =>
+                modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
+            );
+
+            const groupSelector = `group-aria-${attribute}-${value}`;
+            addVariant(groupSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`
+                )
+            );
+
+            const peerSelector = `peer-aria-${attribute}-${value}`;
+            addVariant(peerSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`
+                )
+            );
+        }
+    }
+});

package/plugins/tailwindcss-group-peer.js

@@ -0,0 +1,12 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function groupPeer({ addVariant }) {
+    const pseudoVariants = ['active', 'focus', 'hover', 'invalid'].map(variant => [variant, `&:${variant}`]);
+
+    for (let [variantName, state] of pseudoVariants) {
+        addVariant(`group-peer-${variantName}`, ctx => {
+            const result = typeof state === 'function' ? state(ctx) : state;
+            return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ .group &');
+        });
+    }
+});