@economic/taco 2.16.0 → 2.17.0

package/dist/components/Table3/Table3.d.ts

@@ -9,8 +9,6 @@ declare function Group(_: Table3GroupProps): null;
 declare namespace Group {
     var displayName: string;
 }
-declare type FixedForwardRef = <T, P = {}>(render: (props: P, ref: React.Ref<T>) => JSX.Element) => (props: P & React.RefAttributes<T>) => JSX.Element;
-export declare const fixedForwardRef: FixedForwardRef;
 declare type Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {
     Column: typeof Column;
     Group: typeof Group;

package/dist/components/Table3/components/columns/cell/EditingControl.d.ts

@@ -16,6 +16,6 @@ export declare type EditingControlProps<TType = unknown> = {
     cell: RTCell<TType, unknown>;
     error?: string;
     tabIndex?: number;
-    isCurrentRow?: boolean;
+    isActiveRow?: boolean;
 };
 export declare const EditingControl: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement>>;

package/dist/components/Table3/components/columns/header/Header.d.ts

@@ -9,7 +9,7 @@ export declare type HeaderProps<TType = unknown> = HeaderContext<TType, unknown>
     hasSeparator?: boolean;
 };
 export declare function Header<TType = unknown>(props: HeaderProps<TType>): JSX.Element;
-export declare type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {
+export declare type HeaderContentProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {
     align?: Table3ColumnAlignment;
     canFreeze: boolean;
     canHide: boolean;

package/dist/components/Table3/components/columns/styles.d.ts

@@ -1,5 +1,5 @@
-import { Table3ColumnAlignment, Table3FontSize } from '../../types';
+import { Table3ColumnAlignment } from '../../types';
 export declare const PRINT_MIN_COLUMN_SIZE = 20;
 export declare const getCellAlignmentClasses: (alignment?: Table3ColumnAlignment) => string;
-export declare const getFontBasedMinColumnSize: (fontSize: Table3FontSize | undefined) => 57 | 83 | 72;
+export declare const getFontBasedMinColumnSize: (fontSize?: "small" | "medium" | "large") => 57 | 83 | 72;
 export declare const getInputAppearanceClassnames: () => string;

package/dist/components/Table3/components/rows/Row.d.ts

@@ -14,11 +14,13 @@ declare type RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElemen
 };
 export declare function Row<TType = unknown>(props: RowProps<TType>): JSX.Element;
 export declare const lastCellIndex: LastCellIndex;
-export declare type MemoedRowProps<TType = unknown> = RowProps<TType> & {
+export declare type MemoedRowProps<TType = unknown> = Omit<RowProps<TType>, 'onClick'> & {
+    data: TType;
     'aria-grabbed'?: boolean;
     'data-current': boolean;
     'data-selected': boolean;
     draggable: boolean;
     index: number;
+    onClick: (event: React.MouseEvent<HTMLDivElement>, data: unknown) => void;
 };
 export {};

package/dist/components/Table3/hooks/features/useSearch.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Table3LoadAllHandler } from '../../types';
-export declare function useSearch(isEnabled: boolean, excludeUnmatchedResultsInSearch?: boolean, loadAll?: Table3LoadAllHandler): {
+export declare function useSearch(isEnabled: boolean, excludeUnmatchedResultsInSearch?: boolean): {
     isEnabled: boolean;
     isHighlightingEnabled: boolean;
     toggleHighlighting: React.Dispatch<React.SetStateAction<boolean>>;
@@ -12,7 +11,6 @@ export declare function useSearch(isEnabled: boolean, excludeUnmatchedResultsInS
     setHighlightedColumnIndexes: React.Dispatch<React.SetStateAction<number[][]>>;
     currentHighlightColumnIndex: number | undefined;
     setCurrentHighlightColumnIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
-    loadAll: Table3LoadAllHandler | undefined;
     isSearching: boolean;
     setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/dist/components/Table3/hooks/useTable.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { RowData } from '@tanstack/react-table';
-import { Table3ColumnAlignment, Table3ColumnRenderer, Table3Props, Table3ColumnHeaderMenu, Table3ColumnControlRenderer, Table3ColumnDataType, Table3ColumnClassNameHandler, Table3ColumnFooterRenderer, TableStrategy, Table3FilterComparator, Table3Settings } from '../types';
-import { useCurrentRow } from './features/useCurrentRow';
-import { usePauseHoverState } from './features/usePauseHoverState';
-import { useRowHeight } from './features/useRowHeight';
-import { useFontSize } from './features/useFontSize';
+import { Table3ColumnAlignment, Table3ColumnRenderer, Table3Props, Table3ColumnHeaderMenu, Table3ColumnControlRenderer, Table3ColumnDataType, Table3ColumnClassNameHandler, Table3ColumnFooterRenderer, TableStrategy, Table3FilterComparator, Table3Settings, Table3Ref } from '../types';
+import { useTableRowActive } from '../../../primitives/Table/useTable/features/useTableRowActive';
+import { useTableRowHeight } from '../../../primitives/Table/useTable/features/useTableRowHeight';
+import { useTableFontSize } from '../../../primitives/Table/useTable/features/useTableFontSize';
 import { useRowDrag } from './features/useRowDrag';
 import { useColumnFreezing } from './features/useColumnFreezing';
-import { useRowSelection } from './features/useRowSelection';
-import { useRowClick } from './features/useRowClick';
-import { useColumnOrdering } from './features/useColumnOrdering';
+import { useTableRowSelection } from '../../../primitives/Table/useTable/features/useTableRowSelection';
+import { useTableServerLoading } from '../../../primitives/Table/useTable/features/useTableServerLoading';
+import { useTableRowClick } from '../../../primitives/Table/useTable/features/useTableRowClick';
+import { useTableColumnOrdering } from '../../../primitives/Table/useTable/features/useTableColumnOrdering';
 import { useRowDrop } from './features/useRowDrop';
 import { useEditing } from './features/useEditing';
-import { usePrinting } from './features/usePrinting';
-import { useRowGoto } from './features/useRowGoto';
+import { useTablePrinting } from '../../../primitives/Table/useTable/features/useTablePrinting';
+import { useTableRowGoto } from '../../../primitives/Table/useTable/features/useTableRowGoto';
 import { useSearch } from './features/useSearch';
 import { useRowActions } from './features/useRowActions';
 import { Table3Validation } from './features/useValidation';
@@ -21,25 +21,26 @@ import { usePauseShortcuts } from './features/usePauseShortcuts';
 declare module '@tanstack/table-core' {
     interface TableMeta<TData extends RowData> {
         columnFreezing: ReturnType<typeof useColumnFreezing>;
-        columnOrdering: ReturnType<typeof useColumnOrdering>;
-        currentRow: ReturnType<typeof useCurrentRow>;
+        columnOrdering: ReturnType<typeof useTableColumnOrdering>;
         editing: ReturnType<typeof useEditing>;
         enableFooter: boolean;
-        fontSize: ReturnType<typeof useFontSize>;
+        fontSize: ReturnType<typeof useTableFontSize>;
         getSettings: () => Table3Settings;
-        hoverState: ReturnType<typeof usePauseHoverState>;
         isPrinting: boolean;
         isUsingServer: boolean;
-        printing: ReturnType<typeof usePrinting>;
+        printing: ReturnType<typeof useTablePrinting>;
         rowActions: ReturnType<typeof useRowActions>;
-        rowClick: ReturnType<typeof useRowClick>;
+        rowActive: ReturnType<typeof useTableRowActive>;
+        rowClick: ReturnType<typeof useTableRowClick>;
         rowDrag: ReturnType<typeof useRowDrag>;
         rowDrop: ReturnType<typeof useRowDrop>;
-        rowGoto: ReturnType<typeof useRowGoto>;
-        rowHeight: ReturnType<typeof useRowHeight>;
-        rowSelection: ReturnType<typeof useRowSelection>;
+        rowGoto: ReturnType<typeof useTableRowGoto>;
+        rowHeight: ReturnType<typeof useTableRowHeight>;
+        rowSelection: ReturnType<typeof useTableRowSelection>;
         search: ReturnType<typeof useSearch>;
+        server: ReturnType<typeof useTableServerLoading>;
         shortcutsState: ReturnType<typeof usePauseShortcuts>;
+        tableRef: React.RefObject<Table3Ref>;
         validation: Table3Validation<TData>;
     }
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -67,7 +68,7 @@ declare module '@tanstack/table-core' {
         scrollToIndex: TableStrategy['scrollToIndex'];
     }
 }
-export declare function useTable<TType = unknown>(props: Table3Props<TType>): {
+export declare function useTable<TType = unknown>(props: Table3Props<TType>, ref: React.RefObject<Table3Ref>): {
     table: any;
     length: number;
 };

package/dist/components/Table3/types.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { ColumnFilter as RTColumnFilter, ColumnOrderState, ColumnSizingState, ColumnSort as RTTableColumnSort, SortingState, VisibilityState, BuiltInSortingFn } from '@tanstack/react-table';
+import { ColumnOrderState, ColumnSizingState, SortingState, VisibilityState, BuiltInSortingFn } from '@tanstack/react-table';
 import { MenuProps } from '../Menu/Menu';
 import { MenuItemProps } from '../Menu/components/Item';
+import { TableColumnFilter, TableColumnSort, TableFilterHandler, TableFontSize, TableRef, TableRowClickHandler, TableRowGotoHandler, TableRowHeight, TableRowSelectHandler, TableServerLoadAllHandler, TableServerLoadPageHandler, TableSortHandler } from '../../primitives/Table/types';
+import { ValueOf } from '../../types';
 export declare type Table3SortDirection = 'asc' | 'desc';
 export declare type Table3SortFn<TType = unknown> = ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1) | BuiltInSortingFn | 'auto';
 export declare type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (value: TValue, row: TType) => JSX.Element | string | number | null;
@@ -22,7 +24,6 @@ export declare type Table3ColumnControlProps = {
     value: any;
 };
 export declare type Table3ColumnControlRenderer<TType = unknown> = ((props: Table3ColumnControlProps, row?: TType) => JSX.Element) | 'datepicker' | 'input' | 'switch' | 'textarea';
-declare type ValueOf<T> = T[keyof T];
 export declare type Table3ColumnProps<TType = unknown> = ValueOf<{
     [K in keyof TType]: {
         accessor: K;
@@ -60,13 +61,13 @@ export declare type Table3GroupProps = {
     children: (JSX.Element | boolean | null | undefined)[];
 };
 export declare type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';
-export declare type Table3RowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';
-export declare type Table3FontSize = 'small' | 'medium' | 'large';
-export declare type Table3RowClickHandler<TType = unknown> = (row: TType) => void;
+export declare type Table3RowHeight = TableRowHeight;
+export declare type Table3FontSize = TableFontSize;
+export declare type Table3RowClickHandler<TType = unknown> = TableRowClickHandler<TType>;
 export declare type Table3RowDragHandler<TType = unknown> = (rows: TType[], showPlaceholder: (string: any) => void, setDataTransfer: (data: string) => void) => void;
 export declare type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;
 export declare type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;
-export declare type Table3RowSelectionHandler<TType = unknown> = (rows: TType[]) => void;
+export declare type Table3RowSelectionHandler<TType = unknown> = TableRowSelectHandler<TType>;
 export declare type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;
 export declare type Table3Preset = 'display' | 'editable';
 export declare type Table3Settings = {
@@ -105,13 +106,13 @@ export declare type Table3Filter = {
     id: string | null;
     value: Table3FilterValue;
 };
-export declare type ColumnFilter = RTColumnFilter;
-export declare type Table3FilterHandler = (filters: ColumnFilter[]) => void;
-export declare type Table3LoadPageHandler = (pageIndex: number, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
-export declare type Table3LoadAllHandler = (sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
-export declare type Table3RowGotoHandler = (column: string, query: string, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<number>;
-export declare type Table3ColumnSort = RTTableColumnSort;
-export declare type Table3SortHandler = (sorting: Table3ColumnSort[]) => void;
+export declare type ColumnFilter = TableColumnFilter;
+export declare type Table3FilterHandler = TableFilterHandler;
+export declare type Table3LoadPageHandler = TableServerLoadPageHandler;
+export declare type Table3LoadAllHandler = TableServerLoadAllHandler;
+export declare type Table3RowGotoHandler = TableRowGotoHandler;
+export declare type Table3ColumnSort = TableColumnSort;
+export declare type Table3SortHandler = TableSortHandler;
 export declare type RowErrors = Record<string, string>;
 export declare type Table3CellValidationHandler<TType = unknown> = (cellValue: any, cellId: string, row: TType) => Promise<RowErrors | undefined | void>;
 export declare type Table3RowValidationHandler<TType = unknown> = (row: TType) => Promise<RowErrors | undefined | void>;
@@ -193,12 +194,8 @@ interface Table3ServerProps<TType = unknown> extends Table3CommonProps<TType> {
     pageSize?: number;
 }
 export declare type Table3Props<TType = unknown> = Table3ClientProps<TType> | Table3ServerProps<TType>;
-export declare type Table3Ref = HTMLDivElement & {
+export declare type Table3Ref = TableRef & {
     instance: {
-        resetFiltering: () => void;
-        resetRowExpansion: () => void;
-        resetRowSelection: () => void;
-        resetSorting: () => void;
         toggleEditing: (enabled: boolean | undefined) => void;
     };
 };

package/dist/components/Table3/util/scrolling.d.ts

@@ -0,0 +1,2 @@
+import { Table3Ref } from '../types';
+export declare function getTableLeftScrollDistance(tableElement: Table3Ref, cell: Element, frozenColumnIndex: number, isEditing?: boolean): number | null;

package/dist/esm/packages/taco/src/components/Banner/Banner.js

@@ -18,13 +18,13 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
     className: className,
     "data-taco": "banner",
     ref: ref
-  }, getBannerIcon(state), children, onClose ? /*#__PURE__*/createElement(IconButton, {
+  }, getBannerIcon(state), children, onClose ? ( /*#__PURE__*/createElement(IconButton, {
     "aria-label": texts.banner.close,
     className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
-  }) : null);
+  })) : null);
 });
 
 export { Banner };

package/dist/esm/packages/taco/src/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"ml-auto -mr-2 self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,gBACJL,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,GACF,IAAI,CACN;AAEd,CAAC;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"ml-auto -mr-2 self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,kBACJL,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,IACF,IAAI,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js

@@ -40,18 +40,18 @@ const Navbar = /*#__PURE__*/memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => /*#__PURE__*/createElement("option", {
+  }, months.map((month, i) => ( /*#__PURE__*/createElement("option", {
     key: month,
     value: i
-  }, month))), /*#__PURE__*/createElement("select", {
+  }, month)))), /*#__PURE__*/createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => /*#__PURE__*/createElement("option", {
+  }, years.map(year => ( /*#__PURE__*/createElement("option", {
     key: year,
     value: year
-  }, String(year))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
+  }, String(year)))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
     title: actions.previousMonth
   }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js

@@ -42,7 +42,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/createElement(IconButton
+    button: props.inline ? ( /*#__PURE__*/createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {
@@ -56,7 +56,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
-    }) : dialog ? /*#__PURE__*/createElement(IconButton, {
+    })) : dialog ? ( /*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.combobox.tooltip,
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
@@ -70,7 +70,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       ref: button.ref,
       tabIndex: -1,
       tooltip: texts.combobox.tooltip
-    }) : undefined
+    })) : undefined
   })))), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, {
     align: "start",
     onOpenAutoFocus: event => {

package/dist/esm/packages/taco/src/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 '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\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                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\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                                        aria-label={texts.combobox.tooltip}\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.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,gBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,GACF7B,MAAM,gBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,GACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
+{"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 '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\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                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\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                                        aria-label={texts.combobox.tooltip}\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.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,kBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF7B,MAAM,kBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,IACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -104,7 +104,8 @@ const useCombobox = ({
       event.preventDefault();
       return;
     }
-    if (onChange && event.target.value !== value) {
+    // event.target.value is always a string so it is important to cast value to a string before checking the equality
+    if (onChange && event.target.value !== String(value)) {
       const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);

package/dist/esm/packages/taco/src/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 { 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 { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\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<InputProps, '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 = useMergedRef<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 (listRef.current && 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.key) {\n            case 'Backspace': {\n                return;\n            }\n\n            case 'Escape': {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case 'ArrowDown':\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case 'ArrowUp':\n            case 'Home':\n            case '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.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? 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","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","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","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","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 { 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 { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\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<InputProps, '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 = useMergedRef<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 (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string before checking the equality\n        if (onChange && event.target.value !== String(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.key) {\n            case 'Backspace': {\n                return;\n            }\n\n            case 'Escape': {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case 'ArrowDown':\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case 'ArrowUp':\n            case 'Home':\n            case '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.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? 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","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","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","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js

@@ -34,20 +34,20 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      popover: props => /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, null, ({
+      popover: props => ( /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, null, ({
         close
-      }) => /*#__PURE__*/createElement("div", {
+      }) => ( /*#__PURE__*/createElement("div", {
         className: "-m-3 flex"
       }, /*#__PURE__*/createElement(Calendar, Object.assign({}, calendar, {
         onChange: (date, event) => {
           calendar.onChange(date, event);
           close();
         }
-      })), shortcuts && /*#__PURE__*/createElement("div", {
+      })), shortcuts && ( /*#__PURE__*/createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/createElement("span", {
         className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => /*#__PURE__*/createElement("li", {
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => ( /*#__PURE__*/createElement("li", {
         key: shortcut.text
       }, /*#__PURE__*/createElement("button", {
         type: "button",
@@ -57,7 +57,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           shortcut.onClick(event);
           close();
         }
-      }, shortcut.text)))), handleReset && /*#__PURE__*/createElement("button", {
+      }, shortcut.text))))), handleReset && ( /*#__PURE__*/createElement("button", {
         type: "button",
         className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
@@ -65,7 +65,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear))))),
+      }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
     })
   })));