@economic/taco 1.24.0 → 1.25.1

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

@@ -0,0 +1,102 @@
+import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
+import cn from 'classnames';
+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) {
+  const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "drawer-outlet",
+    ref: ref
+  }));
+});
+// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.
+let drawerStack;
+const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
+  const {
+    open: openProp,
+    defaultOpen: defaultOpenProp,
+    // if onChange is not provided, then replace it with empty function, needed for useControllableState
+    onChange = () => {
+      // do nothing.
+    },
+    variant = 'embedded',
+    className,
+    closeOnEscape = true,
+    onResize,
+    onClose,
+    size = 'md',
+    trigger,
+    children,
+    focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,
+    showCloseButton = true,
+    ...otherProps
+  } = props;
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpenProp,
+    onChange
+  });
+  const [outlet, setOutlet] = useState();
+  const context = useMemo(() => ({
+    closeOnEscape,
+    onClose,
+    onResize,
+    props: otherProps,
+    size,
+    ref,
+    open,
+    setOpen,
+    variant,
+    focusTrap,
+    showCloseButton,
+    outlet
+  }), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]);
+  // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.
+  const close = useCallback(() => {
+    setOpen(false);
+    onClose && onClose();
+  }, []);
+  useEffect(() => {
+    var _document$querySelect;
+    const outletElement = (_document$querySelect = document.querySelector('[data-taco="drawer-outlet"]')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+    setOutlet(outletElement);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      // if drawerStack is defined, this means that another drawer was opened before
+      if (drawerStack) {
+        drawerStack();
+      }
+      drawerStack = close;
+    } else {
+      // if drawerStack is equal to current close callback,
+      // this means that drawer getting closed completely instead of getting closed on re-open
+      if (drawerStack === close) {
+        drawerStack = undefined;
+      }
+    }
+  }, [open]);
+  return /*#__PURE__*/createElement(DrawerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, {
+    modal: variant === 'overlay' ? true : false,
+    open: open,
+    onOpenChange: setOpen
+  }, trigger && /*#__PURE__*/createElement(Trigger, null, trigger), children));
+});
+Drawer.Trigger = Trigger;
+Drawer.Content = Content;
+Drawer.InnerContent = InnerContent;
+Drawer.Title = Title;
+Drawer.Footer = Footer;
+Drawer.Close = Close;
+Drawer.Actions = Actions;
+Drawer.Outlet = Outlet;
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** When `true`, pressing escape will close the drawer */\n    closeOnEscape?: boolean;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean | undefined) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' preventing focus from leaving drawer content */\n    focusTrap?: boolean;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement>;\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return <div {...props} className={className} data-taco=\"drawer-outlet\" ref={ref} />;\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        open: openProp,\n        defaultOpen: defaultOpenProp,\n        // if onChange is not provided, then replace it with empty function, needed for useControllableState\n        onChange = () => {\n            // do nothing.\n        },\n        variant = 'embedded',\n        className,\n        closeOnEscape = true,\n        onResize,\n        onClose,\n        size = 'md',\n        trigger,\n        children,\n        focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n        showCloseButton = true,\n        ...otherProps\n    } = props;\n\n    const [open, setOpen] = useControllableState<boolean | undefined>({\n        prop: openProp,\n        defaultProp: defaultOpenProp,\n        onChange,\n    });\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            open,\n            setOpen,\n            variant,\n            focusTrap,\n            showCloseButton,\n            outlet,\n        }),\n        [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]\n    );\n\n    // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose && onClose();\n    }, []);\n\n    React.useEffect(() => {\n        const outletElement = document.querySelector<HTMLElement>('[data-taco=\"drawer-outlet\"]') ?? document.body;\n        setOutlet(outletElement);\n    }, []);\n\n    React.useEffect(() => {\n        if (open) {\n            // if drawerStack is defined, this means that another drawer was opened before\n            if (drawerStack) {\n                drawerStack();\n            }\n            drawerStack = close;\n        } else {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            if (drawerStack === close) {\n                drawerStack = undefined;\n            }\n        }\n    }, [open]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["Outlet","React","props","ref","className","cn","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","size","trigger","children","focusTrap","undefined","showCloseButton","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletElement","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":"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"}

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

@@ -0,0 +1,292 @@
+import React__default from 'react';
+import cn from 'classnames';
+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 { useCurrentDrawer } from '../Context.js';
+import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
+import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';
+import { FocusScope } from '@react-aria/focus';
+import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
+
+const RESIZE_MIN = 360;
+const RESIZE_MAX = 1000;
+var DrawerAnimationDefinition;
+(function (DrawerAnimationDefinition) {
+  DrawerAnimationDefinition["Visible"] = "visible";
+  DrawerAnimationDefinition["Hidden"] = "hidden";
+})(DrawerAnimationDefinition || (DrawerAnimationDefinition = {}));
+const RenderPropWrapper = /*#__PURE__*/React__default.forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
+});
+const Title = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, ref) {
+  const {
+    className,
+    children,
+    ...otherProps
+  } = props;
+  /**
+   * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,
+   * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,
+   * so it can be easily overriden in exceptional scenarious.
+   *  */
+  const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);
+  return /*#__PURE__*/React__default.createElement(Title$1, Object.assign({
+    className: cName
+  }, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "line-clamp-2 inline-block w-4/6 overflow-y-hidden"
+  }, children));
+});
+const Footer = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
+  const {
+    className,
+    ...otherProps
+  } = props;
+  /**
+   * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.
+   */
+  const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }));
+});
+const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, ref) {
+  const {
+    className,
+    ...otherProps
+  } = props;
+  const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
+  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }));
+});
+const Close = /*#__PURE__*/React__default.forwardRef(function DrawerClose(props, ref) {
+  const {
+    onClose
+  } = useCurrentDrawer();
+  return /*#__PURE__*/React__default.createElement(Close$1, Object.assign({}, props, {
+    onClick: onClose,
+    ref: ref,
+    asChild: true
+  }));
+});
+const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerContent(props, ref) {
+  const {
+    className,
+    isScrollable = true,
+    children,
+    ...otherProps
+  } = props;
+  const cName = cn('grow-1 p-4', className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className: "w-full gap-y-0.5"
+  }, children) : {
+    children
+  });
+});
+const Portal = props => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const {
+    open = false,
+    variant,
+    outlet
+  } = useCurrentDrawer();
+  const backdropClassNames = React__default.useMemo(() => {
+    return getBackdropClassNames(open);
+  }, [open]);
+  if (!outlet) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(Portal$1, Object.assign({}, otherProps, {
+    container: outlet !== null && outlet !== void 0 ? outlet : undefined
+  }), variant === 'overlay' ? /*#__PURE__*/React__default.createElement(Overlay, {
+    forceMount: true
+  }, /*#__PURE__*/React__default.createElement(Backdrop, {
+    className: backdropClassNames
+  })) : null, children);
+};
+const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(function EmbeddedDrawerContent(props, ref) {
+  const {
+    onEscape,
+    children,
+    ...otherProps
+  } = props;
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'Escape') {
+      onEscape(event);
+    }
+  });
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(FocusScope, {
+    autoFocus: true,
+    restoreFocus: true
+  }, children));
+});
+const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    size,
+    onClose,
+    onResize,
+    open = false,
+    closeOnEscape,
+    variant,
+    focusTrap,
+    showCloseButton,
+    setOpen
+  } = useCurrentDrawer();
+  const {
+    className,
+    style,
+    children,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const ref = useMergedRef(externalRef);
+  // if the drawer was opened by a menu, we need to close the menu when the drawer closes
+  // the menu is still open (and mounted) because it is the trigger for the drawer
+  const menu = useCurrentMenu();
+  let handleCloseAutoFocus;
+  if (menu) {
+    handleCloseAutoFocus = () => {
+      menu.close();
+    };
+  }
+  const containerClassName = React__default.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);
+  const {
+    contentClassName,
+    dragHandlerClassName
+  } = React__default.useMemo(() => {
+    const contentClassName = getDrawerContentClassNames(size, variant, open);
+    const dragHandlerClassName = getDrawerDragHandlerClassNames();
+    return {
+      contentClassName,
+      dragHandlerClassName
+    };
+  }, [size, variant, open]);
+  const handleEscapeKeyDown = event => {
+    var _ref$current;
+    const isTargetInsideDrawerContent = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target);
+    if (isTargetInsideDrawerContent) {
+      if (!closeOnEscape) {
+        event.preventDefault();
+      } else {
+        setOpen && setOpen(false);
+        if (onClose) {
+          onClose();
+        }
+      }
+    }
+  };
+  const [containerWidth, setContainerWidth] = React__default.useState();
+  const dragHandlerRef = React__default.useRef(null);
+  const {
+    position,
+    dragging,
+    handleProps: dragHandleProps,
+    resetPosition
+  } = useDraggable(useMergedRef(dragHandlerRef));
+  const contentRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (onResize) {
+      onResize(position.x);
+    }
+  }, [position]);
+  React__default.useEffect(() => {
+    var _contentRef$current;
+    setContainerWidth((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetWidth);
+  }, [contentRef, open]);
+  const resizedWidth = React__default.useMemo(() => {
+    if (containerWidth) {
+      return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
+    }
+    return;
+  }, [containerWidth, position]);
+  React__default.useEffect(() => {
+    if (!dragging && resizedWidth) {
+      setContainerWidth(resizedWidth);
+      resetPosition();
+    }
+  }, [dragging]);
+  let output;
+  if (typeof children === 'function') {
+    output = /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(RenderPropWrapper, null, children));
+  } else {
+    output = children;
+  }
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    "data-taco": "drawer",
+    className: containerClassName
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+    className: dragHandlerClassName
+  }, dragHandleProps, {
+    "data-testid": "resize-handler",
+    ref: dragHandlerRef
+  })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.drawer.close,
+    className: "absolute top-0 right-0 mt-4 mr-2",
+    icon: "close"
+  })) : null);
+  const styleProp = {
+    ...style,
+    ...{
+      width: resizedWidth
+    }
+  };
+  return focusTrap ? /*#__PURE__*/React__default.createElement(Content$1, Object.assign({
+    forceMount: true
+  }, otherProps, {
+    className: contentClassName,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: styleProp
+  }), content) : /*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
+    onEscape: handleEscapeKeyDown,
+    className: contentClassName,
+    style: styleProp,
+    ref: ref
+  }, content);
+});
+const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(DrawerContent, Object.assign({}, props, {
+    ref: externalRef
+  }), children));
+});
+
+export { Actions, Close, Content, DrawerAnimationDefinition, DrawerContent, Footer, InnerContent, Title };
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n     * so it can be easily overriden in exceptional scenarious.\n     *  */\n    const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn('grow-1 p-4', className);\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5\">{children}</ScrollArea> : { children }}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n            onEscape(event);\n        }\n    });\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef} />\n            {output}\n            {showCloseButton ? (\n                <Close>\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute top-0 right-0 mt-4 mr-2\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyboardShortcut","event","key","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","isTargetInsideDrawerContent","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { forwardRef, createElement } from 'react';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
+
+const Trigger = /*#__PURE__*/forwardRef(function DrawerTrigger(props, ref) {
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    return <DialogPrimitive.Trigger {...props} ref={ref} asChild />;\n});\n"],"names":["Trigger","React","DrawerTrigger","props","ref","DialogPrimitive","asChild"],"mappings":";;;MAIaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,aAAa,CAACC,KAAyB,EAAEC,GAAiC;EACvH,oBAAOH,cAACI,SAAuB,oBAAKF,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEE,OAAO;KAAG;AACnE,CAAC;;;;"}

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

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+
+const getDrawerSizeClassnames = size => {
+  switch (size) {
+    case 'lg':
+      return 'w-[600px]';
+    case 'md':
+    default:
+      return 'w-[420px]';
+  }
+};
+const getDrawerContentClassNames = (size, variant, open) => {
+  return cn('bg-white h-full bottom-0 top-0 right-0 transition-none', {
+    block: open,
+    hidden: !open,
+    fixed: variant === 'overlay',
+    'relative h-full overflow-hidden': variant === 'embedded'
+  }, getDrawerSizeClassnames(size));
+};
+const getDrawerContainerClassNames = variant => {
+  return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
+    'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
+    'border-l border-grey h-full': variant === 'embedded'
+  });
+};
+const getDrawerDragHandlerClassNames = () => {
+  return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
+};
+const getBackdropClassNames = open => {
+  return cn({
+    block: open,
+    hidden: !open
+  });
+};
+
+export { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames, getDrawerSizeClassnames };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'classnames';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        case 'md':\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant, open: boolean): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            block: open,\n            hidden: !open,\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-grey h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n\nexport const getBackdropClassNames = (open: boolean): string => {\n    return cn({\n        block: open,\n        hidden: !open,\n    });\n};\n"],"names":["getDrawerSizeClassnames","size","getDrawerContentClassNames","variant","open","cn","block","hidden","fixed","getDrawerContainerClassNames","getDrawerDragHandlerClassNames","getBackdropClassNames"],"mappings":";;MAGaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,IAAI;MACL,OAAO,WAAW;IACtB,KAAK,IAAI;IACT;MACI,OAAO,WAAW;;AAE9B;MAMaC,0BAA0B,GAAG,CAACD,IAAgB,EAAEE,OAAsB,EAAEC,IAAa;EAC9F,OAAOC,EAAE,CACL,wDAAwD,EACxD;IACIC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH,IAAI;IACbI,KAAK,EAAEL,OAAO,KAAK,SAAS;IAC5B,iCAAiC,EAAEA,OAAO,KAAK;GAClD,EACDH,uBAAuB,CAACC,IAAI,CAAC,CAChC;AACL;MAEaQ,4BAA4B,GAAIN,OAAsB;EAC/D,OAAOE,EAAE,CAAC,wDAAwD,EAAE;IAChE,sEAAsE,EAAEF,OAAO,KAAK,SAAS;IAC7F,6BAA6B,EAAEA,OAAO,KAAK;GAC9C,CAAC;AACN;MAEaO,8BAA8B,GAAG;EAC1C,OAAOL,EAAE,CAAC,2GAA2G,CAAC;AAC1H;MAEaM,qBAAqB,GAAIP,IAAa;EAC/C,OAAOC,EAAE,CAAC;IACNC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH;GACZ,CAAC;AACN;;;;"}

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

@@ -4,15 +4,16 @@ import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
 import { Root, Trigger, Content } from '@radix-ui/react-popover';
 import { createCustomKeyboardEvent } from '../../../utils/input.js';
-import { SearchInput } from '../../SearchInput/SearchInput.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';
 import { AgreementDetails } from './Agreements/AgreementDetails.js';
 
 const Container = props => {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2"
+    className: "-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2",
+    "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
   }), props.children);
@@ -121,6 +122,7 @@ const isCurrentAgreement = (agreement, currentAgreement) => {
 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),

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 className=\"-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2\">\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        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    <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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"}

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

@@ -14,6 +14,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref
   }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
     appearance: "discrete",
     className: className,
+    "data-taco": "header-button",
     ref: ref
   })));
 });