@economic/taco 2.17.2 → 2.18.0

package/dist/components/Select2/components/Search.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { InputProps } from '../../Input/Input';
-export declare type Select2SearchProps = InputProps & {};
+export declare type Select2SearchProps = InputProps & {
+    onTabKeyPress: () => void;
+};
 export declare const Search: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "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" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "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"> & {
     highlighted?: boolean | undefined;
     invalid?: boolean | undefined;
@@ -9,4 +11,6 @@ export declare const Search: React.ForwardRefExoticComponent<Pick<React.InputHTM
 } & {
     button?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     icon?: "list" | JSX.Element | "document" | "log" | "menu" | "note" | "search" | "warning" | "time" | "filter" | "line" | "location" | "copy" | "move" | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "list-bulleted" | "list-search" | "lock-open" | "lock" | "log-out" | "market" | "match-amount" | "match-entries" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "navigation-list" | "note-follow-up" | "note-read" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+} & {
+    onTabKeyPress: () => void;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Table3/components/toolbar/Filter/filters/components/FilterValue.d.ts

@@ -3,7 +3,7 @@ import { Column as RTColumn } from '@tanstack/react-table';
 import { Table3FilterComparator } from '../../../../../types';
 export declare type FilterValueProps<TType = unknown> = {
     column?: RTColumn<TType, unknown>;
-    comparator: Table3FilterComparator;
+    comparator: Table3FilterComparator | null;
     onChange: (value: any) => void;
     value: any;
 };

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

@@ -99,7 +99,7 @@ export declare enum Table3FilterComparator {
     HasNoneOf = 13
 }
 export declare type Table3FilterValue = {
-    comparator: Table3FilterComparator;
+    comparator: Table3FilterComparator | null;
     value: any;
 };
 export declare type Table3Filter = {

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

@@ -16,6 +16,7 @@ import { Select2Context } from './components/Context.js';
 import { Option } from './components/Option.js';
 import { Group } from './components/Group.js';
 import { Title } from './components/Title.js';
+import { getNextFocussableElement } from '../../utils/dom.js';
 import { Trigger as Trigger$1 } from './components/Trigger.js';
 import { useIsFormControl } from '../../hooks/useIsFormControl.js';
 import { BubbleSelect } from '../../primitives/BubbleSelect.js';
@@ -73,6 +74,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   // align the listbox min width with the width of the input - it should never be smaller
   const dimensions = useBoundingClientRectListener(internalRef);
   // state
+  const [tabTriggeredClose, setTabTriggeredClose] = React__default.useState(false);
   const [open, setOpen] = React__default.useState(false);
   const [value, _setValue] = useControllableState({
     // uncontrolled
@@ -155,6 +157,22 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setShouldPauseHoverState(true);
     }
   };
+  const handleCloseAutoFocus = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (tabTriggeredClose) {
+      const nextFocussableElement = getNextFocussableElement(internalRef.current);
+      if (nextFocussableElement) {
+        // UX requirement: move focus to the next focussable element when tab key is pressed to select the value
+        nextFocussableElement.focus();
+        // Reset the tabTriggeredClose state
+        setTabTriggeredClose(false);
+      }
+    } else {
+      var _internalRef$current;
+      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    }
+  };
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -183,15 +201,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     asChild: true,
     align: "start",
     onOpenAutoFocus: () => {
-      var _internalRef$current;
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
-    },
-    onCloseAutoFocus: event => {
       var _internalRef$current2;
-      event.preventDefault();
-      event.stopPropagation();
       (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
     },
+    onCloseAutoFocus: handleCloseAutoFocus,
     sideOffset: 4,
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -201,7 +214,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     }
   }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(Search, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
-    ref: searchRef
+    ref: searchRef,
+    onTabKeyPress: () => setTabTriggeredClose(true)
   })) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"

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

@@ -1 +1 @@
-{"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\n//import { All } from './components/All';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    autoFocus?: boolean;\n    children: Select2Children;\n    defaultValue?: Select2Value;\n    emptyValue?: Select2OptionValue;\n    disabled?: boolean;\n    highlighted?: boolean;\n    invalid?: boolean;\n    multiple?: boolean;\n    name?: string;\n    onChange?: (value: Select2Value) => void;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    readOnly?: boolean;\n    required?: boolean;\n    tags?: boolean;\n    value?: Select2Value;\n    placeholder?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        placeholder,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}\n                        placeholder={placeholder}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={flattenedChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === flattenedChildren.length}\n                                    />\n                                ) : null*/}\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","placeholder","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","currentTarget","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current","focus","onCloseAutoFocus","stopPropagation","_internalRef$current2","sideOffset","tabIndex","style","minWidth","width","length","Search","select2","searchOrCreate","search","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}
+{"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\nimport { getNextFocussableElement } from '../../utils/dom';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    autoFocus?: boolean;\n    children: Select2Children;\n    defaultValue?: Select2Value;\n    emptyValue?: Select2OptionValue;\n    disabled?: boolean;\n    highlighted?: boolean;\n    invalid?: boolean;\n    multiple?: boolean;\n    name?: string;\n    onChange?: (value: Select2Value) => void;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    readOnly?: boolean;\n    required?: boolean;\n    tags?: boolean;\n    value?: Select2Value;\n    placeholder?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        placeholder,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [tabTriggeredClose, setTabTriggeredClose] = React.useState(false);\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const handleCloseAutoFocus = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (tabTriggeredClose) {\n            const nextFocussableElement = getNextFocussableElement(internalRef.current);\n\n            if (nextFocussableElement) {\n                // UX requirement: move focus to the next focussable element when tab key is pressed to select the value\n                nextFocussableElement.focus();\n                // Reset the tabTriggeredClose state\n                setTabTriggeredClose(false);\n            }\n        } else {\n            internalRef.current?.focus();\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}\n                        placeholder={placeholder}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                    onTabKeyPress={() => setTabTriggeredClose(true)}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","placeholder","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","tabTriggeredClose","setTabTriggeredClose","useState","open","setOpen","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","currentTarget","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","handleCloseAutoFocus","stopPropagation","nextFocussableElement","getNextFocussableElement","focus","_internalRef$current","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current2","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","length","Search","select2","searchOrCreate","search","onTabKeyPress","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/components/Search.js

@@ -8,6 +8,7 @@ import { useSelect2Context } from './Context.js';
 
 const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
   const {
+    onTabKeyPress,
     ...otherProps
   } = props;
   const {
@@ -32,7 +33,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
     // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
     if (event.key === 'Tab') {
       setOpen(false);
-      return;
+      onTabKeyPress();
     }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;

package/dist/esm/packages/taco/src/components/Select2/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n    const handleChange = event => {\n        if (validationError) {\n            setValidationError(undefined);\n        }\n\n        setSearchQuery(event.target.value);\n    };\n\n    const handleKeyDown = event => {\n        // space is an aria selection key, so we have to remove it to allow spaces\n        if (event.key === ' ') {\n            return;\n        }\n\n        // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n        if (event.key === 'Tab') {\n            setOpen(false);\n            return;\n        }\n\n        if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n            listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            return;\n        }\n    };\n\n    return (\n        <Field\n            className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n            invalid={!!validationError}\n            message={validationError?.message}>\n            <Input\n                {...otherProps}\n                aria-hidden\n                autoFocus\n                invalid={!!validationError}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                value={searchQuery}\n            />\n        </Field>\n    );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACd;;IAGJ,IAAIS,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACId,6BAAC0B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B9B,6BAAC+B,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBd,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {\n    onTabKeyPress: () => void;\n};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { onTabKeyPress, ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n    const handleChange = event => {\n        if (validationError) {\n            setValidationError(undefined);\n        }\n\n        setSearchQuery(event.target.value);\n    };\n\n    const handleKeyDown = event => {\n        // space is an aria selection key, so we have to remove it to allow spaces\n        if (event.key === ' ') {\n            return;\n        }\n\n        // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n        if (event.key === 'Tab') {\n            setOpen(false);\n            onTabKeyPress();\n        }\n\n        if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n            listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            return;\n        }\n    };\n\n    return (\n        <Field\n            className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n            invalid={!!validationError}\n            message={validationError?.message}>\n            <Input\n                {...otherProps}\n                aria-hidden\n                autoFocus\n                invalid={!!validationError}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                value={searchQuery}\n            />\n        </Field>\n    );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","onTabKeyPress","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAYaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC9C,MAAM;IAAEI,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACdP,aAAa,EAAE;;IAGnB,IAAIgB,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIf,6BAAC2B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B/B,6BAACgC,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBf,GAAG,EAAEA,GAAG;IACRc,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js

@@ -92,7 +92,7 @@ function ErrorAlert(props) {
   // Getting the row from core rows (ignoring search and filtering)
   const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4"
+    className: "mb-4 empty:hidden"
   }, errorsRowIds.length ? ( /*#__PURE__*/React__default.createElement(Alert, {
     state: "error",
     className: "mb-1"

package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorAlert.js","sources":["../../../../../../../../../src/components/Table3/components/alert/ErrorAlert.tsx"],"sourcesContent":["import { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { TableStrategy } from '../../types';\nimport React from 'react';\nimport { Alert } from '../../../Alert/Alert';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { focusableSelector } from '../../util/editing';\nimport { lastCellIndex } from '../rows/Row';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\n\nexport type ErrorAlertProps<TType = unknown> = {\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    rowIdentifier?: string;\n};\n\nexport function ErrorAlert<TType = unknown>(props: ErrorAlertProps<TType>) {\n    const { table, tableRef, scrollToIndex, rowIdentifier } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const errors = tableMeta.validation.errors;\n    const errorsRowIds = errors ? Object.keys(errors) : [];\n    const rows = table.getRowModel().rows;\n    const coreRows = table.getCoreRowModel().rows;\n    const { texts } = useLocalization();\n    const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React.useState(false);\n    const [internalRowId, setInternalRowId] = React.useState<string | null>(null);\n    const [internalRowIndex, setInternalRowIndex] = React.useState<number | null>(null);\n    const [isFiltersReset, setIsFiltersReset] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n\n    // Find and focus first invalid cell\n    const navigateToFirstInvalidCell = () => {\n        const firstInvalidCell = tableRef.current?.querySelector(\n            '[role=\"row\"][data-current=\"true\"] [role=\"cell\"][data-invalid=\"true\"]'\n        );\n        const firstInvalidElement = firstInvalidCell?.querySelector(focusableSelector);\n\n        if (firstInvalidElement) {\n            (firstInvalidElement as HTMLElement)?.focus();\n            lastCellIndex.value = firstInvalidCell?.getAttribute('data-column-index');\n        }\n    };\n\n    // Navigate to row and focus first invalid cell\n    const navigateToRow = rowIndex => {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n        lastCellIndex.value = undefined;\n\n        // Need to request animation frame here, because newly selected row is not rendered yet.\n        requestAnimationFrame(() => {\n            navigateToFirstInvalidCell();\n        });\n    };\n\n    // When internal row index is changed after click on row link, we should navigate to the row.\n    React.useEffect(() => {\n        if (internalRowIndex !== null && internalRowIndex >= 0) {\n            navigateToRow(internalRowIndex);\n        }\n    }, [internalRowIndex]);\n\n    // When filters are reset, we're able to get the real row index by rowId\n    React.useEffect(() => {\n        if (isFiltersReset) {\n            const rowIndex = rows.findIndex(row => row.id === internalRowId);\n            if (rowIndex === -1) {\n                return;\n            }\n            setInternalRowIndex(rowIndex);\n        }\n    }, [isFiltersReset]);\n\n    const onRowNumberClick = React.useCallback(\n        (rowId: string) => {\n            // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)\n            const foundIndex = rows.findIndex(row => row.id === rowId);\n            if (foundIndex === -1) {\n                setIsFiltersReset(false);\n                setResetFiltersConfirmationOpen(true);\n\n                // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset\n                setInternalRowId(rowId);\n                return;\n            }\n\n            // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,\n            // because row/cell will loose focus on next click, but row index will not change.\n            if (foundIndex === internalRowIndex) {\n                navigateToRow(foundIndex);\n            } else {\n                setInternalRowIndex(foundIndex);\n            }\n        },\n        [rows, internalRowIndex]\n    );\n\n    const onResetFiltersConfirm = () => {\n        setIsFiltersReset(true);\n    };\n\n    // Getting the row from core rows (ignoring search and filtering)\n    const getCoreRow = React.useCallback((rowId: string) => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);\n\n    return (\n        <div className=\"mb-4\">\n            {errorsRowIds.length ? (\n                <Alert state=\"error\" className=\"mb-1\">\n                    <>\n                        <b>\n                            {errorsRowIds.length} {texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)}\n                        </b>{' '}\n                    </>\n                    {rowIdentifierHeader || texts.table3.validation.index}{' '}\n                    {errorsRowIds.map((rowId: string, index) => {\n                        const coreRow = getCoreRow(rowId);\n                        return (\n                            <>\n                                <Button\n                                    key={rowId}\n                                    className=\"!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1\"\n                                    appearance=\"discrete\"\n                                    onClick={() => {\n                                        onRowNumberClick(rowId);\n                                    }}>\n                                    {/* Getting row from core rows, because 'table.getRow' will fail if row is hidden due filtering */}\n                                    {rowIdentifier ? coreRow?.original[rowIdentifier] : coreRow?.index}\n                                </Button>\n                                <span key={`${rowId}_comma`}>{index < errorsRowIds.length - 1 ? ',' : ''}</span>\n                            </>\n                        );\n                    })}\n                    {texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)}\n                </Alert>\n            ) : null}\n            <FilterResetDialog\n                open={resetFiltersConfirmationOpen}\n                onClose={() => {\n                    setResetFiltersConfirmationOpen(false);\n                }}\n                onConfirm={onResetFiltersConfirm}\n                table={table}\n            />\n        </div>\n    );\n}\n\ntype FilterResetDialogProps<TType = unknown> = {\n    open: boolean;\n    onClose: () => void;\n    onConfirm: () => void;\n    table: RTable<TType>;\n};\nfunction FilterResetDialog<TType = unknown>(props: FilterResetDialogProps<TType>) {\n    const { open, onClose, onConfirm, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n\n    const resetFilters = React.useCallback(() => {\n        tableMeta.search.setQuery('');\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n    }, [table, tableMeta.search]);\n\n    const handleConfirmClick = () => {\n        resetFilters();\n        onConfirm();\n        onClose();\n    };\n\n    return (\n        <Dialog open={open} onClose={onClose} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleConfirmClick}>\n                            {texts.table3.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["ErrorAlert","props","table","tableRef","scrollToIndex","rowIdentifier","tableMeta","options","meta","errors","validation","errorsRowIds","Object","keys","rows","getRowModel","coreRows","getCoreRowModel","texts","useLocalization","resetFiltersConfirmationOpen","setResetFiltersConfirmationOpen","React","useState","internalRowId","setInternalRowId","internalRowIndex","setInternalRowIndex","isFiltersReset","setIsFiltersReset","columns","getAllFlatColumns","column","find","id","rowIdentifierHeader","_column$columnDef$met","columnDef","header","navigateToFirstInvalidCell","firstInvalidCell","_tableRef$current","current","querySelector","firstInvalidElement","focusableSelector","focus","lastCellIndex","value","getAttribute","navigateToRow","rowIndex","rowActive","setRowActiveIndex","align","undefined","requestAnimationFrame","useEffect","findIndex","row","onRowNumberClick","useCallback","rowId","foundIndex","onResetFiltersConfirm","getCoreRow","coreRow","className","length","Alert","state","table3","alert","unsavedEntries","index","map","Button","key","appearance","onClick","original","incompleteAndHavntBeenSaved","FilterResetDialog","open","onClose","onConfirm","resetFilters","search","setQuery","resetGlobalFilter","resetColumnFilters","handleConfirmClick","Dialog","size","Content","Title","resetFiltersDialog","title","description","Footer","Group","Close","cancel","confirm"],"mappings":"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"}
+{"version":3,"file":"ErrorAlert.js","sources":["../../../../../../../../../src/components/Table3/components/alert/ErrorAlert.tsx"],"sourcesContent":["import { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { TableStrategy } from '../../types';\nimport React from 'react';\nimport { Alert } from '../../../Alert/Alert';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { focusableSelector } from '../../util/editing';\nimport { lastCellIndex } from '../rows/Row';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\n\nexport type ErrorAlertProps<TType = unknown> = {\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    rowIdentifier?: string;\n};\n\nexport function ErrorAlert<TType = unknown>(props: ErrorAlertProps<TType>) {\n    const { table, tableRef, scrollToIndex, rowIdentifier } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const errors = tableMeta.validation.errors;\n    const errorsRowIds = errors ? Object.keys(errors) : [];\n    const rows = table.getRowModel().rows;\n    const coreRows = table.getCoreRowModel().rows;\n    const { texts } = useLocalization();\n    const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React.useState(false);\n    const [internalRowId, setInternalRowId] = React.useState<string | null>(null);\n    const [internalRowIndex, setInternalRowIndex] = React.useState<number | null>(null);\n    const [isFiltersReset, setIsFiltersReset] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n\n    // Find and focus first invalid cell\n    const navigateToFirstInvalidCell = () => {\n        const firstInvalidCell = tableRef.current?.querySelector(\n            '[role=\"row\"][data-current=\"true\"] [role=\"cell\"][data-invalid=\"true\"]'\n        );\n        const firstInvalidElement = firstInvalidCell?.querySelector(focusableSelector);\n\n        if (firstInvalidElement) {\n            (firstInvalidElement as HTMLElement)?.focus();\n            lastCellIndex.value = firstInvalidCell?.getAttribute('data-column-index');\n        }\n    };\n\n    // Navigate to row and focus first invalid cell\n    const navigateToRow = rowIndex => {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n        lastCellIndex.value = undefined;\n\n        // Need to request animation frame here, because newly selected row is not rendered yet.\n        requestAnimationFrame(() => {\n            navigateToFirstInvalidCell();\n        });\n    };\n\n    // When internal row index is changed after click on row link, we should navigate to the row.\n    React.useEffect(() => {\n        if (internalRowIndex !== null && internalRowIndex >= 0) {\n            navigateToRow(internalRowIndex);\n        }\n    }, [internalRowIndex]);\n\n    // When filters are reset, we're able to get the real row index by rowId\n    React.useEffect(() => {\n        if (isFiltersReset) {\n            const rowIndex = rows.findIndex(row => row.id === internalRowId);\n            if (rowIndex === -1) {\n                return;\n            }\n            setInternalRowIndex(rowIndex);\n        }\n    }, [isFiltersReset]);\n\n    const onRowNumberClick = React.useCallback(\n        (rowId: string) => {\n            // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)\n            const foundIndex = rows.findIndex(row => row.id === rowId);\n            if (foundIndex === -1) {\n                setIsFiltersReset(false);\n                setResetFiltersConfirmationOpen(true);\n\n                // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset\n                setInternalRowId(rowId);\n                return;\n            }\n\n            // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,\n            // because row/cell will loose focus on next click, but row index will not change.\n            if (foundIndex === internalRowIndex) {\n                navigateToRow(foundIndex);\n            } else {\n                setInternalRowIndex(foundIndex);\n            }\n        },\n        [rows, internalRowIndex]\n    );\n\n    const onResetFiltersConfirm = () => {\n        setIsFiltersReset(true);\n    };\n\n    // Getting the row from core rows (ignoring search and filtering)\n    const getCoreRow = React.useCallback((rowId: string) => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);\n\n    return (\n        <div className=\"mb-4 empty:hidden\">\n            {errorsRowIds.length ? (\n                <Alert state=\"error\" className=\"mb-1\">\n                    <>\n                        <b>\n                            {errorsRowIds.length} {texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)}\n                        </b>{' '}\n                    </>\n                    {rowIdentifierHeader || texts.table3.validation.index}{' '}\n                    {errorsRowIds.map((rowId: string, index) => {\n                        const coreRow = getCoreRow(rowId);\n                        return (\n                            <>\n                                <Button\n                                    key={rowId}\n                                    className=\"!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1\"\n                                    appearance=\"discrete\"\n                                    onClick={() => {\n                                        onRowNumberClick(rowId);\n                                    }}>\n                                    {/* Getting row from core rows, because 'table.getRow' will fail if row is hidden due filtering */}\n                                    {rowIdentifier ? coreRow?.original[rowIdentifier] : coreRow?.index}\n                                </Button>\n                                <span key={`${rowId}_comma`}>{index < errorsRowIds.length - 1 ? ',' : ''}</span>\n                            </>\n                        );\n                    })}\n                    {texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)}\n                </Alert>\n            ) : null}\n            <FilterResetDialog\n                open={resetFiltersConfirmationOpen}\n                onClose={() => {\n                    setResetFiltersConfirmationOpen(false);\n                }}\n                onConfirm={onResetFiltersConfirm}\n                table={table}\n            />\n        </div>\n    );\n}\n\ntype FilterResetDialogProps<TType = unknown> = {\n    open: boolean;\n    onClose: () => void;\n    onConfirm: () => void;\n    table: RTable<TType>;\n};\nfunction FilterResetDialog<TType = unknown>(props: FilterResetDialogProps<TType>) {\n    const { open, onClose, onConfirm, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n\n    const resetFilters = React.useCallback(() => {\n        tableMeta.search.setQuery('');\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n    }, [table, tableMeta.search]);\n\n    const handleConfirmClick = () => {\n        resetFilters();\n        onConfirm();\n        onClose();\n    };\n\n    return (\n        <Dialog open={open} onClose={onClose} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleConfirmClick}>\n                            {texts.table3.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["ErrorAlert","props","table","tableRef","scrollToIndex","rowIdentifier","tableMeta","options","meta","errors","validation","errorsRowIds","Object","keys","rows","getRowModel","coreRows","getCoreRowModel","texts","useLocalization","resetFiltersConfirmationOpen","setResetFiltersConfirmationOpen","React","useState","internalRowId","setInternalRowId","internalRowIndex","setInternalRowIndex","isFiltersReset","setIsFiltersReset","columns","getAllFlatColumns","column","find","id","rowIdentifierHeader","_column$columnDef$met","columnDef","header","navigateToFirstInvalidCell","firstInvalidCell","_tableRef$current","current","querySelector","firstInvalidElement","focusableSelector","focus","lastCellIndex","value","getAttribute","navigateToRow","rowIndex","rowActive","setRowActiveIndex","align","undefined","requestAnimationFrame","useEffect","findIndex","row","onRowNumberClick","useCallback","rowId","foundIndex","onResetFiltersConfirm","getCoreRow","coreRow","className","length","Alert","state","table3","alert","unsavedEntries","index","map","Button","key","appearance","onClick","original","incompleteAndHavntBeenSaved","FilterResetDialog","open","onClose","onConfirm","resetFilters","search","setQuery","resetGlobalFilter","resetColumnFilters","handleConfirmClick","Dialog","size","Content","Title","resetFiltersDialog","title","description","Footer","Group","Close","cancel","confirm"],"mappings":";;;;;;;;;SAkBgBA,UAAUA,CAAkBC,KAA6B;;EACrE,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;GAAe,GAAGJ,KAAK;EAC/D,MAAMK,SAAS,GAAGJ,KAAK,CAACK,OAAO,CAACC,IAAwB;EACxD,MAAMC,MAAM,GAAGH,SAAS,CAACI,UAAU,CAACD,MAAM;EAC1C,MAAME,YAAY,GAAGF,MAAM,GAAGG,MAAM,CAACC,IAAI,CAACJ,MAAM,CAAC,GAAG,EAAE;EACtD,MAAMK,IAAI,GAAGZ,KAAK,CAACa,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,QAAQ,GAAGd,KAAK,CAACe,eAAe,EAAE,CAACH,IAAI;EAC7C,MAAM;IAAEI;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM,CAACC,4BAA4B,EAAEC,+BAA+B,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAC7F,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGH,cAAK,CAACC,QAAQ,CAAgB,IAAI,CAAC;EAC7E,MAAM,CAACG,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGL,cAAK,CAACC,QAAQ,CAAgB,IAAI,CAAC;EACnF,MAAM,CAACK,cAAc,EAAEC,iBAAiB,CAAC,GAAGP,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAMO,OAAO,GAAG5B,KAAK,CAAC6B,iBAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGF,OAAO,CAACG,IAAI,CAACD,MAAM,IAAIA,MAAM,CAACE,EAAE,KAAK7B,aAAa,CAAC;EAClE,MAAM8B,mBAAmB,GAAGH,MAAM,aAANA,MAAM,wBAAAI,qBAAA,GAANJ,MAAM,CAAEK,SAAS,CAAC7B,IAAI,cAAA4B,qBAAA,uBAAtBA,qBAAA,CAAwBE,MAAM;;EAG1D,MAAMC,0BAA0B,GAAGA;;IAC/B,MAAMC,gBAAgB,IAAAC,iBAAA,GAAGtC,QAAQ,CAACuC,OAAO,cAAAD,iBAAA,uBAAhBA,iBAAA,CAAkBE,aAAa,CACpD,sEAAsE,CACzE;IACD,MAAMC,mBAAmB,GAAGJ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEG,aAAa,CAACE,iBAAiB,CAAC;IAE9E,IAAID,mBAAmB,EAAE;MACpBA,mBAAmC,aAAnCA,mBAAmC,uBAAnCA,mBAAmC,CAAEE,KAAK,EAAE;MAC7CC,aAAa,CAACC,KAAK,GAAGR,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAES,YAAY,CAAC,mBAAmB,CAAC;;GAEhF;;EAGD,MAAMC,aAAa,GAAGC,QAAQ;IAC1B7C,SAAS,CAAC8C,SAAS,CAACC,iBAAiB,CAACF,QAAQ,CAAC;IAC/C/C,aAAa,CAAC+C,QAAQ,EAAE;MAAEG,KAAK,EAAE;KAAU,CAAC;IAC5CP,aAAa,CAACC,KAAK,GAAGO,SAAS;;IAG/BC,qBAAqB,CAAC;MAClBjB,0BAA0B,EAAE;KAC/B,CAAC;GACL;;EAGDjB,cAAK,CAACmC,SAAS,CAAC;IACZ,IAAI/B,gBAAgB,KAAK,IAAI,IAAIA,gBAAgB,IAAI,CAAC,EAAE;MACpDwB,aAAa,CAACxB,gBAAgB,CAAC;;GAEtC,EAAE,CAACA,gBAAgB,CAAC,CAAC;;EAGtBJ,cAAK,CAACmC,SAAS,CAAC;IACZ,IAAI7B,cAAc,EAAE;MAChB,MAAMuB,QAAQ,GAAGrC,IAAI,CAAC4C,SAAS,CAACC,GAAG,IAAIA,GAAG,CAACzB,EAAE,KAAKV,aAAa,CAAC;MAChE,IAAI2B,QAAQ,KAAK,CAAC,CAAC,EAAE;QACjB;;MAEJxB,mBAAmB,CAACwB,QAAQ,CAAC;;GAEpC,EAAE,CAACvB,cAAc,CAAC,CAAC;EAEpB,MAAMgC,gBAAgB,GAAGtC,cAAK,CAACuC,WAAW,CACrCC,KAAa;;IAEV,MAAMC,UAAU,GAAGjD,IAAI,CAAC4C,SAAS,CAACC,GAAG,IAAIA,GAAG,CAACzB,EAAE,KAAK4B,KAAK,CAAC;IAC1D,IAAIC,UAAU,KAAK,CAAC,CAAC,EAAE;MACnBlC,iBAAiB,CAAC,KAAK,CAAC;MACxBR,+BAA+B,CAAC,IAAI,CAAC;;MAGrCI,gBAAgB,CAACqC,KAAK,CAAC;MACvB;;;;IAKJ,IAAIC,UAAU,KAAKrC,gBAAgB,EAAE;MACjCwB,aAAa,CAACa,UAAU,CAAC;KAC5B,MAAM;MACHpC,mBAAmB,CAACoC,UAAU,CAAC;;GAEtC,EACD,CAACjD,IAAI,EAAEY,gBAAgB,CAAC,CAC3B;EAED,MAAMsC,qBAAqB,GAAGA;IAC1BnC,iBAAiB,CAAC,IAAI,CAAC;GAC1B;;EAGD,MAAMoC,UAAU,GAAG3C,cAAK,CAACuC,WAAW,CAAEC,KAAa,IAAK9C,QAAQ,CAACiB,IAAI,CAACiC,OAAO,IAAIA,OAAO,CAAChC,EAAE,KAAK4B,KAAK,CAAC,EAAE,CAAC9C,QAAQ,CAAC,CAAC;EAEnH,oBACIM;IAAK6C,SAAS,EAAC;KACVxD,YAAY,CAACyD,MAAM,kBAChB9C,6BAAC+C,KAAK;IAACC,KAAK,EAAC,OAAO;IAACH,SAAS,EAAC;kBAC3B7C,yEACIA,wCACKX,YAAY,CAACyD,MAAM,OAAGlD,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAAC8D,KAAK,CAACC,cAAc,CAAC9D,YAAY,CAACyD,MAAM,CAAC,CACxF,EAAC,GAAG,CACT,EACFjC,mBAAmB,IAAIjB,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAACgE,KAAK,EAAE,GAAG,EACzD/D,YAAY,CAACgE,GAAG,CAAC,CAACb,KAAa,EAAEY,KAAK;IACnC,MAAMR,OAAO,GAAGD,UAAU,CAACH,KAAK,CAAC;IACjC,oBACIxC,yEACIA,6BAACsD,MAAM;MACHC,GAAG,EAAEf,KAAK;MACVK,SAAS,EAAC,2DAA2D;MACrEW,UAAU,EAAC,UAAU;MACrBC,OAAO,EAAEA;QACLnB,gBAAgB,CAACE,KAAK,CAAC;;OAG1BzD,aAAa,GAAG6D,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEc,QAAQ,CAAC3E,aAAa,CAAC,GAAG6D,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEQ,KAAK,CAC7D,eACTpD;MAAMuD,GAAG,KAAKf;OAAgBY,KAAK,GAAG/D,YAAY,CAACyD,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAQ,CACjF;GAEV,CAAC,EACDlD,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAAC8D,KAAK,CAACS,2BAA2B,CAACtE,YAAY,CAACyD,MAAM,CAAC,CAC3E,IACR,IAAI,eACR9C,6BAAC4D,iBAAiB;IACdC,IAAI,EAAE/D,4BAA4B;IAClCgE,OAAO,EAAEA;MACL/D,+BAA+B,CAAC,KAAK,CAAC;KACzC;IACDgE,SAAS,EAAErB,qBAAqB;IAChC9D,KAAK,EAAEA;IACT,CACA;AAEd;AAQA,SAASgF,iBAAiBA,CAAkBjF,KAAoC;EAC5E,MAAM;IAAEkF,IAAI;IAAEC,OAAO;IAAEC,SAAS;IAAEnF;GAAO,GAAGD,KAAK;EACjD,MAAMK,SAAS,GAAGJ,KAAK,CAACK,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMmE,YAAY,GAAGhE,cAAK,CAACuC,WAAW,CAAC;IACnCvD,SAAS,CAACiF,MAAM,CAACC,QAAQ,CAAC,EAAE,CAAC;IAC7BtF,KAAK,CAACuF,iBAAiB,EAAE;IACzBvF,KAAK,CAACwF,kBAAkB,EAAE;GAC7B,EAAE,CAACxF,KAAK,EAAEI,SAAS,CAACiF,MAAM,CAAC,CAAC;EAE7B,MAAMI,kBAAkB,GAAGA;IACvBL,YAAY,EAAE;IACdD,SAAS,EAAE;IACXD,OAAO,EAAE;GACZ;EAED,oBACI9D,6BAACsE,MAAM;IAACT,IAAI,EAAEA,IAAI;IAAEC,OAAO,EAAEA,OAAO;IAAES,IAAI,EAAC;kBACvCvE,6BAACsE,MAAM,CAACE,OAAO;kBAAY;kBACvBxE,6BAACsE,MAAM,CAACG,KAAK,QAAE7E,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAACsF,kBAAkB,CAACC,KAAK,CAAgB,eAE/E3E,wCAAIJ,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAACsF,kBAAkB,CAACE,WAAW,CAAK,eAE/D5E,6BAACsE,MAAM,CAACO,MAAM,qBACV7E,6BAAC8E,KAAK,qBACF9E,6BAACsE,MAAM,CAACS,KAAK,qBACT/E,6BAACsD,MAAM,QAAE1D,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAACsF,kBAAkB,CAACM,MAAM,CAAU,CACzD,eACfhF,6BAACsD,MAAM;IAACE,UAAU,EAAC,SAAS;IAACC,OAAO,EAAEY;KACjCzE,KAAK,CAACqD,MAAM,CAAC7D,UAAU,CAACsF,kBAAkB,CAACO,OAAO,CAC9C,CACL,CACI,CACH,CACZ;AAEjB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js

@@ -27,9 +27,19 @@ function Filter(props) {
     }
   } = filter;
   const handleChangeColumn = columnId => {
+    var _columnPrev$columnDef, _columnNext$columnDef;
+    const columnPrev = allColumns.find(column => column.id === id);
+    const columnNext = allColumns.find(column => column.id === columnId);
+    // UX requirement: if old column data type is the same as next column data type,
+    // then we applying the same filter value for the next column,
+    // but when data types are different, we're reseting comparator ans value for the next column
+    const value = (columnPrev === null || columnPrev === void 0 ? void 0 : (_columnPrev$columnDef = columnPrev.columnDef.meta) === null || _columnPrev$columnDef === void 0 ? void 0 : _columnPrev$columnDef.dataType) === (columnNext === null || columnNext === void 0 ? void 0 : (_columnNext$columnDef = columnNext.columnDef.meta) === null || _columnNext$columnDef === void 0 ? void 0 : _columnNext$columnDef.dataType) ? filter.value : {
+      comparator: null,
+      value: null
+    };
     handleChange(id, {
       id: columnId,
-      value: filter.value
+      value
     });
   };
   const handleChangeComparator = comparator => {

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { Table3Filter, Table3FilterComparator } from '../../../../../types';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: RTColumn<TType, unknown>[];\n    filter: Table3Filter;\n    filters: Table3Filter[];\n    position: number;\n    onChange: (id: string | null, value: Table3Filter) => void;\n    onRemove: (columnId: string | null) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id) as RTColumn<TType, unknown>;\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string | null) => {\n        handleChange(id, { id: columnId, value: filter.value });\n    };\n\n    const handleChangeComparator = (comparator: Table3FilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(id, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(id, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove(id);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn allColumns={allColumns} filters={filters} onChange={handleChangeColumn as any} value={id} />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} />\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","value","comparator","handleChangeColumn","columnId","handleChangeComparator","nextValue","Table3FilterComparator","IsEmpty","IsNotEmpty","undefined","handleChangeValue","handleRemove","React","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":";;;;;;;;SAkBgBA,MAAMA,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,UAAU;IAAEC,MAAM;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,QAAQ;IAAEC;GAAU,GAAGP,KAAK;EACzF,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,MAAM,GAAGT,UAAU,CAACU,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,KAAKX,MAAM,CAACW,EAAE,CAA6B;EAEnF,MAAM;IACFA,EAAE;IACFC,KAAK,EAAE;MAAEC,UAAU;MAAED;;GACxB,GAAGZ,MAAM;EAEV,MAAMc,kBAAkB,GAAIC,QAAuB;IAC/CZ,YAAY,CAACQ,EAAE,EAAE;MAAEA,EAAE,EAAEI,QAAQ;MAAEH,KAAK,EAAEZ,MAAM,CAACY;KAAO,CAAC;GAC1D;EAED,MAAMI,sBAAsB,GAAIH,UAAkC;IAC9D,IAAII,SAAS,GAAGjB,MAAM,CAACY,KAAK,CAACA,KAAK;IAElC,IAAIC,UAAU,KAAKK,sBAAsB,CAACC,OAAO,IAAIN,UAAU,KAAKK,sBAAsB,CAACE,UAAU,EAAE;MACnGH,SAAS,GAAGI,SAAS;;IAEzBlB,YAAY,CAACQ,EAAE,EAAE;MAAEA,EAAE;MAAEC,KAAK,EAAE;QAAEC,UAAU;QAAED,KAAK,EAAEK;;KAAa,CAAC;GACpE;EAED,MAAMK,iBAAiB,GAAIV,KAAU;IACjCT,YAAY,CAACQ,EAAE,EAAE;MAAEA,EAAE;MAAEC,KAAK,EAAE;QAAE,GAAGZ,MAAM,CAACY,KAAK;QAAEA;;KAAS,CAAC;GAC9D;EAED,MAAMW,YAAY,GAAGA,MAAMnB,QAAQ,CAACO,EAAE,CAAC;EAEvC,oBACIa;IAAKC,SAAS,EAAC;kBACXD;IAAKC,SAAS,EAAC;KACVpB,QAAQ,GAAG,CAAC,GAAGC,KAAK,CAACoB,MAAM,CAACzB,OAAO,CAAC0B,UAAU,CAACC,GAAG,GAAGtB,KAAK,CAACoB,MAAM,CAACzB,OAAO,CAAC0B,UAAU,CAACE,KAAK,CACzF,eACNL,6BAACM,YAAY;IAAC/B,UAAU,EAAEA,UAAU;IAAEE,OAAO,EAAEA,OAAO;IAAEC,QAAQ,EAAEY,kBAAyB;IAAEF,KAAK,EAAED;IAAM,eAC1Ga,6BAACO,gBAAgB;IAACvB,MAAM,EAAEA,MAAM;IAAEN,QAAQ,EAAEc,sBAA6B;IAAEJ,KAAK,EAAEC;IAAc,eAChGW,6BAACQ,WAAW;IAACxB,MAAM,EAAEA,MAAM;IAAEK,UAAU,EAAEA,UAAU;IAAEX,QAAQ,EAAEoB,iBAAiB;IAAEV,KAAK,EAAEA;IAAS,eAClGY,6BAACS,UAAU;IAACC,UAAU,EAAC,UAAU;IAACT,SAAS,EAAC,SAAS;IAACU,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEb;IAAgB,CAC1F;AAEd;;;;"}
+{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { Table3Filter, Table3FilterComparator } from '../../../../../types';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: RTColumn<TType, unknown>[];\n    filter: Table3Filter;\n    filters: Table3Filter[];\n    position: number;\n    onChange: (id: string | null, value: Table3Filter) => void;\n    onRemove: (columnId: string | null) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id) as RTColumn<TType, unknown>;\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string | null) => {\n        const columnPrev = allColumns.find(column => column.id === id);\n        const columnNext = allColumns.find(column => column.id === columnId);\n        // UX requirement: if old column data type is the same as next column data type,\n        // then we applying the same filter value for the next column,\n        // but when data types are different, we're reseting comparator ans value for the next column\n        const value =\n            columnPrev?.columnDef.meta?.dataType === columnNext?.columnDef.meta?.dataType\n                ? filter.value\n                : { comparator: null, value: null };\n\n        handleChange(id, { id: columnId, value });\n    };\n\n    const handleChangeComparator = (comparator: Table3FilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(id, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(id, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove(id);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn allColumns={allColumns} filters={filters} onChange={handleChangeColumn as any} value={id} />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} />\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","value","comparator","handleChangeColumn","columnId","columnPrev","columnNext","_columnPrev$columnDef","columnDef","meta","dataType","_columnNext$columnDef","handleChangeComparator","nextValue","Table3FilterComparator","IsEmpty","IsNotEmpty","undefined","handleChangeValue","handleRemove","React","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js

@@ -60,7 +60,6 @@ function FilterValue(props) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(Control, {
-    comparator: comparator,
     column: column,
     onChange: handleChange,
     value: value
@@ -70,7 +69,6 @@ function Control(props) {
   var _column$columnDef$met2, _column$columnDef$met3;
   const {
     column,
-    comparator,
     onChange,
     value,
     ...attributes

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../Input/Input';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { Datepicker } from '../../../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../../../Switch/Switch';\nimport { getInputAppearanceClassnames } from '../../../../columns/styles';\nimport cn from 'classnames';\nimport { useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterValueProps<TType = unknown> = {\n    column?: RTColumn<TType, unknown>;\n    comparator: Table3FilterComparator;\n    onChange: (value: any) => void;\n    value: any;\n};\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n    const { column, comparator, onChange: handleChange, value } = props;\n    const { texts } = useLocalization();\n    if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n        return null;\n    }\n\n    if (comparator === Table3FilterComparator.IsBetween) {\n        const fromValue = Array.isArray(value) ? value[0] : undefined;\n        const toValue = Array.isArray(value) ? value[1] : undefined;\n\n        if (column === undefined) {\n            return (\n                <Input\n                    aria-label={texts.table3.filters.emptyFilter.value}\n                    className=\"flex-grow\"\n                    disabled\n                    value={texts.table3.filters.emptyFilter.value}\n                />\n            );\n        }\n\n        if (column.columnDef.meta?.dataType === 'datetime') {\n            return (\n                <div className=\"flex flex-grow items-center gap-2\">\n                    <Control column={column} onChange={value => handleChange([value, toValue])} value={fromValue} />\n                    <Control column={column} onChange={value => handleChange([fromValue, value])} value={toValue} />\n                </div>\n            );\n        }\n\n        return (\n            <div className=\"flex flex-grow items-center gap-2\">\n                <Control\n                    column={column}\n                    onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n                    placeholder=\"from\"\n                    value={fromValue ?? ''}\n                />\n                <Control\n                    column={column}\n                    onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n                    placeholder=\"to\"\n                    value={toValue ?? ''}\n                />\n            </div>\n        );\n    }\n    return <Control comparator={comparator} column={column} onChange={handleChange} value={value} />;\n}\n\nfunction Control(props) {\n    const { column, comparator, onChange, value, ...attributes } = props;\n    const controlRenderer = column?.columnDef.meta?.control;\n    const dataType = column?.columnDef.meta?.dataType;\n\n    useEffect(() => {\n        if (controlRenderer === 'switch') {\n            onChange(false);\n        }\n    }, []);\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer({\n            ...attributes,\n            setValue: value => onChange(value),\n            value,\n        });\n    } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n        return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n    } else if (controlRenderer === 'switch') {\n        return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n    } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n        return (\n            <Input\n                {...attributes}\n                className={cn(getInputAppearanceClassnames(), 'flex-grow')}\n                type=\"number\"\n                onChange={event => onChange(event.target.valueAsNumber)}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            disabled={!column}\n            {...attributes}\n            className=\"flex-grow\"\n            onChange={event => onChange(event.target.value)}\n            value={String(value ?? '')}\n        />\n    );\n}\n"],"names":["FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","Table3FilterComparator","IsEmpty","IsNotEmpty","IsBetween","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table3","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","setValue","Datepicker","event","detail","Switch","checked","Boolean","cn","getInputAppearanceClassnames","type","target","valueAsNumber","String"],"mappings":"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"}
+{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../Input/Input';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { Datepicker } from '../../../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../../../Switch/Switch';\nimport { getInputAppearanceClassnames } from '../../../../columns/styles';\nimport cn from 'classnames';\nimport { useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterValueProps<TType = unknown> = {\n    column?: RTColumn<TType, unknown>;\n    comparator: Table3FilterComparator | null;\n    onChange: (value: any) => void;\n    value: any;\n};\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n    const { column, comparator, onChange: handleChange, value } = props;\n    const { texts } = useLocalization();\n    if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n        return null;\n    }\n\n    if (comparator === Table3FilterComparator.IsBetween) {\n        const fromValue = Array.isArray(value) ? value[0] : undefined;\n        const toValue = Array.isArray(value) ? value[1] : undefined;\n\n        if (column === undefined) {\n            return (\n                <Input\n                    aria-label={texts.table3.filters.emptyFilter.value}\n                    className=\"flex-grow\"\n                    disabled\n                    value={texts.table3.filters.emptyFilter.value}\n                />\n            );\n        }\n\n        if (column.columnDef.meta?.dataType === 'datetime') {\n            return (\n                <div className=\"flex flex-grow items-center gap-2\">\n                    <Control column={column} onChange={value => handleChange([value, toValue])} value={fromValue} />\n                    <Control column={column} onChange={value => handleChange([fromValue, value])} value={toValue} />\n                </div>\n            );\n        }\n\n        return (\n            <div className=\"flex flex-grow items-center gap-2\">\n                <Control\n                    column={column}\n                    onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n                    placeholder=\"from\"\n                    value={fromValue ?? ''}\n                />\n                <Control\n                    column={column}\n                    onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n                    placeholder=\"to\"\n                    value={toValue ?? ''}\n                />\n            </div>\n        );\n    }\n    return <Control column={column} onChange={handleChange} value={value} />;\n}\n\nfunction Control(props) {\n    const { column, onChange, value, ...attributes } = props;\n    const controlRenderer = column?.columnDef.meta?.control;\n    const dataType = column?.columnDef.meta?.dataType;\n\n    useEffect(() => {\n        if (controlRenderer === 'switch') {\n            onChange(false);\n        }\n    }, []);\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer({\n            ...attributes,\n            setValue: value => onChange(value),\n            value,\n        });\n    } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n        return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n    } else if (controlRenderer === 'switch') {\n        return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n    } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n        return (\n            <Input\n                {...attributes}\n                className={cn(getInputAppearanceClassnames(), 'flex-grow')}\n                type=\"number\"\n                onChange={event => onChange(event.target.valueAsNumber)}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            disabled={!column}\n            {...attributes}\n            className=\"flex-grow\"\n            onChange={event => onChange(event.target.value)}\n            value={String(value ?? '')}\n        />\n    );\n}\n"],"names":["FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","Table3FilterComparator","IsEmpty","IsNotEmpty","IsBetween","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table3","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","setValue","Datepicker","event","detail","Switch","checked","Boolean","cn","getInputAppearanceClassnames","type","target","valueAsNumber","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js

@@ -81,11 +81,14 @@ function Search(props) {
     setQuery(String(query !== null && query !== void 0 ? query : ''));
   };
   const handleClear = () => {
-    const [rowIndex = null, cellIndex = null] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex || 0];
+    var _tableMeta$search$cur, _tableMeta$search$hig;
+    const highlightedColumnIndex = (_tableMeta$search$cur = tableMeta.search.currentHighlightColumnIndex) !== null && _tableMeta$search$cur !== void 0 ? _tableMeta$search$cur : 0;
+    const highlightedCell = (_tableMeta$search$hig = tableMeta.search.highlightedColumnIndexes[highlightedColumnIndex]) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : [];
+    const [rowIndex = null, columnIndex = null] = highlightedCell;
     const rows = table.getRowModel().rows;
     tableMeta.search.setQuery('');
     // Need to save row id and cell index, to be able to find the row in the table with updated indexes, after global filter will be reset.
-    lastCellIndex.value = String(cellIndex);
+    lastCellIndex.value = String(columnIndex);
     if (rowIndex !== null) {
       var _rows$rowIndex;
       const rowId = ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.id) || null;