@economic/taco 1.25.2 → 1.26.0

package/dist/components/ButtonGroup/ButtonGroup.d.ts

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

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

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Group } from '../Group/Group.js';
+import { Menu } from '../Menu/Menu.js';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver.js';
+
+const sanitizeButtonPropsForMenuItem = props => {
+  const {
+    appearance: _1,
+    drawer: _2,
+    fluid: _3,
+    hanger: _4,
+    menu: _5,
+    popover: _6,
+    tooltip: _7,
+    ...attributes
+  } = props;
+  return attributes;
+};
+const OFFSET = 32 + 8;
+const ButtonGroup = /*#__PURE__*/React__default.forwardRef(function ButtonGroup(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const intersectedChildIndex = useIntersectionObserver(internalRef, OFFSET);
+  const children = React__default.Children.toArray(props.children);
+  const hidden = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, props, {
+    ref: internalRef
+  }), children.map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    className: cn(child.props.className, {
+      visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
+      'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
+    })
+  })), hidden.length ? /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sticky right-0 order-[99]",
+    "data-intesection-observer": "ignore",
+    icon: "more",
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hidden.map((button, index) => /*#__PURE__*/React__default.createElement(Menu.Item, Object.assign({
+      key: index
+    }, sanitizeButtonPropsForMenuItem(button.props))))))
+  }) : null);
+});
+
+export { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = props => {\n    const { appearance: _1, drawer: _2, fluid: _3, hanger: _4, menu: _5, popover: _6, tooltip: _7, ...attributes } = props;\n    return attributes;\n};\n\ntype ButtonGroupProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n    children: React.ReactElement<ButtonProps>[];\n};\n\nconst OFFSET = 32 + 8;\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    const intersectedChildIndex = useIntersectionObserver(internalRef, OFFSET);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n\n    const hidden = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n    return (\n        <Group {...props} ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hidden.length ? (\n                <IconButton\n                    className=\"sticky right-0 order-[99]\"\n                    data-intesection-observer=\"ignore\"\n                    icon=\"more\"\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {hidden.map((button, index) => (\n                                    <Menu.Item key={index} {...sanitizeButtonPropsForMenuItem(button.props)} />\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </Group>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","props","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","OFFSET","ButtonGroup","React","forwardRef","ref","internalRef","useMergedRef","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hidden","undefined","slice","Group","map","child","index","cloneElement","className","cn","visible","length","IconButton","icon","menuProps","Menu","Content","button","Item","key"],"mappings":";;;;;;;;AASA,MAAMA,8BAA8B,GAAGC,KAAK;EACxC,MAAM;IAAEC,UAAU,EAAEC,EAAE;IAAEC,MAAM,EAAEC,EAAE;IAAEC,KAAK,EAAEC,EAAE;IAAEC,MAAM,EAAEC,EAAE;IAAEC,IAAI,EAAEC,EAAE;IAAEC,OAAO,EAAEC,EAAE;IAAEC,OAAO,EAAEC,EAAE;IAAE,GAAGC;GAAY,GAAGf,KAAK;EACtH,OAAOe,UAAU;AACrB,CAAC;AAMD,MAAMC,MAAM,GAAG,EAAE,GAAG,CAAC;MAERC,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,WAAW,CAACjB,KAAuB,EAAEoB,GAA8B;EACpH,MAAMC,WAAW,GAAGC,YAAY,CAAiBF,GAAG,CAAC;EACrD,MAAMG,qBAAqB,GAAGC,uBAAuB,CAACH,WAAW,EAAEL,MAAM,CAAC;EAC1E,MAAMS,QAAQ,GAAGP,cAAK,CAACQ,QAAQ,CAACC,OAAO,CAAC3B,KAAK,CAACyB,QAAQ,CAAsC;EAE5F,MAAMG,MAAM,GAAGL,qBAAqB,KAAKM,SAAS,GAAGJ,QAAQ,CAACK,KAAK,CAACP,qBAAqB,CAAC,GAAG,EAAE;EAE/F,oBACIL,6BAACa,KAAK,oBAAK/B,KAAK;IAAEoB,GAAG,EAAEC;MAClBI,QAAQ,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBACvBhB,cAAK,CAACiB,YAAY,CAACF,KAAK,EAAE;IACtBG,SAAS,EAAEC,EAAE,CAACJ,KAAK,CAACjC,KAAK,CAACoC,SAAS,EAAE;MACjCE,OAAO,EAAEf,qBAAqB,KAAKM,SAAS,IAAIK,KAAK,GAAGX,qBAAqB;MAC7E,2CAA2C,EACvCA,qBAAqB,KAAKM,SAAS,IAAIK,KAAK,IAAIX;KACvD;GACJ,CAAC,CACL,EACAK,MAAM,CAACW,MAAM,gBACVrB,6BAACsB,UAAU;IACPJ,SAAS,EAAC,2BAA2B;iCACX,QAAQ;IAClCK,IAAI,EAAC,MAAM;IACXhC,IAAI,EAAEiC,SAAS,iBACXxB,6BAACyB,IAAI,oBAAKD,SAAS,gBACfxB,6BAACyB,IAAI,CAACC,OAAO,QACRhB,MAAM,CAACI,GAAG,CAAC,CAACa,MAAM,EAAEX,KAAK,kBACtBhB,6BAACyB,IAAI,CAACG,IAAI;MAACC,GAAG,EAAEb;OAAWnC,8BAA8B,CAAC8C,MAAM,CAAC7C,KAAK,CAAC,EAC1E,CAAC,CACS;IAGzB,GACF,IAAI,CACJ;AAEhB,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { v4 } from 'uuid';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { v4 } from 'uuid';
 import debounce from 'lodash-es/debounce';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';

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

@@ -1,9 +1,9 @@
 import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import cn from 'classnames';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root } from '@radix-ui/react-dialog';
 import { DrawerContext } from './Context.js';
 import { Content, InnerContent, Title, Footer, Close, Actions } from './components/Content.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Trigger } from './components/Trigger.js';
 
 const Outlet = /*#__PURE__*/forwardRef(function Outlet(props, ref) {

package/dist/esm/packages/taco/src/components/Drawer/components/Content.js

@@ -4,10 +4,10 @@ import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { IconButton } from '../../IconButton/IconButton.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
-import { useDraggable } from '../../../utils/hooks/useDraggable.js';
 import { Group } from '../../Group/Group.js';
 import { useCurrentMenu } from '../../Menu/Context.js';
+import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
+import { useDraggable } from '../../../utils/hooks/useDraggable.js';
 import { useCurrentDrawer } from '../Context.js';
 import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
 import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';

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

@@ -7,7 +7,7 @@ const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('flex ', 'gap-2', {
+  const className = cn('flex gap-2', {
     'flex-col ': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex ', 'gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EACpG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,YAAY,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EAChG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js

@@ -2,9 +2,9 @@ import React__default from 'react';
 import { Icon } from '../../Icon/Icon.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root, Trigger, Content } from '@radix-ui/react-popover';
 import { createCustomKeyboardEvent } from '../../../utils/input.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { SearchInput } from '../../SearchInput/SearchInput.js';
 import { Root as Root$1 } from '../../../primitives/Collection/components/Root.js';
 import '../../../primitives/Collection/Collection.js';
@@ -119,18 +119,25 @@ const filterBySearchValue = search => agreement => {
 const isCurrentAgreement = (agreement, currentAgreement) => {
   return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;
 };
-const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, isCurrentAgreement = false) => /*#__PURE__*/React__default.createElement("button", {
-  "aria-current": isCurrentAgreement ? 'true' : undefined,
-  className: "focus:yt-focus-dark w-full rounded outline-none",
-  "data-taco": "header-agreements-agreement",
-  key: `${agreement.number}_${agreement.userId}`,
-  onClick: () => onChangeAgreement(agreement),
-  onKeyDown: () => onChangeAgreement(agreement),
-  tabIndex: 0
-}, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
-  className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
-  fallbackImageSrc: fallbackImageSrc
-})));
+const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, isCurrentAgreement = false) => {
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      onChangeAgreement(agreement);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("button", {
+    "aria-current": isCurrentAgreement ? 'true' : undefined,
+    className: "focus:yt-focus-dark w-full rounded outline-none",
+    "data-taco": "header-agreements-agreement",
+    key: `${agreement.number}_${agreement.userId}`,
+    onClick: () => onChangeAgreement(agreement),
+    onKeyDown: handleKeyDown,
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
+    className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
+    fallbackImageSrc: fallbackImageSrc
+  })));
+};
 
 export { AgreementDisplay, AgreementSelector };
 //# sourceMappingURL=AgreementSelector.js.map

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { Agreement, AgreementDetails } from './Agreements/AgreementDetails';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\n\nconst Container = props => {\n    return (\n        <div\n            className=\"-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {props.children}\n        </div>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <AgreementDetails\n                {...currentAgreement}\n                className=\"h-12 [&>span>span]:hidden xl:[&>span>span]:flex \"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </Container>\n    );\n}\n\nexport type AgreementSelectorProps = AgreementDisplayProps & {\n    agreements: Agreement[];\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger className=\"xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none\">\n                    <AgreementDetails\n                        {...currentAgreement}\n                        className=\"h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]\"\n                        fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </AgreementDetails>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        className=\"focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            className=\"focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        className=\"focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => (\n    <button\n        aria-current={isCurrentAgreement ? 'true' : undefined}\n        className=\"focus:yt-focus-dark w-full rounded outline-none\"\n        data-taco=\"header-agreements-agreement\"\n        key={`${agreement.number}_${agreement.userId}`}\n        onClick={() => onChangeAgreement(agreement)}\n        onKeyDown={() => onChangeAgreement(agreement)}\n        tabIndex={0}>\n        <AgreementDetails\n            {...agreement}\n            className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n            fallbackImageSrc={fallbackImageSrc}\n        />\n    </button>\n);\n"],"names":["Container","props","React","className","children","AgreementDisplay","currentAgreement","fallbackImageSrc","AgreementDetails","AgreementSelector","agreements","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { Agreement, AgreementDetails } from './Agreements/AgreementDetails';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\n\nconst Container = props => {\n    return (\n        <div\n            className=\"-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {props.children}\n        </div>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <AgreementDetails\n                {...currentAgreement}\n                className=\"h-12 [&>span>span]:hidden xl:[&>span>span]:flex \"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </Container>\n    );\n}\n\nexport type AgreementSelectorProps = AgreementDisplayProps & {\n    agreements: Agreement[];\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger className=\"xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none\">\n                    <AgreementDetails\n                        {...currentAgreement}\n                        className=\"h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]\"\n                        fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </AgreementDetails>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        className=\"focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            className=\"focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        className=\"focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            onChangeAgreement(agreement);\n        }\n    };\n\n    return (\n        <button\n            aria-current={isCurrentAgreement ? 'true' : undefined}\n            className=\"focus:yt-focus-dark w-full rounded outline-none\"\n            data-taco=\"header-agreements-agreement\"\n            key={`${agreement.number}_${agreement.userId}`}\n            onClick={() => onChangeAgreement(agreement)}\n            onKeyDown={handleKeyDown}\n            tabIndex={0}>\n            <AgreementDetails\n                {...agreement}\n                className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </button>\n    );\n};\n"],"names":["Container","props","React","className","children","AgreementDisplay","currentAgreement","fallbackImageSrc","AgreementDetails","AgreementSelector","agreements","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js

@@ -4,7 +4,7 @@ import { IconButton } from '../../IconButton/IconButton.js';
 import { getButtonClasses } from './Button.js';
 
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
-  const className = cn(getButtonClasses(), 'ml-1 -mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden');
+  const className = cn(getButtonClasses(), 'ml-1 -mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
     className: className,
     "data-taco": "header-toggle-sidebar",

package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(getButtonClasses(), 'ml-1 -mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden');\n\n    return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAACC,gBAAgB,EAAE,EAAE,mFAAmF,CAAC;EAE7H,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}
+{"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(),\n        'ml-1 -mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]'\n    );\n\n    return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClB,yFAAyF,CAC5F;EAED,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js

@@ -2,9 +2,9 @@ import React__default from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
-import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { Menu } from '../../Menu/Menu.js';
+import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
 import { getLinkClasses } from './Link.js';
 import { Portal } from '@radix-ui/react-portal';
 

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

@@ -1,9 +1,9 @@
 import { forwardRef, createElement, useRef, memo, cloneElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { getButtonStateClasses, getInputClasses } from './util.js';
 import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
-import { useMergedRef } from '../../hooks/useMergedRef.js';
 
 const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
 const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {

package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js

@@ -1,28 +1,11 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
-import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { AnimatePresence, motion } from 'framer-motion';
 import { LayoutContext } from './Context.js';
 import { useIsLargeScreen } from '../../../hooks/useIsLargeScreen.js';
 
-const SidebarBackdrop = /*#__PURE__*/React__default.forwardRef(function SidebarBackdrop(props, ref) {
-  const internalRef = useMergedRef(ref);
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      internalRef.current.style.opacity = '1'; // Trigger the animation
-    }
-
-    return () => {
-      if (internalRef.current) {
-        internalRef.current.style.opacity = '0'; // Reset to the initial value
-      }
-    };
-  }, []);
-  return /*#__PURE__*/React__default.createElement(Backdrop, Object.assign({}, props, {
-    className: "absolute z-[1] opacity-0 transition-opacity duration-300",
-    ref: internalRef
-  }));
-});
+const SidebarBackdrop = /*#__PURE__*/motion(Backdrop);
 const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(props, ref) {
   const {
     children,
@@ -56,10 +39,21 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     };
   }, [isSmallScreen, sidebarOpen]);
   const showBackdrop = isSmallScreen && sidebarOpen === true;
+  const [ready, setReady] = React__default.useState(isSmallScreen);
   const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0', {
-    'transition-[transform] duration-300 absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,
+    'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,
+    // prevent animation when crossing the boundary from large to small screen,
+    // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
+    invisible: isSmallScreen && !ready,
+    'transition-[transform] duration-300 visible': isSmallScreen && ready,
     'border-r-2 border-black/[.08] ': !showBackdrop
   }, props.className);
+  React__default.useEffect(() => {
+    // ensure state is updated in the next cpu tick so that the animation definitely doesn't run
+    setTimeout(() => {
+      setReady(isSmallScreen);
+    }, 1);
+  }, [isSmallScreen]);
   const toggleSidebar = () => setSidebarOpen(open => !open);
   const content = typeof children === 'function' ? children({
     isLargeScreen,
@@ -74,9 +68,19 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     "aria-hidden": !isVisible,
     className: className,
     ref: ref
-  }), content), showBackdrop ? /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+  }), content), /*#__PURE__*/React__default.createElement(AnimatePresence, null, showBackdrop && /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    className: "z-[1]",
     onClick: () => setSidebarOpen(false)
-  }) : null);
+  })));
 });
 
 export { Sidebar };

package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nconst SidebarBackdrop = React.forwardRef<HTMLDivElement, any>(function SidebarBackdrop(props, ref) {\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.style.opacity = '1'; // Trigger the animation\n        }\n        return () => {\n            if (internalRef.current) {\n                internalRef.current.style.opacity = '0'; // Reset to the initial value\n            }\n        };\n    }, []);\n\n    return <Backdrop {...props} className=\"absolute z-[1] opacity-0 transition-opacity duration-300\" ref={internalRef} />;\n});\n\nexport type LayoutSidebarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0',\n        {\n            'transition-[transform] duration-300 absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            {showBackdrop ? <SidebarBackdrop onClick={() => setSidebarOpen(false)} /> : null}\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","React","forwardRef","props","ref","internalRef","useMergedRef","useEffect","current","style","opacity","Backdrop","className","Sidebar","LayoutSidebar","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","cn","toggleSidebar","open","content","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,cAAK,CAACC,UAAU,CAAsB,SAASF,eAAe,CAACG,KAAK,EAAEC,GAAG;EAC7F,MAAMC,WAAW,GAAGC,YAAY,CAAiBF,GAAG,CAAC;EAErDH,cAAK,CAACM,SAAS,CAAC;IACZ,IAAIF,WAAW,CAACG,OAAO,EAAE;MACrBH,WAAW,CAACG,OAAO,CAACC,KAAK,CAACC,OAAO,GAAG,GAAG,CAAC;;;IAE5C,OAAO;MACH,IAAIL,WAAW,CAACG,OAAO,EAAE;QACrBH,WAAW,CAACG,OAAO,CAACC,KAAK,CAACC,OAAO,GAAG,GAAG,CAAC;;KAE/C;GACJ,EAAE,EAAE,CAAC;EAEN,oBAAOT,6BAACU,QAAQ,oBAAKR,KAAK;IAAES,SAAS,EAAC,0DAA0D;IAACR,GAAG,EAAEC;KAAe;AACzH,CAAC,CAAC;MAIWQ,OAAO,gBAAGZ,cAAK,CAACC,UAAU,CAAqC,SAASY,aAAa,CAACX,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEW,QAAQ;IAAE,GAAGC;GAAY,GAAGb,KAAK;EACzC,MAAM;IAAEc,WAAW;IAAEC;GAAgB,GAAGjB,cAAK,CAACkB,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9ChB,cAAK,CAACM,SAAS,CAAC;IACZW,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBpB,cAAK,CAACM,SAAS,CAAC;IACZ,MAAMkB,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBX,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Ba,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACF,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMgB,YAAY,GAAGV,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAML,SAAS,GAAGsB,EAAE,CAChB,kDAAkD,EAClD;IACI,+EAA+E,EAAEX,aAAa;IAC9F,gCAAgC,EAAE,CAACU;GACtC,EACD9B,KAAK,CAACS,SAAS,CAClB;EAED,MAAMuB,aAAa,GAAG,MAAMjB,cAAc,CAACkB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAOtB,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEe,IAAI,EAAEnB,WAAW;IAAEkB;GAAe,CAAC,GAAGpB,QAAQ;EAEzH,IAAI,CAACsB,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIpC,yEACIA,sDAASe,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEZ,SAAS,EAAEA,SAAS;IAAER,GAAG,EAAEA;MACpGiC,OAAO,CACN,EACLJ,YAAY,gBAAGhC,6BAACD,eAAe;IAACsC,OAAO,EAAE,MAAMpB,cAAc,CAAC,KAAK;IAAK,GAAG,IAAI,CACjF;AAEX,CAAC;;;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop, BackdropProps } from '../../Backdrop/Backdrop';\n\nconst SidebarBackdrop = motion<BackdropProps>(Backdrop);\n\nexport type LayoutSidebarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <SidebarBackdrop\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"z-[1]\"\n                        onClick={() => setSidebarOpen(false)}\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","motion","Backdrop","Sidebar","React","forwardRef","LayoutSidebar","props","ref","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","useEffect","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","ready","setReady","useState","className","cn","invisible","setTimeout","toggleSidebar","open","content","AnimatePresence","initial","opacity","animate","exit","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,MAAM,CAAgBC,QAAQ,CAAC;MAI1CC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAa,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAM;IAAEI,WAAW;IAAEC;GAAgB,GAAGR,cAAK,CAACS,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9CP,cAAK,CAACe,SAAS,CAAC;IACZP,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBX,cAAK,CAACe,SAAS,CAAC;IACZ,MAAMC,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBZ,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Bc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACH,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMiB,YAAY,GAAGX,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAM,CAACkB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAACd,aAAa,CAAC;EAEvD,MAAMe,SAAS,GAAGC,EAAE,CAChB,kDAAkD,EAClD;IACI,4CAA4C,EAAEhB,aAAa;;;IAG3DiB,SAAS,EAAEjB,aAAa,IAAI,CAACY,KAAK;IAClC,6CAA6C,EAAEZ,aAAa,IAAIY,KAAK;IACrE,gCAAgC,EAAE,CAACD;GACtC,EACDrB,KAAK,CAACyB,SAAS,CAClB;EAED5B,cAAK,CAACe,SAAS,CAAC;;IAEZgB,UAAU,CAAC;MACPL,QAAQ,CAACb,aAAa,CAAC;KAC1B,EAAE,CAAC,CAAC;GACR,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMmB,aAAa,GAAG,MAAMxB,cAAc,CAACyB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAO7B,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEsB,IAAI,EAAE1B,WAAW;IAAEyB;GAAe,CAAC,GAAG3B,QAAQ;EAEzH,IAAI,CAAC6B,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIlC,yEACIA,sDAASM,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEc,SAAS,EAAEA,SAAS;IAAExB,GAAG,EAAEA;MACpG8B,OAAO,CACN,eACNlC,6BAACmC,eAAe,QACXX,YAAY,iBACTxB,6BAACJ,eAAe;IACZwC,OAAO,EAAE;MAAEC,OAAO,EAAE;KAAG;IACvBC,OAAO,EAAE;MAAED,OAAO,EAAE;KAAG;IACvBE,IAAI,EAAE;MAAEF,OAAO,EAAE;KAAG;IACpBT,SAAS,EAAC,OAAO;IACjBY,OAAO,EAAE,MAAMhC,cAAc,CAAC,KAAK;IAE1C,CACa,CACnB;AAEX,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js

@@ -1,9 +1,9 @@
 import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../Provider/Localization.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { getInputClasses } from '../Input/util.js';
-import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 import { Spinner } from '../Spinner/Spinner.js';

package/dist/esm/packages/taco/src/components/Listbox/useListbox.js

@@ -1,6 +1,6 @@
 import { useMemo, useEffect } from 'react';
-import { v4 } from 'uuid';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { v4 } from 'uuid';
 import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
 

package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js

@@ -1,7 +1,7 @@
 import { useMemo, useState, useEffect } from 'react';
 import { useLocalization } from '../Provider/Localization.js';
-import { v4 } from 'uuid';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { v4 } from 'uuid';
 import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
 

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

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useMemo, createElement } from 'react';
-import { MenuContext } from './Context.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root } from '@radix-ui/react-dropdown-menu';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { MenuContext } from './Context.js';
 import { Content } from './components/Content.js';
 import { Item } from './components/Item.js';
 import { Link } from './components/Link.js';

package/dist/esm/packages/taco/src/components/Menu/components/Content.js

@@ -1,8 +1,8 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { useCurrentMenu } from '../Context.js';
 import { Portal, Content as Content$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 const Content = /*#__PURE__*/forwardRef(function MenuContent(props, ref) {
   const internalRef = useMergedRef(ref);

package/dist/esm/packages/taco/src/components/Menu/components/Header.js

@@ -1,7 +1,7 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 const Header = /*#__PURE__*/forwardRef(function MenuHeader(props, ref) {
   const menu = useCurrentMenu();

package/dist/esm/packages/taco/src/components/Menu/components/Item.js

@@ -1,8 +1,8 @@
 import { forwardRef, createElement, useEffect } from 'react';
 import cn from 'classnames';
 import { Icon as Icon$1 } from '../../Icon/Icon.js';
-import { useCurrentMenu } from '../Context.js';
 import { Item as Item$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 const Icon = ({
   name
@@ -26,7 +26,7 @@ const useItemStyling = ({
   return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
-    'cursor-pointer hover:wcag-grey-200 text-black': !disabled,
+    'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,
     'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };

package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer hover:wcag-grey-200 text-black': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n        },\n        className\n    );\n};\n\nexport const Shortcut = props => {\n    return <span {...props} className=\"text-grey-700 ml-auto pl-3\" />;\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n    const menu = useCurrentMenu();\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon && <Icon name={icon} />}\n            {props.children}\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger","onClose","close"],"mappings":";;;;;;MAQaA,IAAI,GAAG,CAAC;EAAEC;CAAM,kBACzBC;EAAMC,SAAS,EAAC;gBACZD,cAACE,MAAa;EAACD,SAAS,EAAC,yBAAyB;EAACF,IAAI,EAAEA;EAAQ;MAI5DI,cAAc,GAAG,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEJ;CAAW;EAC5D,MAAMK,IAAI,GAAGC,cAAc,EAAE;EAE7BP,SAAe,CAAC;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ,GAAE;MAC7BC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,mBAAmB,EAAE;;GAElC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,OAAOI,EAAE,CACL,6FAA6F,EAC7F;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,QAAQ;IACtB,QAAQ,EAAE,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ;IACzB,+CAA+C,EAAE,CAACD,QAAQ;IAC1D,iDAAiD,EAAEA;GACtD,EACDH,SAAS,CACZ;AACL;MAEaS,QAAQ,GAAGC,KAAK;EACzB,oBAAOX,wCAAUW,KAAK;IAAEV,SAAS,EAAC;KAA+B;AACrE;MAUaW,IAAI,gBAAGZ,UAAgB,CAAC,SAASa,QAAQ,CAACF,KAAoB,EAAEG,GAA8B;;EACvG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChE,MAAML,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMN,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEO,KAAK,CAACP,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACW,IAAI;IAChBf,SAAS,EAAEU,KAAK,CAACV;GACpB,CAAC;EAEF,MAAMG,QAAQ,sBAAGO,KAAK,CAACP,QAAQ,6DAAIO,KAAK,CAAC,eAAe,CAAC;EAEzD,IAAIS,WAAW;;EAGf,IAAIhB,QAAQ,EAAE;IACVgB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;KAC1B;;EAGL,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAO,EAAE;MACTA,OAAO,CAACI,KAAK,CAAC;;IAGlB,IAAIV,KAAK,CAAC,eAAe,CAAC,IAAI,OAAOI,MAAM,KAAK,UAAU,EAAE;MACxDM,KAAK,CAACC,cAAc,EAAE;;GAE7B;EAED,IAAIG,MAAM,gBACNzB,cAAC0B,MAA0B,oBAAKP,UAAU;IAAElB,SAAS,EAAEA,SAAS;IAAEgB,OAAO,EAAEG,WAAW;IAAEO,QAAQ,EAAEH,YAAY;IAAEV,GAAG,EAAEA;MAChHE,IAAI,iBAAIhB,cAACF,IAAI;IAACC,IAAI,EAAEiB;IAAQ,EAC5BL,KAAK,CAACiB,QAAQ,EACdV,QAAQ,iBAAIlB,cAACU,QAAQ,QAAEQ,QAAQ,CAAY,CAEnD;EAED,IAAI,OAAOH,MAAM,KAAK,UAAU,EAAE;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEc,OAAO,EAAEJ,MAAM;MAAEK,OAAO,EAAExB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEyB;KAAO,CAAC;;EAG9D,OAAON,MAAM;AACjB,CAAC;;;;"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n        },\n        className\n    );\n};\n\nexport const Shortcut = props => {\n    return <span {...props} className=\"text-grey-700 ml-auto pl-3\" />;\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n    const menu = useCurrentMenu();\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon && <Icon name={icon} />}\n            {props.children}\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger","onClose","close"],"mappings":";;;;;;MAQaA,IAAI,GAAG,CAAC;EAAEC;CAAM,kBACzBC;EAAMC,SAAS,EAAC;gBACZD,cAACE,MAAa;EAACD,SAAS,EAAC,yBAAyB;EAACF,IAAI,EAAEA;EAAQ;MAI5DI,cAAc,GAAG,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEJ;CAAW;EAC5D,MAAMK,IAAI,GAAGC,cAAc,EAAE;EAE7BP,SAAe,CAAC;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ,GAAE;MAC7BC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,mBAAmB,EAAE;;GAElC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,OAAOI,EAAE,CACL,6FAA6F,EAC7F;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,QAAQ;IACtB,QAAQ,EAAE,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ;IACzB,gFAAgF,EAAE,CAACD,QAAQ;IAC3F,iDAAiD,EAAEA;GACtD,EACDH,SAAS,CACZ;AACL;MAEaS,QAAQ,GAAGC,KAAK;EACzB,oBAAOX,wCAAUW,KAAK;IAAEV,SAAS,EAAC;KAA+B;AACrE;MAUaW,IAAI,gBAAGZ,UAAgB,CAAC,SAASa,QAAQ,CAACF,KAAoB,EAAEG,GAA8B;;EACvG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChE,MAAML,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMN,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEO,KAAK,CAACP,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACW,IAAI;IAChBf,SAAS,EAAEU,KAAK,CAACV;GACpB,CAAC;EAEF,MAAMG,QAAQ,sBAAGO,KAAK,CAACP,QAAQ,6DAAIO,KAAK,CAAC,eAAe,CAAC;EAEzD,IAAIS,WAAW;;EAGf,IAAIhB,QAAQ,EAAE;IACVgB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;KAC1B;;EAGL,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAO,EAAE;MACTA,OAAO,CAACI,KAAK,CAAC;;IAGlB,IAAIV,KAAK,CAAC,eAAe,CAAC,IAAI,OAAOI,MAAM,KAAK,UAAU,EAAE;MACxDM,KAAK,CAACC,cAAc,EAAE;;GAE7B;EAED,IAAIG,MAAM,gBACNzB,cAAC0B,MAA0B,oBAAKP,UAAU;IAAElB,SAAS,EAAEA,SAAS;IAAEgB,OAAO,EAAEG,WAAW;IAAEO,QAAQ,EAAEH,YAAY;IAAEV,GAAG,EAAEA;MAChHE,IAAI,iBAAIhB,cAACF,IAAI;IAACC,IAAI,EAAEiB;IAAQ,EAC5BL,KAAK,CAACiB,QAAQ,EACdV,QAAQ,iBAAIlB,cAACU,QAAQ,QAAEQ,QAAQ,CAAY,CAEnD;EAED,IAAI,OAAOH,MAAM,KAAK,UAAU,EAAE;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEc,OAAO,EAAEJ,MAAM;MAAEK,OAAO,EAAExB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEyB;KAAO,CAAC;;EAG9D,OAAON,MAAM;AACjB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Link.js

@@ -1,6 +1,6 @@
 import { forwardRef, createElement } from 'react';
-import { useCurrentMenu } from '../Context.js';
 import { Item } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 import { useItemStyling, Icon } from './Item.js';
 
 const Link = /*#__PURE__*/forwardRef(function MenuLink(props, ref) {

package/dist/esm/packages/taco/src/components/Menu/components/Trigger.js

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, createElement } from 'react';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { useCurrentMenu } from '../Context.js';
 import { Trigger as Trigger$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 const Trigger = /*#__PURE__*/forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();

package/dist/esm/packages/taco/src/components/Select/useSelect.js

@@ -1,8 +1,8 @@
 import { useState, useMemo, useRef, useEffect, createElement, Fragment, cloneElement } from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../Provider/Localization.js';
-import { v4 } from 'uuid';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { v4 } from 'uuid';
 import { createCustomEvent } from '../../utils/input.js';
 import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
 

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

@@ -1,11 +1,11 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../Provider/Localization.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root, Trigger, Portal, Content } from '@radix-ui/react-popover';
 import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
-import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { isAriaDirectionKey } from '../../utils/aria.js';
 import { Root as Root$1, createListboxValueSetter } from '../../primitives/Listbox2/components/Root.js';
 import '../../primitives/Listbox2/components/Option.js';