@economic/taco 2.40.0 → 2.40.1

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

@@ -0,0 +1,101 @@
+import { forwardRef, createElement, useMemo, useState, useEffect, createContext, useContext, isValidElement } from 'react';
+import cn from 'clsx';
+import { mergeRefs } from '../../utils/mergeRefs.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { Root, Anchor as Anchor$1, Portal, Content as Content$1, Close } from '@radix-ui/react-popover';
+import { UnstyledArrow } from '../Popover/Primitives.js';
+
+const HangerContext = /*#__PURE__*/createContext({
+  onClose: undefined,
+  props: {},
+  ref: null
+});
+const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, externalRef) {
+  var _props$children;
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (/*#__PURE__*/isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
+    children = /*#__PURE__*/createElement("span", null, props.children);
+  }
+  return /*#__PURE__*/createElement(Anchor$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }), children);
+});
+const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
+  return /*#__PURE__*/createElement("span", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
+  const {
+    placement: side
+  } = props;
+  const context = useContext(HangerContext);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const handleInteractOutside = event => {
+    event.preventDefault();
+  };
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content$1, {
+    className: className,
+    "data-taco": "hanger",
+    onInteractOutside: handleInteractOutside,
+    side: side,
+    sideOffset: 1,
+    ref: ref
+  }, props.children, /*#__PURE__*/createElement(UnstyledArrow, {
+    className: "text-blue-500"
+  }), /*#__PURE__*/createElement(Close, {
+    asChild: true
+  }, /*#__PURE__*/createElement(IconButton, {
+    appearance: "primary",
+    "aria-label": texts.hanger.close,
+    className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+    icon: "close",
+    onClick: context.onClose
+  }))));
+});
+const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
+  const {
+    anchor,
+    children,
+    defaultOpen = true,
+    onClose,
+    ...otherProps
+  } = props;
+  const context = useMemo(() => ({
+    onClose,
+    props: otherProps,
+    ref
+  }), [onClose, otherProps]);
+  // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (defaultOpen) {
+      setOpen(defaultOpen);
+    }
+  }, []);
+  return /*#__PURE__*/createElement(HangerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, {
+    key: String(open),
+    defaultOpen: open
+  }, anchor && /*#__PURE__*/createElement(Anchor, null, anchor), children));
+});
+Hanger.Anchor = Anchor;
+Hanger.Content = Content;
+Hanger.Title = Title;
+
+export { Hanger, Title };
+//# sourceMappingURL=Hanger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Localization';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","_props$children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Button } from './components/Button.js';
+import { Link } from './components/Link.js';
+import { Logo, LogoLegacy } from './components/Logo.js';
+import { PrimaryNavigation } from './components/PrimaryNavigation.js';
+import { SecondaryNavigation } from './components/SecondaryNavigation.js';
+import { MenuButton } from './components/MenuButton.js';
+import { AgreementDisplay, AgreementSelector } from './components/AgreementSelector.js';
+
+const Header = /*#__PURE__*/React__default.forwardRef(function Header(props, ref) {
+  const className = cn('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-2 pl-4', '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded',
+  // styles for logo wrapped inside an anchor
+  props.className);
+  return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+Header.AgreementDisplay = AgreementDisplay;
+Header.AgreementSelector = AgreementSelector;
+Header.Button = Button;
+Header.Link = Link;
+Header.Logo = Logo;
+Header.LogoLegacy = LogoLegacy;
+Header.PrimaryNavigation = PrimaryNavigation;
+Header.SecondaryNavigation = SecondaryNavigation;
+Header.MenuButton = MenuButton;
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } from './components/Logo';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\nimport { MenuButton } from './components/MenuButton';\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\n\nexport * from './components/Agreement/types';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    LogoLegacy: typeof LogoLegacy;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'bg-blue-900 flex h-16 w-full shrink-0 items-center gap-2 pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // styles for logo wrapped inside an anchor\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","React","forwardRef","props","ref","className","cn","AgreementDisplay","AgreementSelector","Button","Link","Logo","LogoLegacy","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;MAkCaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAMA,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAMC,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D,iDAAiD;;EACjDH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,yDAAYE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChE,CAAC;AAEDJ,MAAM,CAACO,gBAAgB,GAAGA,gBAAgB;AAC1CP,MAAM,CAACQ,iBAAiB,GAAGA,iBAAiB;AAC5CR,MAAM,CAACS,MAAM,GAAGA,MAAM;AACtBT,MAAM,CAACU,IAAI,GAAGA,IAAI;AAClBV,MAAM,CAACW,IAAI,GAAGA,IAAI;AAClBX,MAAM,CAACY,UAAU,GAAGA,UAAU;AAC9BZ,MAAM,CAACa,iBAAiB,GAAGA,iBAAiB;AAC5Cb,MAAM,CAACc,mBAAmB,GAAGA,mBAAmB;AAChDd,MAAM,CAACe,UAAU,GAAGA,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Avatar.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import cn from 'clsx';
+
+const AgreementAvatar = /*#__PURE__*/React__default.forwardRef(function AgreementAvatar(props, ref) {
+  const {
+    src,
+    fallbackSrc,
+    ...otherProps
+  } = props;
+  const [loaded, setLoaded] = React__default.useState(false);
+  const handleLoad = () => setLoaded(true);
+  const handleError = event => {
+    event.target.src = fallbackSrc;
+  };
+  const className = cn('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
+    visible: loaded
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement("img", Object.assign({}, otherProps, {
+    className: className,
+    src: src,
+    onLoad: handleLoad,
+    onError: handleError,
+    ref: ref
+  }));
+});
+
+export { AgreementAvatar };
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type AgreementAvatarProps = React.ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc: string };\n\nexport const AgreementAvatar = React.forwardRef<HTMLImageElement, AgreementAvatarProps>(function AgreementAvatar(props, ref) {\n    const { src, fallbackSrc, ...otherProps } = props;\n    const [loaded, setLoaded] = React.useState(false);\n    const handleLoad = () => setLoaded(true);\n    const handleError = event => {\n        event.target.src = fallbackSrc;\n    };\n\n    const className = cn(\n        'h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none',\n        {\n            visible: loaded,\n        },\n        props.className\n    );\n\n    return <img {...otherProps} className={className} src={src} onLoad={handleLoad} onError={handleError} ref={ref} />;\n});\n"],"names":["AgreementAvatar","React","forwardRef","props","ref","src","fallbackSrc","otherProps","loaded","setLoaded","useState","handleLoad","handleError","event","target","className","cn","visible","onLoad","onError"],"mappings":";;;MAKaA,eAAe,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASF,eAAeA,CAACG,KAAK,EAAEC,GAAG;EACvH,MAAM;IAAEC,GAAG;IAAEC,WAAW;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EACjD,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGR,cAAK,CAACS,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMC,UAAU,GAAGA,MAAMF,SAAS,CAAC,IAAI,CAAC;EACxC,MAAMG,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,MAAM,CAACT,GAAG,GAAGC,WAAW;GACjC;EAED,MAAMS,SAAS,GAAGC,EAAE,CAChB,oFAAoF,EACpF;IACIC,OAAO,EAAET;GACZ,EACDL,KAAK,CAACY,SAAS,CAClB;EAED,oBAAOd,sDAASM,UAAU;IAAEQ,SAAS,EAAEA,SAAS;IAAEV,GAAG,EAAEA,GAAG;IAAEa,MAAM,EAAEP,UAAU;IAAEQ,OAAO,EAAEP,WAAW;IAAER,GAAG,EAAEA;KAAO;AACtH,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Badge.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { Badge } from '../../../Badge/Badge.js';
+
+const AgreementBadge = ({
+  agreement,
+  ...props
+}) => {
+  if (agreement.isAdministrator) {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
+      color: "blue",
+      small: true
+    }), "Admin");
+  } else if (agreement.isDeveloper) {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
+      color: "blue",
+      small: true
+    }), "Developer");
+  }
+  return null;
+};
+
+export { AgreementBadge };
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Badge } from '../../../Badge/Badge';\nimport { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    } else if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["AgreementBadge","agreement","props","isAdministrator","React","Badge","color","small","isDeveloper"],"mappings":";;;MAQaA,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;CAA4B;EACvE,IAAID,SAAS,CAACE,eAAe,EAAE;IAC3B,oBACIC,6BAACC,KAAK,oBAAKH,KAAK;MAAEI,KAAK,EAAC,MAAM;MAACC,KAAK;gBAE5B;GAEf,MAAM,IAAIN,SAAS,CAACO,WAAW,EAAE;IAC9B,oBACIJ,6BAACC,KAAK,oBAAKH,KAAK;MAAEI,KAAK,EAAC,MAAM;MAACC,KAAK;oBAE5B;;EAIhB,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Display.js

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { useMatchMedia } from '../../../../hooks/useMatchMedia.js';
+import { AgreementAvatar } from './Avatar.js';
+import { AgreementBadge } from './Badge.js';
+import { AgreementItem } from './Item.js';
+
+const AgreementDisplay = props => {
+  const {
+    children,
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);
+  if (isXlScreen) {
+    const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);
+    return /*#__PURE__*/React__default.createElement(AgreementItem, Object.assign({}, currentAgreement, {
+      children: children,
+      className: className,
+      fallbackImageSrc: fallbackImageSrc
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex h-12 flex-grow items-center pr-2"
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
+    fallbackSrc: fallbackImageSrc,
+    src: currentAgreement.imageSrc,
+    title: `${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`
+  }), /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: currentAgreement,
+    className: "absolute right-0 top-0 -mr-1 w-8 !justify-start"
+  }));
+};
+
+export { AgreementDisplay };
+//# sourceMappingURL=Display.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Display.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Agreement } from './types';\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementItem } from './Item';\nimport { AgreementBadge } from './Badge';\nimport { useMatchMedia } from '../../../../hooks/useMatchMedia';\n\nexport type AgreementDisplayProps = {\n    children?: JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["AgreementDisplay","props","children","currentAgreement","fallbackImageSrc","isXlScreen","useMatchMedia","window","innerWidth","className","cn","React","AgreementItem","AgreementAvatar","fallbackSrc","src","imageSrc","title","name","number","userId","AgreementBadge","agreement"],"mappings":";;;;;;;MAeaA,gBAAgB,GAAIC,KAA4B;EACzD,MAAM;IAAEC,QAAQ;IAAEC,gBAAgB;IAAEC;GAAkB,GAAGH,KAAK;EAC9D,MAAMI,UAAU,GAAGC,aAAa,CAAC,qBAAqB,EAAEC,MAAM,CAACC,UAAU,GAAG,IAAI,CAAC;EAEjF,IAAIH,UAAU,EAAE;IACZ,MAAMI,SAAS,GAAGC,EAAE,CAAC,oDAAoD,EAAET,KAAK,CAACQ,SAAS,CAAC;IAC3F,oBACIE,6BAACC,aAAa,oBAAKT,gBAAgB;MAAED,QAAQ,EAAEA,QAAQ;MAAEO,SAAS,EAAEA,SAAS;MAAEL,gBAAgB,EAAEA;OAAoB;;EAI7H,oBACIO;IAAMF,SAAS,EAAC;kBACZE,6BAACE,eAAe;IACZC,WAAW,EAAEV,gBAAgB;IAC7BW,GAAG,EAAEZ,gBAAgB,CAACa,QAAQ;IAC9BC,KAAK,EAAE,GAAGd,gBAAgB,CAACe,IAAI,MAAMf,gBAAgB,CAACgB,MAAM,IAAIhB,gBAAgB,CAACiB,MAAM;IACzF,eACFT,6BAACU,cAAc;IAACC,SAAS,EAAEnB,gBAAgB;IAAEM,SAAS,EAAC;IAAoD,CACxG;AAEf;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Item.js

@@ -0,0 +1,39 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../../Icon/Icon.js';
+import { AgreementAvatar } from './Avatar.js';
+import { AgreementBadge } from './Badge.js';
+
+const AgreementItem = props => {
+  const {
+    children,
+    className: customClassName,
+    fallbackImageSrc,
+    ...agreement
+  } = props;
+  const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
+    fallbackSrc: fallbackImageSrc,
+    src: agreement.imageSrc,
+    title: `${agreement.name} - ${agreement.number} ${agreement.userId}`
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "flex flex-col overflow-hidden"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex truncate text-white",
+    title: agreement.name
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, agreement.name), ' ', agreement.secure ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: "secure-tick",
+    className: "mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
+  })) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-100 whitespace-nowrap text-xs"
+  }, agreement.number, " ", agreement.userId, " ", /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: agreement
+  }))), children);
+};
+
+export { AgreementItem };
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../../Icon/Icon';\nimport { AgreementAvatar } from './Avatar';\nimport { Agreement } from './types';\nimport { AgreementBadge } from './Badge';\n\nexport type AgreementItemProps = Agreement & {\n    children?: JSX.Element | null;\n    className?: string;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementItem = (props: AgreementItemProps) => {\n    const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;\n    const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);\n\n    return (\n        <span className={className}>\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={agreement.imageSrc}\n                title={`${agreement.name} - ${agreement.number} ${agreement.userId}`}\n            />\n            <span className=\"flex flex-col overflow-hidden\">\n                <span className=\"flex truncate text-white\" title={agreement.name}>\n                    <span className=\"truncate\">{agreement.name}</span>{' '}\n                    {agreement.secure ? (\n                        <Icon name=\"secure-tick\" className=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"text-grey-100 whitespace-nowrap text-xs\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementItem","props","children","className","customClassName","fallbackImageSrc","agreement","cn","React","AgreementAvatar","fallbackSrc","src","imageSrc","title","name","number","userId","secure","Icon","AgreementBadge"],"mappings":";;;;;;MAaaA,aAAa,GAAIC,KAAyB;EACnD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,eAAe;IAAEC,gBAAgB;IAAE,GAAGC;GAAW,GAAGL,KAAK;EACtF,MAAME,SAAS,GAAGI,EAAE,CAAC,uEAAuE,EAAEH,eAAe,CAAC;EAE9G,oBACII;IAAML,SAAS,EAAEA;kBACbK,6BAACC,eAAe;IACZC,WAAW,EAAEL,gBAAgB;IAC7BM,GAAG,EAAEL,SAAS,CAACM,QAAQ;IACvBC,KAAK,EAAE,GAAGP,SAAS,CAACQ,IAAI,MAAMR,SAAS,CAACS,MAAM,IAAIT,SAAS,CAACU,MAAM;IACpE,eACFR;IAAML,SAAS,EAAC;kBACZK;IAAML,SAAS,EAAC,0BAA0B;IAACU,KAAK,EAAEP,SAAS,CAACQ;kBACxDN;IAAML,SAAS,EAAC;KAAYG,SAAS,CAACQ,IAAI,CAAQ,EAAC,GAAG,EACrDR,SAAS,CAACW,MAAM,iBACbT,6BAACU,IAAI;IAACJ,IAAI,EAAC,aAAa;IAACX,SAAS,EAAC;IAA2D,IAC9F,IAAI,CACL,eACPK;IAAML,SAAS,EAAC;KACXG,SAAS,CAACS,MAAM,OAAGT,SAAS,CAACU,MAAM,oBAAER,6BAACW,cAAc;IAACb,SAAS,EAAEA;IAAa,CAC3E,CACJ,EACNJ,QAAQ,CACN;AAEf;;;;"}

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

@@ -0,0 +1,144 @@
+import React__default from 'react';
+import { Icon } from '../../Icon/Icon.js';
+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 { 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 { AgreementItem } from './Agreement/Item.js';
+import { AgreementDisplay as AgreementDisplay$1 } from './Agreement/Display.js';
+
+const Container = props => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
+    "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);
+};
+function AgreementSelector(props) {
+  const {
+    agreements,
+    currentAgreement,
+    fallbackImageSrc,
+    filterAgreement = () => true,
+    filterClientAgreement = () => true,
+    onAddAgreement: handleAddAgreement,
+    onChangeAgreement,
+    onLogout: handleLogout,
+    open: prop,
+    setOpen: onChange
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const collectionRef = React__default.useRef(null);
+  const [open, setOpen] = useControllableState({
+    onChange,
+    prop
+  });
+  const [search, setSearch] = React__default.useState('');
+  React__default.useEffect(() => {
+    setSearch('');
+  }, [open]);
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+      var _collectionRef$curren;
+      event.preventDefault();
+      (_collectionRef$curren = collectionRef.current) === null || _collectionRef$curren === void 0 ? void 0 : _collectionRef$curren.dispatchEvent(createCustomKeyboardEvent(event));
+    }
+  };
+  const handleChangeAgreement = agreement => {
+    onChangeAgreement(agreement);
+    setOpen(false);
+  };
+  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Root, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React__default.createElement(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"
+  }, /*#__PURE__*/React__default.createElement(AgreementDisplay$1, {
+    currentAgreement: currentAgreement,
+    fallbackImageSrc: fallbackImageSrc
+  }, agreements ? (/*#__PURE__*/React__default.createElement(Icon, {
+    className: "ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex",
+    name: open ? 'chevron-up' : 'chevron-down'
+  })) : null)), /*#__PURE__*/React__default.createElement(Content, {
+    className: "z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900"
+  }, /*#__PURE__*/React__default.createElement(SearchInput, {
+    autoFocus: true,
+    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",
+    onChange: event => setSearch(event.target.value),
+    onKeyDown: handleKeyDown,
+    placeholder: texts.header.search
+  }), /*#__PURE__*/React__default.createElement(Root$1, {
+    querySelector: "button",
+    className: "-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none",
+    ref: collectionRef,
+    tabIndex: -1
+  }, agreements === null || agreements === void 0 ? void 0 : agreements.filter(agreement => filterAgreement(agreement, filterBySearchValue(search))).map(agreement => {
+    const button = createAgreementButton(agreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(agreement, currentAgreement));
+    if (agreement.clients) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: "flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none",
+        key: `${agreement.number}_${agreement.userId}_clients`
+      }, filterBySearchValue(search)(agreement) ? button : null, agreement.clients.filter(agreement => filterClientAgreement(agreement, search, filterBySearchValue(search))).map(clientAgreement => createAgreementButton(clientAgreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(clientAgreement, currentAgreement))));
+    }
+    return button;
+  })), handleAddAgreement ? (/*#__PURE__*/React__default.createElement(Button, {
+    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]",
+    onClick: handleAddAgreement
+  }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
+    className: "my-0 h-px w-full bg-white/[0.08]"
+  }), /*#__PURE__*/React__default.createElement("a", {
+    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",
+    onClick: handleLogout,
+    tabIndex: 0
+  }, texts.header.logout))));
+}
+const filterBySearchValue = search => agreement => {
+  if (!search || !search.length) {
+    return true;
+  }
+  const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;
+  const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;
+  return matchesAgreementNumber || matchesCompanyName;
+};
+const isCurrentAgreement = (agreement, currentAgreement) => {
+  return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;
+};
+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(AgreementItem, 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
+  })));
+};
+function AgreementDisplay(props) {
+  const {
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(AgreementDisplay$1, {
+    currentAgreement: currentAgreement,
+    fallbackImageSrc: fallbackImageSrc
+  }));
+}
+
+export { AgreementDisplay, AgreementSelector };
+//# sourceMappingURL=AgreementSelector.js.map

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

@@ -0,0 +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 { AgreementItem } from './Agreement/Item';\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';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = props => {\n    return (\n        <div\n            className=\"-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64\"\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 AgreementSelectorProps = {\n    agreements: Agreement[];\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, searchValue: string, 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                    <Display currentAgreement={currentAgreement} 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                    </Display>\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, search, 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            <AgreementItem\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\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            <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc} />\n        </Container>\n    );\n}\n"],"names":["Container","props","React","className","children","AgreementSelector","agreements","currentAgreement","fallbackImageSrc","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","_collectionRef$curren","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Display","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","AgreementItem","AgreementDisplay"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { IconButton } from '../../IconButton/IconButton.js';
+
+const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
+  const {
+    ...attributes
+  } = props;
+  const className = cn(getButtonClasses(), props.className);
+  return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
+    appearance: "discrete",
+    className: className,
+    "data-taco": "header-button",
+    ref: ref
+  }));
+});
+const getButtonClasses = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white', {
+  '!rounded-full': rounded
+});
+
+export { Button, getButtonClasses };
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { IconButton, IconButtonProps } from '../../IconButton/IconButton';\n\nexport type ButtonProps = Omit<IconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <IconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = (rounded = true) =>\n    cn(\n        '!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative',\n        'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ',\n        'bg-transparent enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        'text-white',\n        {\n            '!rounded-full': rounded,\n        }\n    );\n"],"names":["Button","React","forwardRef","props","ref","attributes","className","cn","getButtonClasses","IconButton","appearance","rounded"],"mappings":";;;;MAQaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAiC,SAASF,MAAMA,CAACG,KAAK,EAAEC,GAAG;EAC7F,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAMG,SAAS,GAAGC,EAAE,CAACC,gBAAgB,EAAE,EAAEL,KAAK,CAACG,SAAS,CAAC;EAEzD,oBAAOL,6BAACQ,UAAU,oBAAKJ,UAAU;IAAEK,UAAU,EAAC,UAAU;IAACJ,SAAS,EAAEA,SAAS;iBAAY,eAAe;IAACF,GAAG,EAAEA;KAAO;AACzH,CAAC;MAEYI,gBAAgB,GAAGA,CAACG,OAAO,GAAG,IAAI,KAC3CJ,EAAE,CACE,6DAA6D,EAC7D,sEAAsE,EACtE,mGAAmG,EACnG,YAAY,EACZ;EACI,eAAe,EAAEI;CACpB;;;;"}

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

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../Icon/Icon.js';
+import { Badge } from '../../Badge/Badge.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../Provider/Localization.js';
+
+const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  const {
+    children,
+    icon,
+    isNew,
+    tooltip,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const className = cn(getLinkClasses(icon), 'relative', props.className);
+  const link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "header-link",
+    ref: ref,
+    tabIndex: 0
+  }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon
+  }) : null, children, isNew ? (/*#__PURE__*/React__default.createElement(Badge, {
+    color: "blue",
+    small: true,
+    className: "absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
+  }, texts.header.new)) : null);
+  if (tooltip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, link);
+  }
+  return link;
+});
+const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white hover:text-white focus:text-white', {
+  '!rounded-full !h-9 !w-9': icon,
+  'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon
+});
+
+export { Link, getLinkClasses };
+//# sourceMappingURL=Link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    className=\"absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        'text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["Link","React","forwardRef","props","ref","children","icon","isNew","tooltip","otherProps","texts","useLocalization","className","cn","getLinkClasses","link","tabIndex","Icon","name","Badge","color","small","header","new","Tooltip","title","undefined"],"mappings":";;;;;;;MA0BaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA+B,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EACvF,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC/D,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAACC,cAAc,CAACR,IAAI,CAAC,EAAE,UAAU,EAAEH,KAAK,CAACS,SAAS,CAAC;EAEvE,MAAMG,IAAI,gBACNd,oDAAOQ,UAAU;IAAEG,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACR,GAAG,EAAEA,GAAG;IAAEY,QAAQ,EAAE;MAChFV,IAAI,gBAAGL,6BAACgB,IAAI;IAACC,IAAI,EAAEZ;IAAQ,GAAG,IAAI,EAClCD,QAAQ,EACRE,KAAK,iBACFN,6BAACkB,KAAK;IACFC,KAAK,EAAC,MAAM;IACZC,KAAK;IACLT,SAAS,EAAC;KACTF,KAAK,CAACY,MAAM,CAACC,GAAG,CACb,IACR,IAAI,CAEf;EAED,IAAIf,OAAO,EAAE;IACT,oBAAOP,6BAACuB,OAAO;MAACC,KAAK,EAAEjB;OAAUO,IAAI,CAAW;;EAGpD,OAAOA,IAAI;AACf,CAAC;MAEYD,cAAc,GAAGA,CAACR,OAA6BoB,SAAS,KACjEb,EAAE,CACE,gFAAgF,EAChF,qEAAqE,EACrE,2FAA2F,EAC3F,8CAA8C,EAC9C;EACI,yBAAyB,EAAEP,IAAI;EAC/B,uDAAuD,EAAE,CAACA;CAC7D;;;;"}