@economic/taco 0.0.26-alpha.9 → 0.0.28-alpha.5

package/dist/components/Combobox/useCombobox.d.ts

@@ -15,5 +15,5 @@ declare type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
         onOpenChange: (open: boolean) => void;
     };
 };
-export declare const useCombobox: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data: unfilteredData, defaultValue, disabled, inline, loading: __, onChange, onClick, onKeyDown, onSearch, readOnly, value, ...props }: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>) => useCombobox;
+export declare const useCombobox: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data: unfilteredData, defaultValue, disabled, id: nativeId, inline, loading: __, onChange, onClick, onKeyDown, onSearch, readOnly, value, ...props }: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>) => useCombobox;
 export {};

package/dist/components/Datepicker/Datepicker.d.ts

@@ -29,7 +29,7 @@ export declare type DatepickerProps = Omit<InputProps, 'value'> & {
      */
     value?: Date;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "button" | "icon" | "highlighted" | "invalid"> & {
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "button" | "icon" | "highlighted" | "state"> & {
     /** [Calendar](component:calendar) component associated with the DatePicker */
     calendar?: CalendarProps | undefined;
     /** List of shortcuts */

package/dist/components/Field/Field.d.ts

@@ -1,18 +1,26 @@
 import * as React from 'react';
 import './Field.css';
-export declare type FieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children: JSX.Element;
+export declare type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /** Content of the field */
+    children: React.ReactNode;
+    /**	Changes the style to indicate the element is disabled */
     disabled?: boolean;
     invalid?: boolean;
-    label?: string | JSX.Element;
-    message?: string | JSX.Element;
-    required?: boolean;
+    /**
+     * Text displayed below the children of Field.
+     * Should be a short text that indicates feedback for user.
+     */
+    message?: string;
 };
-export declare const Field: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    children: JSX.Element;
+export declare const Field: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /** Content of the field */
+    children: React.ReactNode;
+    /**	Changes the style to indicate the element is disabled */
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    label?: string | JSX.Element | undefined;
-    message?: string | JSX.Element | undefined;
-    required?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Text displayed below the children of Field.
+     * Should be a short text that indicates feedback for user.
+     */
+    message?: string | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/Menu/Menu.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Appearance } from '../..';
 export declare type MenuProps = {
+    /** Appearance will change the style of the button */
+    appearance?: Appearance;
     children: React.ReactNode;
     id?: string;
     /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */

package/dist/components/SearchInput/SearchInput.d.ts

@@ -10,7 +10,7 @@ export declare type SearchInputProps = Omit<InputProps, 'icon'> & {
     /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */
     onSearch?: (value: string | number | readonly string[] | undefined) => void;
 };
-export declare const SearchInput: React.ForwardRefExoticComponent<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "button" | "highlighted" | "invalid"> & {
+export declare const SearchInput: React.ForwardRefExoticComponent<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "button" | "highlighted" | "state"> & {
     /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */
     onSearch?: ((value: string | number | readonly string[] | undefined) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Button/Button.js

@@ -4,13 +4,12 @@ import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
 
-var _excluded = ["appearance", "fluid"];
+var _excluded = ["fluid"];
 var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
-  var appearance = props.appearance,
-      fluid = props.fluid,
+  var fluid = props.fluid,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
+  var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    let children = otherProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof otherProps.menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;;;IAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,MAAIK,QAAQ,GAAGN,UAAU,CAACM,QAA1B;;AAGA,MAAI,OAAON,UAAU,CAACO,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,cAAMb,UAAN;AAAkBM,IAAAA,QAAQ,EAARA,QAAlB;AAA4B,iBAAa;AAAzC,MAAqDL,SAArD,EAAgEJ,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    let children = otherProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof otherProps.menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;;;IAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,KAAR,GAAiCF,KAAjC,CAAQE,KAAR;AAAA,MAAkBC,UAAlB,iCAAiCH,KAAjC;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCR,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUP;AAHd,GAJgB,EAShBF,KAAK,CAACI,SATU,CAApB;AAYA,MAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;AAGA,MAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,cAAMd,UAAN;AAAkBO,IAAAA,QAAQ,EAARA,QAAlB;AAA4B,iBAAa;AAAzC,MAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}

package/dist/esm/components/Button/util.js

@@ -5,7 +5,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 
 var _excluded = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';
 };
 var getAppearanceClasses = function getAppearanceClasses(value, icon) {
   if (icon === void 0) {
@@ -54,7 +54,8 @@ var createButton = function createButton(props, className, ref) {
     });
   } else if (typeof menu === 'function') {
     button = menu({
-      trigger: button
+      trigger: button,
+      appearance: otherProps.appearance
     });
   } else if (typeof popover === 'function') {
     button = popover({

package/dist/esm/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButton = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    if (tooltip) {\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","anchor","Tooltip","title"],"mappings":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,mJAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAEJ,SAAK,QAAL;AACI;;AAEJ,SAAK,OAAL;AACI;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AACH;;AAED;AACH;;AAED;AACI;AAnBR;AAqBH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,KAAlE;;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOH,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAES,MAAAA,MAAM,EAAEJ;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACI,OAAD;AAASC,MAAAA,KAAK,EAAER;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButton = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button, appearance: otherProps.appearance });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    if (tooltip) {\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,kHAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAEJ,SAAK,QAAL;AACI;;AAEJ,SAAK,OAAL;AACI;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AACH;;AAED;AACH;;AAED;AACI;AAnBR;AAqBH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,KAAlE;;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -14,13 +14,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn('h-5 w-5 border rounded text-sm', {
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
-  }, props.className);
+  });
   var handleChange;
 
   if (onChange) {
@@ -30,9 +30,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   }
 
   var element = createElement(Root, Object.assign({}, otherProps, {
+    "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
-    "data-taco": "checkbox",
     onCheckedChange: handleChange,
     ref: ref
   }), createElement(Indicator, {
@@ -45,8 +45,8 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
-    });
-    element = createElement("label", {
+    }, props.className);
+    return createElement("label", {
       className: labelClassName
     }, element, label);
   }

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'h-5 w-5 border rounded text-sm',\n        {\n            'mr-2': !!label,\n            'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n            'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n        },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            data-taco=\"checkbox\"\n            onCheckedChange={handleChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        element = (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAIG,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAIW,OAAO,GACPd,aAAA,CAACe,IAAD,oBACQN;AACJN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;iBACD;AACVM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIAE,IAAAA,OAAO,GACHd,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\n        'mr-2': !!label,\n        'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n        'border-grey text-blue-light cursor-not-allowed': props.disabled,\n        'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n        'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n    });\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn(\n            'flex items-center cursor-pointer',\n            {\n                'cursor-not-allowed text-grey-dark': props.disabled,\n            },\n            props.className\n        );\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiF;AACjG,YAAQ,CAAC,CAACJ,KADuF;AAEjG,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFc;AAGjG,sDAAkDL,KAAK,CAACW,QAHyC;AAIjG,oEAAgER,WAJiC;AAKjG,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALoB,GAAjF,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}

package/dist/esm/components/Combobox/Combobox.js

@@ -49,17 +49,22 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
       onClick: function onClick() {
-        return popover.onOpenChange(true);
+        var _input$ref$current;
+
+        popover.onOpenChange(true);
+        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
     }) : dialog ? createElement(IconButton, {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: function onFocus() {
-        var _input$ref$current;
+      onFocus: function onFocus(event) {
+        var _input$ref$current2;
 
-        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+        // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
+        event.preventDefault();
+        (_input$ref$current2 = input.ref.current) === null || _input$ref$current2 === void 0 ? void 0 : _input$ref$current2.focus();
       },
       ref: button.ref,
       tabIndex: -1,
@@ -72,7 +77,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     },
     sideOffset: 4
   }, createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    className: cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },

package/dist/esm/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => popover.onOpenChange(true)}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={() => {\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}\n                >\n                    <ScrollableList\n                        {...list}\n                        className={cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","tabIndex","disabled","readOnly","onFocus","current","focus","tooltip","undefined","align","onOpenAutoFocus","event","preventDefault","sideOffset","ScrollableList","minWidth","width"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}\n                >\n                    <ScrollableList\n                        {...list}\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","disabled","readOnly","onFocus","event","preventDefault","tooltip","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":"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"}

package/dist/esm/components/Combobox/useCombobox.js

@@ -8,7 +8,7 @@ import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
 import { useFlattenedData, filterData, getIndexFromValue, setInputValueByRef, findByValue, sanitizeItem, getOptionParents } from '../Listbox/util.js';
 
-var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
 var debouncer = /*#__PURE__*/debounce(function (f) {
   return f();
 }, 200);

package/dist/esm/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('down'):\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case keycode('up'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","onSearch","readOnly","props","inputRef","useProxiedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('down'):\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case keycode('up'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","onSearch","readOnly","props","inputRef","useProxiedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Field/Field.js

@@ -1,53 +1,31 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, useRef, createElement, cloneElement } from 'react';
+import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { v4 } from 'uuid';
 
-var _excluded = ["children", "disabled", "invalid", "label", "message", "required"];
+var _excluded = ["disabled", "children", "invalid", "message"];
 var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  var _children$props$id, _children$props, _children$props$inval, _children$props2, _children$props$requi, _children$props3, _children$props4;
-
-  var children = props.children,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      label = props.label,
+  var disabled = props.disabled,
+      children = props.children,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
       message = props.message,
-      required = props.required,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var idRef = useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : v4());
-  var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
-  var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
-  var className = cn('flex flex-col', {
-    'pt-5': !label,
-    'mb-4': !message
-  }, props.className);
-  var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
+  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
-  });
-  var messageClassName = cn('text-xs leading-normal truncate flex-none', {
-    'text-grey-darkest': !isInvalid,
-    'text-red': isInvalid,
+  }, props.className);
+  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-darkest': !invalid,
+    'text-red': invalid,
     'opacity-50': disabled
-  });
-
-  if (!label && !(children !== null && children !== void 0 && children.props['aria-label'])) {
-    console.warn('TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.');
-  }
-
-  return createElement("div", Object.assign({}, otherProps, {
+  }, props.className);
+  return createElement("label", Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "field",
+    "data-taco": "label",
     ref: ref
-  }), label && createElement("label", {
-    htmlFor: idRef.current,
-    className: labelClassName,
-    "data-taco": "label"
-  }, label, isRequired ? '*' : ''), idRef.current !== (children === null || children === void 0 ? void 0 : (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.id) ? cloneElement(children, {
-    id: idRef.current
-  }) : children, message && createElement("span", {
+  }), children, message && createElement("span", {
     className: messageClassName,
-    role: isInvalid ? 'alert' : undefined
+    role: invalid ? 'alert' : undefined
   }, message));
 });