@economic/taco 1.12.3 → 1.13.0

package/dist/esm/packages/taco/src/utils/input.js

@@ -0,0 +1,42 @@
+// returns a custom event compatible with all browsers
+const createCustomEvent = eventType => {
+  let customEvent;
+  if (typeof Event === 'function') {
+    customEvent = new Event(eventType, {
+      bubbles: true
+    });
+  } else {
+    customEvent = document.createEvent('Event');
+    customEvent.initEvent(eventType, true, true);
+  }
+  return customEvent;
+};
+// returns a custom keyboard event compatible with all browsers
+const createCustomKeyboardEvent = event => {
+  let customKeyboardEvent;
+  if (typeof KeyboardEvent === 'function') {
+    customKeyboardEvent = new KeyboardEvent(event.type, event);
+  } else {
+    customKeyboardEvent = document.createEvent('Event');
+    customKeyboardEvent.initEvent(event.type, true, true);
+    customKeyboardEvent.key = event.key;
+    customKeyboardEvent.charCode = event.charCode;
+  }
+  return customKeyboardEvent;
+};
+const setInputValueByRef = (input, value, event = 'change') => {
+  if (!input) {
+    return;
+  }
+  const previousValue = input.value;
+  input.value = value || '';
+  const tracker = input._valueTracker;
+  if (tracker) {
+    tracker.setValue(previousValue);
+  }
+  // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+  input.dispatchEvent(createCustomEvent(event));
+};
+
+export { createCustomEvent, createCustomKeyboardEvent, setInputValueByRef };
+//# sourceMappingURL=input.js.map

package/dist/esm/packages/taco/src/utils/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../../../../src/utils/input.ts"],"sourcesContent":["// returns a custom event compatible with all browsers\nexport const createCustomEvent = (eventType: string) => {\n    let customEvent;\n\n    if (typeof Event === 'function') {\n        customEvent = new Event(eventType, { bubbles: true });\n    } else {\n        customEvent = document.createEvent('Event');\n        customEvent.initEvent(eventType, true, true);\n    }\n    return customEvent;\n};\n\n// returns a custom keyboard event compatible with all browsers\nexport const createCustomKeyboardEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    let customKeyboardEvent;\n\n    if (typeof KeyboardEvent === 'function') {\n        customKeyboardEvent = new KeyboardEvent(event.type, event as any);\n    } else {\n        customKeyboardEvent = document.createEvent('Event') as any;\n        customKeyboardEvent.initEvent(event.type, true, true);\n        customKeyboardEvent.key = event.key;\n        customKeyboardEvent.charCode = event.charCode;\n    }\n\n    return customKeyboardEvent;\n};\n\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: string | undefined, event = 'change'): void => {\n    if (!input) {\n        return;\n    }\n\n    const previousValue = input.value;\n    input.value = value || '';\n\n    const tracker = (input as any)._valueTracker;\n\n    if (tracker) {\n        tracker.setValue(previousValue);\n    }\n\n    // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324\n    input.dispatchEvent(createCustomEvent(event));\n};\n"],"names":["createCustomEvent","eventType","customEvent","Event","bubbles","document","createEvent","initEvent","createCustomKeyboardEvent","event","customKeyboardEvent","KeyboardEvent","type","key","charCode","setInputValueByRef","input","value","previousValue","tracker","_valueTracker","setValue","dispatchEvent"],"mappings":"AAAA;MACaA,iBAAiB,GAAIC,SAAiB;EAC/C,IAAIC,WAAW;EAEf,IAAI,OAAOC,KAAK,KAAK,UAAU,EAAE;IAC7BD,WAAW,GAAG,IAAIC,KAAK,CAACF,SAAS,EAAE;MAAEG,OAAO,EAAE;KAAM,CAAC;GACxD,MAAM;IACHF,WAAW,GAAGG,QAAQ,CAACC,WAAW,CAAC,OAAO,CAAC;IAC3CJ,WAAW,CAACK,SAAS,CAACN,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC;;EAEhD,OAAOC,WAAW;AACtB;AAEA;MACaM,yBAAyB,GAAIC,KAA4C;EAClF,IAAIC,mBAAmB;EAEvB,IAAI,OAAOC,aAAa,KAAK,UAAU,EAAE;IACrCD,mBAAmB,GAAG,IAAIC,aAAa,CAACF,KAAK,CAACG,IAAI,EAAEH,KAAY,CAAC;GACpE,MAAM;IACHC,mBAAmB,GAAGL,QAAQ,CAACC,WAAW,CAAC,OAAO,CAAQ;IAC1DI,mBAAmB,CAACH,SAAS,CAACE,KAAK,CAACG,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IACrDF,mBAAmB,CAACG,GAAG,GAAGJ,KAAK,CAACI,GAAG;IACnCH,mBAAmB,CAACI,QAAQ,GAAGL,KAAK,CAACK,QAAQ;;EAGjD,OAAOJ,mBAAmB;AAC9B;MAEaK,kBAAkB,GAAG,CAACC,KAA8B,EAAEC,KAAyB,EAAER,KAAK,GAAG,QAAQ;EAC1G,IAAI,CAACO,KAAK,EAAE;IACR;;EAGJ,MAAME,aAAa,GAAGF,KAAK,CAACC,KAAK;EACjCD,KAAK,CAACC,KAAK,GAAGA,KAAK,IAAI,EAAE;EAEzB,MAAME,OAAO,GAAIH,KAAa,CAACI,aAAa;EAE5C,IAAID,OAAO,EAAE;IACTA,OAAO,CAACE,QAAQ,CAACH,aAAa,CAAC;;;EAInCF,KAAK,CAACM,aAAa,CAACtB,iBAAiB,CAACS,KAAK,CAAC,CAAC;AACjD;;;;"}

package/dist/esm/packages/taco/src/utils/mergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeRefs.js","sources":["../../../../../../src/utils/mergeRefs.ts"],"sourcesContent":["import React from 'react';\n\nexport function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T> {\n    return value => {\n        refs.forEach(ref => {\n            if (typeof ref === 'function') {\n                ref(value);\n            } else if (ref != null) {\n                (ref as React.MutableRefObject<T | null>).current = value;\n            }\n        });\n    };\n}\n"],"names":["mergeRefs","refs","value","forEach","ref","current"],"mappings":"SAEgBA,SAAS,CAAUC,IAA2D;EAC1F,OAAOC,KAAK;IACRD,IAAI,CAACE,OAAO,CAACC,GAAG;MACZ,IAAI,OAAOA,GAAG,KAAK,UAAU,EAAE;QAC3BA,GAAG,CAACF,KAAK,CAAC;OACb,MAAM,IAAIE,GAAG,IAAI,IAAI,EAAE;QACnBA,GAAwC,CAACC,OAAO,GAAGH,KAAK;;KAEhE,CAAC;GACL;AACL;;;;"}

package/dist/esm/packages/taco/src/utils/taillwind.js

@@ -0,0 +1,33 @@
+const getStateClasses = value => {
+  switch (value) {
+    case 'information':
+      return 'yt-blue-solid';
+    case 'warning':
+      return 'yt-yellow-solid';
+    case 'error':
+      return 'yt-red-solid';
+    case 'success':
+      return 'yt-green-solid';
+    default:
+      return 'yt-grey-solid';
+  }
+};
+const getOutlineClasses = state => {
+  switch (state) {
+    case 'information':
+    case 'primary':
+      return 'yt-blue-inverted';
+    case 'warning':
+      return 'yt-yellow-inverted';
+    case 'error':
+    case 'danger':
+      return 'yt-red-inverted';
+    case 'success':
+      return 'yt-green-inverted';
+    default:
+      return 'yt-grey-inverted';
+  }
+};
+
+export { getOutlineClasses, getStateClasses };
+//# sourceMappingURL=taillwind.js.map

package/dist/esm/packages/taco/src/utils/taillwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taillwind.js","sources":["../../../../../../src/utils/taillwind.ts"],"sourcesContent":["import { State, Appearance } from '../types';\n\nexport const getAppearanceClasses = (value: Appearance | undefined): string => {\n    switch (value) {\n        case 'primary':\n            return 'yt-blue-solid';\n\n        case 'danger':\n            return 'yt-red-solid';\n\n        case 'ghost':\n            return 'yt-blue-inverted';\n\n        case 'discrete':\n            return 'yt-transparent';\n\n        default:\n            return 'yt-grey-solid';\n    }\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'information':\n            return 'yt-blue-solid';\n\n        case 'warning':\n            return 'yt-yellow-solid';\n\n        case 'error':\n            return 'yt-red-solid';\n\n        case 'success':\n            return 'yt-green-solid';\n\n        default:\n            return 'yt-grey-solid';\n    }\n};\n\nexport const getOutlineClasses = (state: Appearance | State | undefined): string => {\n    switch (state) {\n        case 'information':\n        case 'primary':\n            return 'yt-blue-inverted';\n\n        case 'warning':\n            return 'yt-yellow-inverted';\n\n        case 'error':\n        case 'danger':\n            return 'yt-red-inverted';\n\n        case 'success':\n            return 'yt-green-inverted';\n\n        default:\n            return 'yt-grey-inverted';\n    }\n};\n"],"names":["getStateClasses","value","getOutlineClasses","state"],"mappings":"MAqBaA,eAAe,GAAIC,KAAwB;EACpD,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,eAAe;IAE1B,KAAK,SAAS;MACV,OAAO,iBAAiB;IAE5B,KAAK,OAAO;MACR,OAAO,cAAc;IAEzB,KAAK,SAAS;MACV,OAAO,gBAAgB;IAE3B;MACI,OAAO,eAAe;;AAElC;MAEaC,iBAAiB,GAAIC,KAAqC;EACnE,QAAQA,KAAK;IACT,KAAK,aAAa;IAClB,KAAK,SAAS;MACV,OAAO,kBAAkB;IAE7B,KAAK,SAAS;MACV,OAAO,oBAAoB;IAE/B,KAAK,OAAO;IACZ,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAE5B,KAAK,SAAS;MACV,OAAO,mBAAmB;IAE9B;MACI,OAAO,kBAAkB;;AAErC;;;;"}

package/dist/hooks/useBoundaryOverflowDetection.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useBoundaryOverflowDetection: (ref: React.RefObject<HTMLElement>, dependencies?: any[]) => number | null | undefined;

package/dist/hooks/useBoundingClientRectListener.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useBoundingClientRectListener: (ref: React.RefObject<HTMLElement>, dependencies?: any[] | undefined) => DOMRectReadOnly | undefined;

package/dist/hooks/useId.d.ts

@@ -0,0 +1 @@
+export declare const useId: (nativeId: string | undefined) => string;

package/dist/hooks/useIsFormControl.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useIsFormControl: (ref: React.RefObject<HTMLElement>, reset: () => void) => boolean;

package/dist/hooks/useMergedRef.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useMergedRef: <T extends HTMLElement>(ref: React.Ref<HTMLElement>) => React.RefObject<T>;

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePreviousValue<T>(value: T): T;
+export { usePreviousValue };

package/dist/index.css

@@ -158,10 +158,9 @@
         @apply flex-1 truncate p-2 text-center align-middle;
     }
 
-    [data-radix-portal][aria-hidden] [data-taco='menu'],
-    [data-radix-portal][aria-hidden] [data-taco='hanger'] {
-        display: none;
-        opacity: 0;
+    [aria-hidden] > [data-taco='menu'],
+    [aria-hidden] > [data-taco='hanger'] {
+        @apply invisible;
     }
 
     @keyframes fade-in {
@@ -394,10 +393,6 @@
     @apply mr-2 mt-2 h-5 w-5 opacity-75;
 }
 
-[data-taco='combobox'] [role='dialog'] {
-    @apply z-50;
-}
-
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
     @apply border-blue;

package/dist/index.d.ts

@@ -29,9 +29,11 @@ export * from './components/Progress/Progress';
 export * from './components/Provider/Provider';
 export * from './components/RadioGroup/RadioGroup';
 export * from './components/Select/Select';
+export * from './components/Select2/Select2';
 export * from './components/Spinner/Spinner';
 export * from './components/Table/Table';
 export * from './components/Tabs/Tabs';
+export * from './components/Tag/Tag';
 export * from './components/Textarea/Textarea';
 export * from './components/Toast/Toaster';
 export * from './components/Switch/Switch';
@@ -42,10 +44,10 @@ export * from './components/Treeview/Treeview';
 export * from './components/VisuallyHidden/VisuallyHidden';
 export * from './utils/date';
 export * from './utils/mergeRefs';
-export * from './utils/hooks/useBoundingClientRectListener';
+export * from './hooks/useBoundingClientRectListener';
+export * from './hooks/useMergedRef';
 export * from './utils/hooks/useDropTarget';
 export * from './utils/hooks/useListKeyboardNavigation';
 export * from './utils/hooks/useListScrollTo';
 export * from './utils/hooks/useOnClickOutside';
-export * from './utils/hooks/useProxiedRef';
 export * from './types';

package/dist/primitives/BubbleSelect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BubbleSelect: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => JSX.Element;

package/dist/primitives/Collection/Collection.d.ts

@@ -0,0 +1,2 @@
+export { Root } from './components/Root';
+export type { CollectionProps, CollectionRef } from './components/Root';

package/dist/primitives/Collection/Collection.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Nesting: () => JSX.Element;
+export declare const Custom: () => JSX.Element;

package/dist/primitives/Collection/components/Root.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {
+    selector: string;
+};
+export declare type CollectionRef = HTMLDivElement & {
+    setActiveIndex: (option: HTMLDivElement) => void;
+};
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    selector: string;
+} & React.RefAttributes<CollectionRef>>;
+export declare const getNextIndexFromKeycode: (event: React.KeyboardEvent, length: number, activeIndex: number | undefined) => number | undefined;
+export declare const getNextEnabledItem: (event: React.KeyboardEvent<HTMLElement>, options: NodeListOf<Element>, activeIndex: number | undefined, recurse?: boolean) => number | undefined;

package/dist/primitives/Listbox2/Listbox2.d.ts

@@ -0,0 +1,5 @@
+export * from './components/Root';
+export * from './components/Option';
+export * from './components/Group';
+export * from './components/Title';
+export * from './types';

package/dist/primitives/Listbox2/Listbox2.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Single: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;
+export declare const Group: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const GroupMultiple: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const Custom: () => JSX.Element;

package/dist/primitives/Listbox2/components/Context.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Listbox2Value } from '../types';
+export declare type Listbox2ContextProps = {
+    disabled: boolean;
+    readOnly: boolean;
+    setValue: (value: Listbox2Value) => void;
+    value?: Listbox2Value;
+};
+export declare const Listbox2Context: React.Context<Listbox2ContextProps>;
+export declare const useListbox2Context: () => Listbox2ContextProps;

package/dist/primitives/Listbox2/components/Group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type Listbox2GroupProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Group: React.ForwardRefExoticComponent<Listbox2GroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare type Listbox2GroupContextProps = {
+    setLabelledById: (id: string) => void;
+};
+export declare const Listbox2GroupContext: React.Context<Listbox2GroupContextProps>;
+export declare const useListbox2GroupContext: () => Listbox2GroupContextProps;

package/dist/primitives/Listbox2/components/Option.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Listbox2OptionValue } from '../types';
+export declare type Listbox2OptionProps = React.HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean;
+    value: Listbox2OptionValue;
+};
+export declare const Option: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | undefined;
+    value: Listbox2OptionValue;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Listbox2/components/Root.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import * as CollectionPrimitive from '../../Collection/Collection';
+import { Listbox2Value } from '../types';
+export declare type Listbox2Props = React.HTMLAttributes<HTMLDivElement> & {
+    customSelector?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    readOnly?: boolean;
+    setValue: (value: Listbox2Value) => void;
+    value?: Listbox2Value;
+};
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    customSelector?: string | undefined;
+    disabled?: boolean | undefined;
+    multiple?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    setValue: (value: Listbox2Value) => void;
+    value?: string | number | import("../types").Listbox2OptionValue[] | null | undefined;
+} & React.RefAttributes<CollectionPrimitive.CollectionRef>>;
+export declare const createListboxValueSetter: (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) => (nextValue: Listbox2Value) => void;

package/dist/primitives/Listbox2/components/Title.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare type Listbox2TitleProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Title: React.ForwardRefExoticComponent<Listbox2TitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Listbox2/types.d.ts

@@ -0,0 +1,2 @@
+export declare type Listbox2OptionValue = string | number | null;
+export declare type Listbox2Value = Listbox2OptionValue | Listbox2OptionValue[];