npm - @economic/taco - Versions diffs - 2.15.0 → 2.17.0 - Mend

@economic/taco 2.15.0 → 2.17.0

Files changed (291) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\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,~~gBACFN~~,6BAACkB,KAAK;IACFC,KAAK,EAAC,MAAM;IACZC,KAAK;IACLT,SAAS,EAAC;KACTF,KAAK,CAACY,MAAM,CAACC,GAAG,CACb,~~GACR~~,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;;;;"}
1	+ {"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\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,kBACFN,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;;;;"}

package/dist/esm/packages/taco/src/components/Icon/Icon.js CHANGED Viewed

@@ -14,14 +14,14 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
-  return Component ? /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
+  return Component ? ( /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "icon",
     "data-icon-name": name,
     focusable: "false",
     ref: ref,
     role: "img"
-  })) : null;
+  }))) : null;
 });
 export { Icon };

package/dist/esm/packages/taco/src/components/Icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n /** Set what svg icon should be rendered /\n name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n const { name, ...otherProps } = props;\n const Component = icons[name];\n / 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n 'p-[3px]': props.className?.includes('rounded-full'),\n });\n\n return Component ? (\n <Component\n {...otherProps}\n className={className}\n data-taco=\"icon\"\n data-icon-name={name}\n focusable=\"false\"\n ref={ref}\n role=\"img\"\n />\n ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","_props$className","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAIA,CAACG,KAAgB,EAAEC,GAA6B;;EAC9F,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACrC,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAI,CAAC;;EAE7B,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEP,KAAK,CAACM,SAAS,EAAE;IACvF,SAAS,GAAAE,gBAAA,GAAER,KAAK,CAACM,SAAS,cAAAE,gBAAA,uBAAfA,gBAAA,CAAiBC,QAAQ,CAAC,cAAc;GACtD,CAAC;EAEF,OAAOL,SAAS,~~gBACZN~~,6BAACM,SAAS,oBACFD,UAAU;IACdG,SAAS,EAAEA,SAAS;iBACV,MAAM;sBACAJ,IAAI;IACpBQ,SAAS,EAAC,OAAO;IACjBT,GAAG,EAAEA,GAAG;IACRU,IAAI,EAAC;KACP,~~GACF~~,IAAI;AACZ,CAAC;;;;"}
1	+ {"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n /** Set what svg icon should be rendered /\n name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n const { name, ...otherProps } = props;\n const Component = icons[name];\n / 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n 'p-[3px]': props.className?.includes('rounded-full'),\n });\n\n return Component ? (\n <Component\n {...otherProps}\n className={className}\n data-taco=\"icon\"\n data-icon-name={name}\n focusable=\"false\"\n ref={ref}\n role=\"img\"\n />\n ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","_props$className","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAIA,CAACG,KAAgB,EAAEC,GAA6B;;EAC9F,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACrC,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAI,CAAC;;EAE7B,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEP,KAAK,CAACM,SAAS,EAAE;IACvF,SAAS,GAAAE,gBAAA,GAAER,KAAK,CAACM,SAAS,cAAAE,gBAAA,uBAAfA,gBAAA,CAAiBC,QAAQ,CAAC,cAAc;GACtD,CAAC;EAEF,OAAOL,SAAS,kBACZN,6BAACM,SAAS,oBACFD,UAAU;IACdG,SAAS,EAAEA,SAAS;iBACV,MAAM;sBACAJ,IAAI;IACpBQ,SAAS,EAAC,OAAO;IACjBT,GAAG,EAAEA,GAAG;IACRU,IAAI,EAAC;KACP,IACF,IAAI;AACZ,CAAC;;;;"}

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

@@ -68,7 +68,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     "aria-hidden": !isVisible,
     className: className,
     ref: ref
-  }), content), /*#__PURE__*/React__default.createElement(AnimatePresence, null, showBackdrop && /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+  }), content), /*#__PURE__*/React__default.createElement(AnimatePresence, null, showBackdrop && ( /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
     initial: {
       opacity: 0
     },
@@ -80,7 +80,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     },
     className: "z-[1]",
     onClick: () => setSidebarOpen(false)
-  })));
+  }))));
 });
 export { Sidebar };

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

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

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

@@ -140,17 +140,17 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
   };
   return /*#__PURE__*/createElement("ul", Object.assign({}, list, {
     "data-taco": "scrollable-list"
-  }), loading ? /*#__PURE__*/createElement("li", {
+  }), loading ? ( /*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/createElement("span", null, /*#__PURE__*/createElement(Spinner, {
     delay: 0
-  })), /*#__PURE__*/createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
+  })), /*#__PURE__*/createElement("span", null, texts.listbox.loading))) : options.length ? options.map(({
     children,
     icon,
     ...optionProps
-  }) => /*#__PURE__*/createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/createElement("span", {
+  }) => ( /*#__PURE__*/createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/createElement("span", {
     className: "flex-grow truncate text-left"
-  }, children), multiselect && /*#__PURE__*/createElement(Checkbox
+  }, children), multiselect && ( /*#__PURE__*/createElement(Checkbox
   // In multiselect variant, this checkbox only acts as visual representation of item being selected,
   // so need to be taken out of screen reader scope.
   , {
@@ -159,9 +159,9 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
     checked: optionProps['aria-selected'],
     onChange: () => null,
     className: "pointer-events-none ml-2 self-center p-px"
-  }))) : /*#__PURE__*/createElement("li", {
+  }))))) : ( /*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
-  }, /*#__PURE__*/createElement("span", null, texts.listbox.empty)));
+  }, /*#__PURE__*/createElement("span", null, texts.listbox.empty))));
 });
 export { ScrollableList, getId };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string \| number \| boolean \| null;\n\nexport type ScrollableListItem = {\n /*\n Set whether the item is disabled.\n * This will both change the style and make the item unselectable\n /\n disabled?: boolean;\n / Specifies whether the item has child items -- intended for internal use only /\n hasChildren?: boolean;\n /* Place an icon before the item's text /\n icon?: React.ReactElement;\n / The index path to the item -- intended for internal use only /\n path?: string;\n /* Text describing the item /\n text: string \| JSX.Element;\n /* Value of the item /\n value: ScrollableListItemValue;\n /* Child items to show hierarchical data /\n children?: ScrollableListItem[];\n};\n\n/* @internal /\nexport type ScrollableListProps = Omit<\n React.HTMLAttributes<HTMLUListElement>,\n 'defaultValue' \| 'id' \| 'onChange' \| 'onClick' \| 'onKeyDown'\n> & {\n /* Data indicating the options in scrollable list /\n data: ScrollableListItem[];\n /* Sets the list to be disabled /\n disabled?: boolean;\n /* Draws attention to the scrollable list by changing its style and making it visually prominent /\n highlighted?: boolean;\n /* Set an id for the scrollable list /\n id: string;\n / Whether the input is in an invalid state /\n invalid?: boolean;\n /\n Shows a loading indicator with a text next to it.\n * Read more about how to provide the text in `Provider` component.\n /\n loading?: boolean;\n /\n Handler called when current active/selected option changes in a scrollable list.\n * @param index indicates the index of the current active option\n /\n onChange: (index: number) => void;\n /* Handler called when option is clicked /\n onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n /\n Set whether the selected item should be scrolled into view when listbox is focused.\n * Default value is `false`\n /\n scrollOnFocus?: boolean;\n /* Handler called when a key is pressed /\n onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number \| undefined) => void;\n / Sets the list to read only mode /\n readOnly?: boolean;\n /\n Value of the scrollable list representing the selected item.\n * It needs to be an existing value from the provided data.\n /\n value: number \| undefined;\n /\n Allows to select multiple items from the list\n /\n multiselect?: boolean;\n /\n Contains the currently selected values when multiselect mode is ON.\n /\n selectedIndexes?: number[];\n /\n True when all available (not disabled) options are selected\n /\n allOptionsSelected?: boolean;\n};\n\n/* @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n event: React.KeyboardEvent<HTMLElement>,\n data: ScrollableListItem[],\n index: number \| undefined\n): number \| undefined => {\n const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n if (nextIndex) {\n if (nextIndex === index) {\n return index;\n } else if (data[nextIndex] && data[nextIndex].disabled) {\n return getNextEnabledItem(event, data, nextIndex);\n }\n }\n\n return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n props: ScrollableListProps,\n ref: React.Ref<HTMLUListElement>\n) {\n const {\n data,\n disabled,\n highlighted,\n id,\n invalid: _,\n loading,\n onChange: setCurrentIndex,\n onClick,\n onFocus,\n onKeyDown,\n readOnly,\n scrollOnFocus = false,\n value: currentIndex,\n multiselect,\n selectedIndexes = [],\n allOptionsSelected = false,\n ...otherProps\n } = props;\n const listRef = useMergedRef<HTMLUListElement>(ref);\n const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n const { texts } = useLocalization();\n const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n React.useEffect(() => {\n if (currentIndex && itemRefs[currentIndex]?.current) {\n itemRefs[currentIndex].current?.scrollIntoView({\n block: 'center',\n });\n }\n }, []);\n\n React.useEffect(() => {\n scrollTo(currentIndex);\n }, [currentIndex]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n if (nextIndex !== undefined && nextIndex !== currentIndex) {\n event.preventDefault();\n scrollTo(nextIndex);\n setCurrentIndex(nextIndex);\n }\n\n if (onKeyDown) {\n event.persist();\n const index = nextIndex !== undefined ? nextIndex : currentIndex;\n onKeyDown(event, index);\n }\n\n // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n // list are not executed.\n event.stopPropagation();\n };\n\n const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n setCurrentIndex(index);\n\n if (onClick) {\n event.persist();\n onClick(event, index);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n if (scrollOnFocus) {\n scrollTo(currentIndex);\n }\n\n if (onFocus) {\n event.persist();\n onFocus(event);\n }\n };\n\n const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n if (optionValue === '#ALL-OPTIONS#') {\n return allOptionsSelected;\n } else if (!optionValue \|\| !selectedIndexes) {\n return false;\n } else {\n return selectedIndexes.findIndex(i => i === index) !== -1;\n }\n };\n\n const options = data.map((option, index) => {\n const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n return {\n 'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n 'data-focused': currentIndex === index,\n children: option.text,\n className: cn(\n 'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n {\n 'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n }\n ),\n disabled: option.disabled,\n icon: option.icon,\n id: getId(id, option.value),\n key: getId(id, option.value),\n onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n ref: itemRefs[index],\n role: 'option',\n style:\n depth > 0\n ? {\n paddingLeft: `${depth + 1}rem`,\n }\n : undefined,\n };\n });\n\n const list: React.HTMLAttributes<HTMLUListElement> &\n React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n ...otherProps,\n className: cn(\n 'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n getInputClasses(props),\n {\n 'yt-list--multiselect': multiselect,\n 'pointer-events-none': disabled,\n 'cursor-not-allowed': disabled \|\| readOnly,\n },\n otherProps.className\n ),\n disabled,\n id,\n onFocus: !disabled && !readOnly ? handleFocus : undefined,\n onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n readOnly,\n ref: listRef,\n role: options.length <= 0 \|\| loading ? 'presentation' : 'listbox',\n tabIndex: otherProps.tabIndex \|\| 0,\n };\n\n return (\n <ul {...list} data-taco=\"scrollable-list\">\n {loading ? (\n <li className=\"yt-list__empty\">\n <span>\n <Spinner delay={0} />\n </span>\n <span>{texts.listbox.loading}</span>\n </li>\n ) : options.length ? (\n options.map(({ children, icon, ...optionProps }) => (\n <li {...optionProps}>\n {icon}\n <span className=\"flex-grow truncate text-left\">{children}</span>\n {multiselect && (\n <Checkbox\n // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n // so need to be taken out of screen reader scope.\n aria-hidden\n tabIndex={-1}\n checked={optionProps['aria-selected']}\n onChange={() => null}\n className=\"pointer-events-none ml-2 self-center p-px\"\n />\n )}\n </li>\n ))\n ) : (\n <li className=\"yt-list__empty\">\n <span>{texts.listbox.empty}</span>\n </li>\n )}\n </ul>\n );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
1	+ {"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string \| number \| boolean \| null;\n\nexport type ScrollableListItem = {\n /*\n Set whether the item is disabled.\n * This will both change the style and make the item unselectable\n /\n disabled?: boolean;\n / Specifies whether the item has child items -- intended for internal use only /\n hasChildren?: boolean;\n /* Place an icon before the item's text /\n icon?: React.ReactElement;\n / The index path to the item -- intended for internal use only /\n path?: string;\n /* Text describing the item /\n text: string \| JSX.Element;\n /* Value of the item /\n value: ScrollableListItemValue;\n /* Child items to show hierarchical data /\n children?: ScrollableListItem[];\n};\n\n/* @internal /\nexport type ScrollableListProps = Omit<\n React.HTMLAttributes<HTMLUListElement>,\n 'defaultValue' \| 'id' \| 'onChange' \| 'onClick' \| 'onKeyDown'\n> & {\n /* Data indicating the options in scrollable list /\n data: ScrollableListItem[];\n /* Sets the list to be disabled /\n disabled?: boolean;\n /* Draws attention to the scrollable list by changing its style and making it visually prominent /\n highlighted?: boolean;\n /* Set an id for the scrollable list /\n id: string;\n / Whether the input is in an invalid state /\n invalid?: boolean;\n /\n Shows a loading indicator with a text next to it.\n * Read more about how to provide the text in `Provider` component.\n /\n loading?: boolean;\n /\n Handler called when current active/selected option changes in a scrollable list.\n * @param index indicates the index of the current active option\n /\n onChange: (index: number) => void;\n /* Handler called when option is clicked /\n onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n /\n Set whether the selected item should be scrolled into view when listbox is focused.\n * Default value is `false`\n /\n scrollOnFocus?: boolean;\n /* Handler called when a key is pressed /\n onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number \| undefined) => void;\n / Sets the list to read only mode /\n readOnly?: boolean;\n /\n Value of the scrollable list representing the selected item.\n * It needs to be an existing value from the provided data.\n /\n value: number \| undefined;\n /\n Allows to select multiple items from the list\n /\n multiselect?: boolean;\n /\n Contains the currently selected values when multiselect mode is ON.\n /\n selectedIndexes?: number[];\n /\n True when all available (not disabled) options are selected\n /\n allOptionsSelected?: boolean;\n};\n\n/* @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n event: React.KeyboardEvent<HTMLElement>,\n data: ScrollableListItem[],\n index: number \| undefined\n): number \| undefined => {\n const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n if (nextIndex) {\n if (nextIndex === index) {\n return index;\n } else if (data[nextIndex] && data[nextIndex].disabled) {\n return getNextEnabledItem(event, data, nextIndex);\n }\n }\n\n return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n props: ScrollableListProps,\n ref: React.Ref<HTMLUListElement>\n) {\n const {\n data,\n disabled,\n highlighted,\n id,\n invalid: _,\n loading,\n onChange: setCurrentIndex,\n onClick,\n onFocus,\n onKeyDown,\n readOnly,\n scrollOnFocus = false,\n value: currentIndex,\n multiselect,\n selectedIndexes = [],\n allOptionsSelected = false,\n ...otherProps\n } = props;\n const listRef = useMergedRef<HTMLUListElement>(ref);\n const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n const { texts } = useLocalization();\n const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n React.useEffect(() => {\n if (currentIndex && itemRefs[currentIndex]?.current) {\n itemRefs[currentIndex].current?.scrollIntoView({\n block: 'center',\n });\n }\n }, []);\n\n React.useEffect(() => {\n scrollTo(currentIndex);\n }, [currentIndex]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n if (nextIndex !== undefined && nextIndex !== currentIndex) {\n event.preventDefault();\n scrollTo(nextIndex);\n setCurrentIndex(nextIndex);\n }\n\n if (onKeyDown) {\n event.persist();\n const index = nextIndex !== undefined ? nextIndex : currentIndex;\n onKeyDown(event, index);\n }\n\n // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n // list are not executed.\n event.stopPropagation();\n };\n\n const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n setCurrentIndex(index);\n\n if (onClick) {\n event.persist();\n onClick(event, index);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n if (scrollOnFocus) {\n scrollTo(currentIndex);\n }\n\n if (onFocus) {\n event.persist();\n onFocus(event);\n }\n };\n\n const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n if (optionValue === '#ALL-OPTIONS#') {\n return allOptionsSelected;\n } else if (!optionValue \|\| !selectedIndexes) {\n return false;\n } else {\n return selectedIndexes.findIndex(i => i === index) !== -1;\n }\n };\n\n const options = data.map((option, index) => {\n const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n return {\n 'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n 'data-focused': currentIndex === index,\n children: option.text,\n className: cn(\n 'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n {\n 'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n }\n ),\n disabled: option.disabled,\n icon: option.icon,\n id: getId(id, option.value),\n key: getId(id, option.value),\n onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n ref: itemRefs[index],\n role: 'option',\n style:\n depth > 0\n ? {\n paddingLeft: `${depth + 1}rem`,\n }\n : undefined,\n };\n });\n\n const list: React.HTMLAttributes<HTMLUListElement> &\n React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n ...otherProps,\n className: cn(\n 'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n getInputClasses(props),\n {\n 'yt-list--multiselect': multiselect,\n 'pointer-events-none': disabled,\n 'cursor-not-allowed': disabled \|\| readOnly,\n },\n otherProps.className\n ),\n disabled,\n id,\n onFocus: !disabled && !readOnly ? handleFocus : undefined,\n onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n readOnly,\n ref: listRef,\n role: options.length <= 0 \|\| loading ? 'presentation' : 'listbox',\n tabIndex: otherProps.tabIndex \|\| 0,\n };\n\n return (\n <ul {...list} data-taco=\"scrollable-list\">\n {loading ? (\n <li className=\"yt-list__empty\">\n <span>\n <Spinner delay={0} />\n </span>\n <span>{texts.listbox.loading}</span>\n </li>\n ) : options.length ? (\n options.map(({ children, icon, ...optionProps }) => (\n <li {...optionProps}>\n {icon}\n <span className=\"flex-grow truncate text-left\">{children}</span>\n {multiselect && (\n <Checkbox\n // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n // so need to be taken out of screen reader scope.\n aria-hidden\n tabIndex={-1}\n checked={optionProps['aria-selected']}\n onChange={() => null}\n className=\"pointer-events-none ml-2 self-center p-px\"\n />\n )}\n </li>\n ))\n ) : (\n <li className=\"yt-list__empty\">\n <span>{texts.listbox.empty}</span>\n </li>\n )}\n </ul>\n );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

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

@@ -7,12 +7,12 @@ import { Shortcut } from '../../Shortcut/Shortcut.js';
 const Icon = ({
   name
-}) => /*#__PURE__*/createElement("span", {
+}) => ( /*#__PURE__*/createElement("span", {
   className: "absolute left-0 ml-1"
 }, /*#__PURE__*/createElement(Icon$1, {
   className: "-ml-px -mt-px !h-5 !w-5",
   name: name
-}));
+})));
 const useItemStyling = ({
   disabled,
   indented,
@@ -84,12 +84,12 @@ const Item = /*#__PURE__*/forwardRef(function MenuItem(props, ref) {
     ref: ref
   }), icon ? /*#__PURE__*/createElement(Icon, {
     name: icon
-  }) : null, props.children, shortcut ? /*#__PURE__*/createElement("span", {
+  }) : null, props.children, shortcut ? ( /*#__PURE__*/createElement("span", {
     className: "ml-auto pl-5"
   }, /*#__PURE__*/createElement(Shortcut, {
     keys: shortcut,
     className: "text-grey-700"
-  })) : null);
+  }))) : null);
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\n <span className=\"absolute left-0 ml-1\">\n <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n const menu = useCurrentMenu();\n\n React.useEffect(() => {\n if (indented && !menu?.indented) {\n menu?.registerIndentation();\n }\n }, [indented]);\n\n return cn(\n 'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n {\n 'pl-7': menu?.indented,\n 'pl-1.5': !menu?.indented,\n 'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n 'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n },\n className\n );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n disabled?: boolean;\n icon?: IconName;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n const { dialog, icon, onClick, popover, shortcut, subMenu, ...otherProps } = props;\n const menu = useCurrentMenu();\n const className = useItemStyling({\n disabled: props.disabled,\n indented: !!icon,\n className: props.className,\n });\n\n const disabled = props.disabled ?? props['aria-disabled'];\n\n let handleClick;\n\n // radix has a bug that does not disable clicks when disabled is set on items\n if (disabled) {\n handleClick = event => {\n event.preventDefault();\n event.stopPropagation();\n };\n }\n\n if (subMenu) {\n return (\n <DropdownMenuPrimitive.Sub>\n <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} ref={ref}>\n {icon ? <Icon name={icon} /> : null}\n {props.children}\n <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n </DropdownMenuPrimitive.SubTrigger>\n {subMenu()}\n </DropdownMenuPrimitive.Sub>\n );\n }\n\n const handleSelect = event => {\n if (onClick) {\n onClick(event);\n }\n\n if (props['aria-haspopup'] \|\| typeof dialog === 'function' \|\| typeof popover === 'function') {\n event.preventDefault();\n }\n };\n\n let button = (\n <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n {icon ? <Icon name={icon} /> : null}\n {props.children}\n {shortcut ? (\n <span className=\"ml-auto pl-5\">\n <Shortcut keys={shortcut} className=\"text-grey-700\" />\n </span>\n ) : null}\n </DropdownMenuPrimitive.Item>\n );\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button, onClose: menu?.close });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":";;;;;;;MAWaA,IAAI,GAAGA,CAAC;EAAEC;CAAM,~~kBACzBC~~;EAAMC,SAAS,EAAC;gBACZD,cAACE,MAAa;EAACD,SAAS,EAAC,yBAAyB;EAACF,IAAI,EAAEA;EAAQ;~~MAI5DI~~,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEJ;CAAW;EAC5D,MAAMK,IAAI,GAAGC,cAAc,EAAE;EAE7BP,SAAe,CAAC;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ,GAAE;MAC7BC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,mBAAmB,EAAE;;GAElC,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,OAAOI,EAAE,CACL,6FAA6F,EAC7F;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,QAAQ;IACtB,QAAQ,EAAE,EAACC,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAED,QAAQ;IACzB,gFAAgF,EAAE,CAACD,QAAQ;IAC3F,iDAAiD,EAAEA;GACtD,EACDH,SAAS,CACZ;AACL;MAYaS,IAAI,gBAAGV,UAAgB,CAAC,SAASW,QAAQA,CAACC,KAAoB,EAAEC,GAA8B;;EACvG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAClF,MAAMN,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMN,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEQ,KAAK,CAACR,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACU,IAAI;IAChBd,SAAS,EAAEW,KAAK,CAACX;GACpB,CAAC;EAEF,MAAMG,QAAQ,IAAAiB,eAAA,GAAGT,KAAK,CAACR,QAAQ,cAAAiB,eAAA,cAAAA,eAAA,GAAIT,KAAK,CAAC,eAAe,CAAC;EAEzD,IAAIU,WAAW;;EAGf,IAAIlB,QAAQ,EAAE;IACVkB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;KAC1B;;EAGL,IAAIN,OAAO,EAAE;IACT,oBACInB,cAAC0B,GAAyB,qBACtB1B,cAAC0B,UAAgC,oBAAKN,UAAU;MAAEnB,SAAS,EAAEA,SAAS;MAAEe,OAAO,EAAEM,WAAW;MAAET,GAAG,EAAEA;QAC9FE,IAAI,gBAAGf,cAACF,IAAI;MAACC,IAAI,EAAEgB;MAAQ,GAAG,IAAI,EAClCH,KAAK,CAACe,QAAQ,eACf3B,cAACE,MAAa;MAACD,SAAS,EAAC,2BAA2B;MAACF,IAAI,EAAC;MAAkB,CAC7C,EAClCoB,OAAO,EAAE,CACc;;EAIpC,MAAMS,YAAY,GAAGL,KAAK;IACtB,IAAIP,OAAO,EAAE;MACTA,OAAO,CAACO,KAAK,CAAC;;IAGlB,IAAIX,KAAK,CAAC,eAAe,CAAC,IAAI,OAAOE,MAAM,KAAK,UAAU,IAAI,OAAOG,OAAO,KAAK,UAAU,EAAE;MACzFM,KAAK,CAACC,cAAc,EAAE;;GAE7B;EAED,IAAIK,MAAM,gBACN7B,cAAC0B,MAA0B,oBAAKN,UAAU;IAAEnB,SAAS,EAAEA,SAAS;IAAEe,OAAO,EAAEM,WAAW;IAAEQ,QAAQ,EAAEF,YAAY;IAAEf,GAAG,EAAEA;MAChHE,IAAI,gBAAGf,cAACF,IAAI;IAACC,IAAI,EAAEgB;IAAQ,GAAG,IAAI,EAClCH,KAAK,CAACe,QAAQ,EACdT,QAAQ,~~gBACLlB~~;IAAMC,SAAS,EAAC;kBACZD,cAAC+B,QAAQ;IAACC,IAAI,EAAEd,QAAQ;IAAEjB,SAAS,EAAC;IAAkB,CACnD,~~GACP~~,IAAI,CAEf;EAED,IAAI,OAAOa,MAAM,KAAK,UAAU,EAAE;IAC9Be,MAAM,GAAGf,MAAM,CAAC;MAAEmB,OAAO,EAAEJ,MAAM;MAAEK,OAAO,EAAE5B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE6B;KAAO,CAAC;GAC7D,MAAM,IAAI,OAAOlB,OAAO,KAAK,UAAU,EAAE;IACtCY,MAAM,GAAGZ,OAAO,CAAC;MAAEgB,OAAO,EAAEJ;KAAQ,CAAC;;EAGzC,OAAOA,MAAM;AACjB,CAAC;;;;"}
1	+ {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\n <span className=\"absolute left-0 ml-1\">\n <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n const menu = useCurrentMenu();\n\n React.useEffect(() => {\n if (indented && !menu?.indented) {\n menu?.registerIndentation();\n }\n }, [indented]);\n\n return cn(\n 'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n {\n 'pl-7': menu?.indented,\n 'pl-1.5': !menu?.indented,\n 'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n 'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n },\n className\n );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n disabled?: boolean;\n icon?: IconName;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n shortcut?: string \| KeyDownHandlerOptions;\n subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n const { dialog, icon, onClick, popover, shortcut, subMenu, ...otherProps } = props;\n const menu = useCurrentMenu();\n const className = useItemStyling({\n disabled: props.disabled,\n indented: !!icon,\n className: props.className,\n });\n\n const disabled = props.disabled ?? props['aria-disabled'];\n\n let handleClick;\n\n // radix has a bug that does not disable clicks when disabled is set on items\n if (disabled) {\n handleClick = event => {\n event.preventDefault();\n event.stopPropagation();\n };\n }\n\n if (subMenu) {\n return (\n <DropdownMenuPrimitive.Sub>\n <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} ref={ref}>\n {icon ? <Icon name={icon} /> : null}\n {props.children}\n <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n </DropdownMenuPrimitive.SubTrigger>\n {subMenu()}\n </DropdownMenuPrimitive.Sub>\n );\n }\n\n const handleSelect = event => {\n if (onClick) {\n onClick(event);\n }\n\n if (props['aria-haspopup'] \|\| typeof dialog === 'function' \|\| typeof popover === 'function') {\n event.preventDefault();\n }\n };\n\n let button = (\n <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n {icon ? <Icon name={icon} /> : null}\n {props.children}\n {shortcut ? (\n <span className=\"ml-auto pl-5\">\n <Shortcut keys={shortcut} className=\"text-grey-700\" />\n </span>\n ) : null}\n </DropdownMenuPrimitive.Item>\n );\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button, onClose: menu?.close });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Navigation/Navigation.js CHANGED Viewed

@@ -94,10 +94,10 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
   return /*#__PURE__*/React__default.createElement(Treeview, Object.assign({}, props, {
     className: cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
-  }), scrollableAreas.map((area, i) => Array.isArray(area) ? /*#__PURE__*/React__default.createElement("div", {
+  }), scrollableAreas.map((area, i) => Array.isArray(area) ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
     key: i
-  }, area) : area));
+  }, area)) : area));
 });
 Menu.Group = MenuGroup;
 const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {

package/dist/esm/packages/taco/src/components/Navigation/Navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.js","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n /** Change the style to indicate the link is selected /\n active?: boolean;\n /* Handler to be used when dropping a dragged element over the navigation link /\n onDrop?: React.DragEventHandler;\n /\n Small amount of information placed next to the text of the link.\n * This can be any valid react element, for e.g. a `span`.\n * Should be used to indicate a relevant information of the link,\n * for e.g. the number of unread notifications\n /\n postfix?: React.ReactNode;\n /\n Small amount of information placed before the text of the link.\n * This can be any valid react element, for e.g. a `span`.\n * Should be used to indicate a feedback for user,\n * for e.g. display some sort of visual informational state or a relevant icon.\n /\n prefix?: React.ReactNode;\n /* Target of the link /\n target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n const proxyRef = useMergedRef<HTMLAnchorElement>(ref);\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n const isTreeitem = role === 'treeitem';\n const className = cn(\n 'yt-navigation__item cursor-pointer',\n {\n 'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,\n 'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n 'yt-navigation__item--active': active && !isDraggedOver,\n 'bg-grey-300': isTreeitem && active && !isDraggedOver,\n 'yt-navigation__item--dropping bg-blue-500': isDraggedOver,\n },\n props.className\n );\n\n const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n if (event.target instanceof HTMLAnchorElement \|\| event.target instanceof HTMLButtonElement) {\n return;\n }\n\n if (proxyRef.current) {\n proxyRef.current.click();\n }\n };\n\n return (\n <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n {children}\n </a>\n {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n </span>\n );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn(\n 'flex-shrink-0 space-y-1 outline-none',\n {\n 'bg-white pb-2': props.fixed,\n },\n typeof props.className === 'function' ? props.className(false) : props.className\n );\n const title = (expanded: boolean): JSX.Element => {\n const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n 'mb-1': expanded,\n 'cursor-pointer hover:text-blue-500': !props.fixed,\n });\n\n return (\n <span className={className}>\n {typeof props.title === 'function' ? props.title(expanded) : props.title}\n {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n </span>\n );\n };\n\n return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n /* Expandable region reprezenting a group of related links /\n Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n const scrollableAreas = React.useMemo(() => {\n const scrollableAreas: React.ReactNode[] = [];\n\n const children = React.Children.toArray(props.children).filter(\n child => !!child\n ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n children.forEach(child => {\n if (child.props.fixed) {\n scrollableAreas.push(child);\n } else {\n const x = scrollableAreas[scrollableAreas.length - 1];\n if (Array.isArray(x)) {\n x.push(child);\n } else {\n scrollableAreas.push([child]);\n }\n }\n });\n\n return scrollableAreas;\n }, [props.children]);\n\n return (\n <Treeview\n {...props}\n className={cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n ref={ref}>\n {scrollableAreas.map((area, i) =>\n Array.isArray(area) ? (\n <div\n className=\"divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n key={i}>\n {area}\n </div>\n ) : (\n area\n )\n )}\n </Treeview>\n );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n /* Navigation link /\n Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n /\n Container for the expandable groups that hold navigation links.\n * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n /\n Menu: ForwardedNavigationMenuWithStatics;\n /\n Isolated container within the Navigation.\n * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n * containing useful information for user and quick actions\n */\n Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n {children}\n </div>\n );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useMergedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}
1	+ {"version":3,"file":"Navigation.js","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n /** Change the style to indicate the link is selected /\n active?: boolean;\n /* Handler to be used when dropping a dragged element over the navigation link /\n onDrop?: React.DragEventHandler;\n /\n Small amount of information placed next to the text of the link.\n * This can be any valid react element, for e.g. a `span`.\n * Should be used to indicate a relevant information of the link,\n * for e.g. the number of unread notifications\n /\n postfix?: React.ReactNode;\n /\n Small amount of information placed before the text of the link.\n * This can be any valid react element, for e.g. a `span`.\n * Should be used to indicate a feedback for user,\n * for e.g. display some sort of visual informational state or a relevant icon.\n /\n prefix?: React.ReactNode;\n /* Target of the link /\n target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n const proxyRef = useMergedRef<HTMLAnchorElement>(ref);\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n const isTreeitem = role === 'treeitem';\n const className = cn(\n 'yt-navigation__item cursor-pointer',\n {\n 'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,\n 'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n 'yt-navigation__item--active': active && !isDraggedOver,\n 'bg-grey-300': isTreeitem && active && !isDraggedOver,\n 'yt-navigation__item--dropping bg-blue-500': isDraggedOver,\n },\n props.className\n );\n\n const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n if (event.target instanceof HTMLAnchorElement \|\| event.target instanceof HTMLButtonElement) {\n return;\n }\n\n if (proxyRef.current) {\n proxyRef.current.click();\n }\n };\n\n return (\n <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n {children}\n </a>\n {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n </span>\n );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn(\n 'flex-shrink-0 space-y-1 outline-none',\n {\n 'bg-white pb-2': props.fixed,\n },\n typeof props.className === 'function' ? props.className(false) : props.className\n );\n const title = (expanded: boolean): JSX.Element => {\n const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n 'mb-1': expanded,\n 'cursor-pointer hover:text-blue-500': !props.fixed,\n });\n\n return (\n <span className={className}>\n {typeof props.title === 'function' ? props.title(expanded) : props.title}\n {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n </span>\n );\n };\n\n return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n /* Expandable region reprezenting a group of related links /\n Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n const scrollableAreas = React.useMemo(() => {\n const scrollableAreas: React.ReactNode[] = [];\n\n const children = React.Children.toArray(props.children).filter(\n child => !!child\n ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n children.forEach(child => {\n if (child.props.fixed) {\n scrollableAreas.push(child);\n } else {\n const x = scrollableAreas[scrollableAreas.length - 1];\n if (Array.isArray(x)) {\n x.push(child);\n } else {\n scrollableAreas.push([child]);\n }\n }\n });\n\n return scrollableAreas;\n }, [props.children]);\n\n return (\n <Treeview\n {...props}\n className={cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n ref={ref}>\n {scrollableAreas.map((area, i) =>\n Array.isArray(area) ? (\n <div\n className=\"divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n key={i}>\n {area}\n </div>\n ) : (\n area\n )\n )}\n </Treeview>\n );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n /* Navigation link /\n Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n /\n Container for the expandable groups that hold navigation links.\n * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n /\n Menu: ForwardedNavigationMenuWithStatics;\n /\n Isolated container within the Navigation.\n * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n * containing useful information for user and quick actions\n */\n Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n {children}\n </div>\n );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useMergedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":";;;;;;;AAgCA,MAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAIA,CAACG,KAA0B,EAAEC,GAAiC;EACrG,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChF,MAAMS,QAAQ,GAAGC,YAAY,CAAoBT,GAAG,CAAC;EACrD,MAAM,CAACU,aAAa,EAAEC,eAAe,CAAC,GAAGC,aAAa,CAACT,MAAM,CAAC;EAC9D,MAAMU,UAAU,GAAGP,IAAI,KAAK,UAAU;EACtC,MAAMQ,SAAS,GAAGC,EAAE,CAChB,oCAAoC,EACpC;IACI,4DAA4D,EAAEF,UAAU;IACxE,0FAA0F,EAAE,CAACA,UAAU;IACvG,6BAA6B,EAAEZ,MAAM,IAAI,CAACS,aAAa;IACvD,aAAa,EAAEG,UAAU,IAAIZ,MAAM,IAAI,CAACS,aAAa;IACrD,2CAA2C,EAAEA;GAChD,EACDX,KAAK,CAACe,SAAS,CAClB;EAED,MAAME,WAAW,GAAIC,KAAwC;IACzD,IAAIA,KAAK,CAACC,MAAM,YAAYC,iBAAiB,IAAIF,KAAK,CAACC,MAAM,YAAYE,iBAAiB,EAAE;MACxF;;IAGJ,IAAIZ,QAAQ,CAACa,OAAO,EAAE;MAClBb,QAAQ,CAACa,OAAO,CAACC,KAAK,EAAE;;GAE/B;EAED,oBACIzB,uDAAUc,eAAe;IAAEG,SAAS,EAAEA,SAAS;IAAES,OAAO,EAAEP,WAAW;IAAEV,IAAI,EAAEA;MACxED,MAAM,iBAAIR;IAAMiB,SAAS,EAAC;KAAiDT,MAAM,CAAQ,eAC1FR,oDAAOU,UAAU;IAAEO,SAAS,EAAC,0BAA0B;IAACd,GAAG,EAAEQ;MACxDN,QAAQ,CACT,EACHE,OAAO,iBAAIP;IAAMiB,SAAS,EAAC;KAAqCV,OAAO,CAAQ,CAC7E;AAEf,CAAC,CAAC;AAKF,MAAMoB,KAAK,gBAAG3B,cAAK,CAACC,UAAU,CAAC,SAAS0B,KAAKA,CAACzB,KAA2B,EAAEC,GAA8B;EACrG,oBAAOH,sDAASE,KAAK;IAAEe,SAAS,EAAEC,EAAE,CAAC,qBAAqB,EAAEhB,KAAK,CAACe,SAAS,CAAC;IAAEd,GAAG,EAAEA;KAAO;AAC9F,CAAC,CAAC;AAKF,MAAMyB,SAAS,gBAAG5B,cAAK,CAACC,UAAU,CAAC,SAAS2B,SAASA,CAAC1B,KAA+B,EAAEC,GAA8B;EACjH,MAAMc,SAAS,GAAGC,EAAE,CAChB,sCAAsC,EACtC;IACI,eAAe,EAAEhB,KAAK,CAAC2B;GAC1B,EACD,OAAO3B,KAAK,CAACe,SAAS,KAAK,UAAU,GAAGf,KAAK,CAACe,SAAS,CAAC,KAAK,CAAC,GAAGf,KAAK,CAACe,SAAS,CACnF;EACD,MAAMa,KAAK,GAAIC,QAAiB;IAC5B,MAAMd,SAAS,GAAGC,EAAE,CAAC,kEAAkE,EAAE;MACrF,MAAM,EAAEa,QAAQ;MAChB,oCAAoC,EAAE,CAAC7B,KAAK,CAAC2B;KAChD,CAAC;IAEF,oBACI7B;MAAMiB,SAAS,EAAEA;OACZ,OAAOf,KAAK,CAAC4B,KAAK,KAAK,UAAU,GAAG5B,KAAK,CAAC4B,KAAK,CAACC,QAAQ,CAAC,GAAG7B,KAAK,CAAC4B,KAAK,EACvE,CAAC5B,KAAK,CAAC2B,KAAK,iBAAI7B,6BAACgC,IAAI;MAACC,IAAI,EAAEF,QAAQ,GAAG,YAAY,GAAG;MAAkB,CACtE;GAEd;EAED,oBAAO/B,6BAACkC,QAAQ,CAACC,KAAK,oBAAKjC,KAAK;IAAEe,SAAS,EAAEA,SAAS;IAAEa,KAAK,EAAEA,KAAK;IAAE3B,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;AAYF,MAAMiC,IAAI,gBAAGpC,cAAK,CAACC,UAAU,CAAC,SAASmC,IAAIA,CAAClC,KAA0B,EAAEC,GAA8B;EAClG,MAAMkC,eAAe,GAAGrC,cAAK,CAACsC,OAAO,CAAC;IAClC,MAAMD,eAAe,GAAsB,EAAE;IAE7C,MAAMhC,QAAQ,GAAGL,cAAK,CAACuC,QAAQ,CAACC,OAAO,CAACtC,KAAK,CAACG,QAAQ,CAAC,CAACoC,MAAM,CAC1DC,KAAK,IAAI,CAAC,CAACA,KAAK,CAC+B;IAEnDrC,QAAQ,CAACsC,OAAO,CAACD,KAAK;MAClB,IAAIA,KAAK,CAACxC,KAAK,CAAC2B,KAAK,EAAE;QACnBQ,eAAe,CAACO,IAAI,CAACF,KAAK,CAAC;OAC9B,MAAM;QACH,MAAMG,CAAC,GAAGR,eAAe,CAACA,eAAe,CAACS,MAAM,GAAG,CAAC,CAAC;QACrD,IAAIC,KAAK,CAACC,OAAO,CAACH,CAAC,CAAC,EAAE;UAClBA,CAAC,CAACD,IAAI,CAACF,KAAK,CAAC;SAChB,MAAM;UACHL,eAAe,CAACO,IAAI,CAAC,CAACF,KAAK,CAAC,CAAC;;;KAGxC,CAAC;IAEF,OAAOL,eAAe;GACzB,EAAE,CAACnC,KAAK,CAACG,QAAQ,CAAC,CAAC;EAEpB,oBACIL,6BAACkC,QAAQ,oBACDhC,KAAK;IACTe,SAAS,EAAEC,EAAE,CAAC,oEAAoE,EAAEhB,KAAK,CAACe,SAAS,CAAC;IACpGd,GAAG,EAAEA;MACJkC,eAAe,CAACY,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,KACzBJ,KAAK,CAACC,OAAO,CAACE,IAAI,CAAC,kBACflD;IACIiB,SAAS,EAAC,gGAAgG;IAC1GmC,GAAG,EAAED;KACJD,IAAI,CACH,IAENA,IACH,CACJ,CACM;AAEnB,CAAC,CAAuC;AAExCd,IAAI,CAACD,KAAK,GAAGP,SAAS;MAwBTyB,UAAU,gBAAGrD,cAAK,CAACC,UAAU,CAAC,SAASoD,UAAUA,CAACnD,KAAsB,EAAEC,GAA8B;EACjH,MAAM;IAAEE,QAAQ;IAAE,GAAGK;GAAY,GAAGR,KAAK;EACzC,MAAMe,SAAS,GAAGC,EAAE,CAAC,6DAA6D,EAAEhB,KAAK,CAACe,SAAS,CAAC;EAEpG,oBACIjB,sDAASU,UAAU;IAAEO,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACd,GAAG,EAAEA;MAClEE,QAAQ,CACP;AAEd,CAAC;AAEDgD,UAAU,CAACjB,IAAI,GAAGA,IAAI;AACtBiB,UAAU,CAACtD,IAAI,GAAGA,IAAI;AACtBsD,UAAU,CAAC1B,KAAK,GAAGA,KAAK;;;;"}

package/dist/esm/packages/taco/src/components/Navigation2/components/Link.js CHANGED Viewed

@@ -47,7 +47,7 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
     name: icon
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-grow items-center truncate"
-  }, children), menu ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, children), menu ? ( /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     icon: "more",
     "aria-label": "More",
@@ -60,12 +60,12 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
       event.preventDefault();
       event.stopPropagation();
     }
-  }) : null, total !== undefined ? /*#__PURE__*/React__default.createElement(Badge, {
+  })) : null, total !== undefined ? ( /*#__PURE__*/React__default.createElement(Badge, {
     className: cn('flex-shrink-0 flex-grow-0 !font-normal', {
       'group-hover:hidden [[aria-expanded="true"]+&]:hidden ': menu
     }),
     color: "transparent"
-  }, total) : null));
+  }, total)) : null));
 });
 export { Link, getNavigationLinkClasses };

package/dist/esm/packages/taco/src/components/Navigation2/components/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n cn(\n 'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n // override styles for links that are children of collapsible menus\n 'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n // override styles to adjust icons included in menu links\n '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n // override styles to adjust badges included in menu links\n '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n {\n 'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n '!bg-blue-500 !text-white [&>]:!text-white': isDraggedOver,\n }\n );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n active?: boolean;\n icon?: IconName;\n /* Menu component associated with the button. /\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /* Handler to be used when dropping a dragged element over the Navigation2 link /\n onDrop?: React.DragEventHandler;\n /* Total shown inside a Badge component /\n total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n const listClassName = cn('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {\n '[&>]:pointer-events-none': isDraggedOver,\n });\n\n return (\n <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n <a\n {...attributes}\n aria-current={active ? 'page' : undefined}\n className={className}\n data-taco=\"navigation2-link\"\n ref={ref}\n role=\"menuitem\"\n tabIndex={0}>\n {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.5\" name={icon} /> : null}\n <span className=\"flex flex-grow items-center truncate\">{children}</span>\n {menu ? (\n <IconButton\n appearance=\"discrete\"\n icon=\"more\"\n aria-label=\"More\"\n rounded\n className={cn(\n '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n {\n 'absolute right-0 !mr-0.5': total !== undefined,\n }\n )}\n menu={menu}\n onClick={event => {\n event.preventDefault();\n event.stopPropagation();\n }}\n />\n ) : null}\n {total !== undefined ? (\n <Badge\n className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n 'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n })}\n color=\"transparent\">\n {total}\n </Badge>\n ) : null}\n </a>\n </li>\n );\n});\n"],"names":["getNavigationLinkClasses","isDraggedOver","cn","Link","React","forwardRef","props","ref","active","children","icon","menu","onDrop","total","attributes","dropTargetProps","useDropTarget","className","listClassName","getAdjacentClasses","role","undefined","tabIndex","Icon","name","IconButton","appearance","rounded","onClick","event","preventDefault","stopPropagation","Badge","color"],"mappings":";;;;;;;;MASaA,wBAAwB,GAAGA,CAACC,aAAa,GAAG,KAAK,KAC1DC,EAAE,CACE,wGAAwG;AACxG;AACA,kEAAkE;AAClE;AACA,yDAAyD;AACzD;AACA,sFAAsF,EACtF;EACI,yDAAyD,EAAE,CAACD,aAAa;EACzE,4CAA4C,EAAEA;CACjD;MAcIE,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA0C,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EAClG,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC5E,MAAM,CAACL,aAAa,EAAEc,eAAe,CAAC,GAAGC,aAAa,CAACJ,MAAM,CAAC;EAE9D,MAAMK,SAAS,GAAGf,EAAE,CAACF,wBAAwB,CAACC,aAAa,CAAC,EAAEa,UAAU,CAACG,SAAS,CAAC;EAEnF,MAAMC,aAAa,GAAGhB,EAAE,CAAC,yCAAyC,EAAEiB,kBAAkB,EAAE,EAAE;IACtF,2BAA2B,EAAElB;GAChC,CAAC;EAEF,oBACIG,qDAAQW,eAAe;IAAEE,SAAS,EAAEC,aAAa;iBAAY,uBAAuB;IAACE,IAAI,EAAC;mBACtFhB,oDACQU,UAAU;oBACAN,MAAM,GAAG,MAAM,GAAGa,SAAS;IACzCJ,SAAS,EAAEA,SAAS;iBACV,kBAAkB;IAC5BV,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,UAAU;IACfE,QAAQ,EAAE;MACTZ,IAAI,gBAAGN,6BAACmB,IAAI;IAACN,SAAS,EAAC,iEAAiE;IAACO,IAAI,EAAEd;IAAQ,GAAG,IAAI,eAC/GN;IAAMa,SAAS,EAAC;KAAwCR,QAAQ,CAAQ,EACvEE,IAAI,~~gBACDP~~,6BAACqB,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBhB,IAAI,EAAC,MAAM;kBACA,MAAM;IACjBiB,OAAO;IACPV,SAAS,EAAEf,EAAE,CACT,8FAA8F,EAC9F;MACI,0BAA0B,EAAEW,KAAK,KAAKQ;KACzC,CACJ;IACDV,IAAI,EAAEA,IAAI;IACViB,OAAO,EAAEC,KAAK;MACVA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;;IAE7B,~~GACF~~,IAAI,EACPlB,KAAK,KAAKQ,SAAS,~~gBAChBjB~~,6BAAC4B,KAAK;IACFf,SAAS,EAAEf,EAAE,CAAC,wCAAwC,EAAE;MACpD,uDAAuD,EAAES;KAC5D,CAAC;IACFsB,KAAK,EAAC;KACLpB,KAAK,CACF,~~GACR~~,IAAI,CACR,CACH;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n cn(\n 'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n // override styles for links that are children of collapsible menus\n 'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n // override styles to adjust icons included in menu links\n '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n // override styles to adjust badges included in menu links\n '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n {\n 'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n '!bg-blue-500 !text-white [&>]:!text-white': isDraggedOver,\n }\n );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n active?: boolean;\n icon?: IconName;\n /* Menu component associated with the button. /\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /* Handler to be used when dropping a dragged element over the Navigation2 link /\n onDrop?: React.DragEventHandler;\n /* Total shown inside a Badge component /\n total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n const listClassName = cn('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {\n '[&>]:pointer-events-none': isDraggedOver,\n });\n\n return (\n <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n <a\n {...attributes}\n aria-current={active ? 'page' : undefined}\n className={className}\n data-taco=\"navigation2-link\"\n ref={ref}\n role=\"menuitem\"\n tabIndex={0}>\n {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.5\" name={icon} /> : null}\n <span className=\"flex flex-grow items-center truncate\">{children}</span>\n {menu ? (\n <IconButton\n appearance=\"discrete\"\n icon=\"more\"\n aria-label=\"More\"\n rounded\n className={cn(\n '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n {\n 'absolute right-0 !mr-0.5': total !== undefined,\n }\n )}\n menu={menu}\n onClick={event => {\n event.preventDefault();\n event.stopPropagation();\n }}\n />\n ) : null}\n {total !== undefined ? (\n <Badge\n className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n 'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n })}\n color=\"transparent\">\n {total}\n </Badge>\n ) : null}\n </a>\n </li>\n );\n});\n"],"names":["getNavigationLinkClasses","isDraggedOver","cn","Link","React","forwardRef","props","ref","active","children","icon","menu","onDrop","total","attributes","dropTargetProps","useDropTarget","className","listClassName","getAdjacentClasses","role","undefined","tabIndex","Icon","name","IconButton","appearance","rounded","onClick","event","preventDefault","stopPropagation","Badge","color"],"mappings":";;;;;;;;MASaA,wBAAwB,GAAGA,CAACC,aAAa,GAAG,KAAK,KAC1DC,EAAE,CACE,wGAAwG;AACxG;AACA,kEAAkE;AAClE;AACA,yDAAyD;AACzD;AACA,sFAAsF,EACtF;EACI,yDAAyD,EAAE,CAACD,aAAa;EACzE,4CAA4C,EAAEA;CACjD;MAcIE,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA0C,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EAClG,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC5E,MAAM,CAACL,aAAa,EAAEc,eAAe,CAAC,GAAGC,aAAa,CAACJ,MAAM,CAAC;EAE9D,MAAMK,SAAS,GAAGf,EAAE,CAACF,wBAAwB,CAACC,aAAa,CAAC,EAAEa,UAAU,CAACG,SAAS,CAAC;EAEnF,MAAMC,aAAa,GAAGhB,EAAE,CAAC,yCAAyC,EAAEiB,kBAAkB,EAAE,EAAE;IACtF,2BAA2B,EAAElB;GAChC,CAAC;EAEF,oBACIG,qDAAQW,eAAe;IAAEE,SAAS,EAAEC,aAAa;iBAAY,uBAAuB;IAACE,IAAI,EAAC;mBACtFhB,oDACQU,UAAU;oBACAN,MAAM,GAAG,MAAM,GAAGa,SAAS;IACzCJ,SAAS,EAAEA,SAAS;iBACV,kBAAkB;IAC5BV,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,UAAU;IACfE,QAAQ,EAAE;MACTZ,IAAI,gBAAGN,6BAACmB,IAAI;IAACN,SAAS,EAAC,iEAAiE;IAACO,IAAI,EAAEd;IAAQ,GAAG,IAAI,eAC/GN;IAAMa,SAAS,EAAC;KAAwCR,QAAQ,CAAQ,EACvEE,IAAI,kBACDP,6BAACqB,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBhB,IAAI,EAAC,MAAM;kBACA,MAAM;IACjBiB,OAAO;IACPV,SAAS,EAAEf,EAAE,CACT,8FAA8F,EAC9F;MACI,0BAA0B,EAAEW,KAAK,KAAKQ;KACzC,CACJ;IACDV,IAAI,EAAEA,IAAI;IACViB,OAAO,EAAEC,KAAK;MACVA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;;IAE7B,IACF,IAAI,EACPlB,KAAK,KAAKQ,SAAS,kBAChBjB,6BAAC4B,KAAK;IACFf,SAAS,EAAEf,EAAE,CAAC,wCAAwC,EAAE;MACpD,uDAAuD,EAAES;KAC5D,CAAC;IACFsB,KAAK,EAAC;KACLpB,KAAK,CACF,IACR,IAAI,CACR,CACH;AAEb,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Navigation2/components/Section.js CHANGED Viewed

@@ -14,9 +14,9 @@ const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(prop
     "data-taco": "navigation2-section",
     ref: ref,
     role: "none"
-  }), heading ? /*#__PURE__*/React__default.createElement("span", {
+  }), heading ? ( /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 lg:hidden"
-  }, heading) : null, /*#__PURE__*/React__default.createElement("ul", {
+  }, heading)) : null, /*#__PURE__*/React__default.createElement("ul", {
     className: "mb-0 flex flex-col gap-y-px"
   }, children));
 });

package/dist/esm/packages/taco/src/components/Navigation2/components/Section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.js","sources":["../../../../../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n const { children, heading, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto px-3 py-2 flex-grow border-grey-200 bg-grey-50 [[role=menubar]>&:first-child]:pt-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n {heading ? (\n <span className=\"text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 lg:hidden\">\n {heading}\n </span>\n ) : null}\n <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n </li>\n );\n});\n"],"names":["Section","React","forwardRef","Navigation2","props","ref","children","heading","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAQaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChB,yGAAyG,EACzGC,kBAAkB,EAAE,EACpBP,KAAK,CAACK,SAAS,CAClB;EAED,oBACIR,qDAAQO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACJ,GAAG,EAAEA,GAAG;IAAEO,IAAI,EAAC;MACpFL,OAAO,~~gBACJN~~;IAAMQ,SAAS,EAAC;KACXF,OAAO,CACL,~~GACP~~,IAAI,eACRN;IAAIQ,SAAS,EAAC;KAA+BH,QAAQ,CAAM,CAC1D;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Section.js","sources":["../../../../../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n const { children, heading, ...attributes } = props;\n const className = cn(\n 'w-full overflow-auto px-3 py-2 flex-grow border-grey-200 bg-grey-50 [[role=menubar]>&:first-child]:pt-0',\n getAdjacentClasses(),\n props.className\n );\n\n return (\n <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n {heading ? (\n <span className=\"text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 lg:hidden\">\n {heading}\n </span>\n ) : null}\n <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n </li>\n );\n});\n"],"names":["Section","React","forwardRef","Navigation2","props","ref","children","heading","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAQaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChB,yGAAyG,EACzGC,kBAAkB,EAAE,EACpBP,KAAK,CAACK,SAAS,CAClB;EAED,oBACIR,qDAAQO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACJ,GAAG,EAAEA,GAAG;IAAEO,IAAI,EAAC;MACpFL,OAAO,kBACJN;IAAMQ,SAAS,EAAC;KACXF,OAAO,CACL,IACP,IAAI,eACRN;IAAIQ,SAAS,EAAC;KAA+BH,QAAQ,CAAM,CAC1D;AAEb,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js CHANGED Viewed

@@ -66,7 +66,7 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
     className: cn('sticky right-0 order-[99]', button.props.className),
     'data-observer-ignore': true,
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem))),
+    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
     ref: buttonRefCallback
   }) : null);
 });

package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n const href: string \| undefined = button.props.to \|\| button.props.href;\n const Tag = href ? Menu.Link : Menu.Item;\n\n // Removing className prop so that custom styling cannot be applied on Menu.Link\n const {\n as,\n className: _,\n appearance: _1,\n drawer: _2,\n fluid: _3,\n hanger: _4,\n menu: _5,\n popover: _6,\n tooltip: _7,\n ...attributes\n } = button.props;\n\n const props = {\n ...attributes,\n key: index,\n target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n };\n\n if (as) {\n return React.cloneElement(button, { as: Tag, ...props });\n }\n\n return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n moreButton?: React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n const { moreButton: MoreButton, ...attributes } = props;\n const internalRef = useMergedRef<HTMLDivElement>(ref);\n // determine width of more button, to add intersection observer margin\n const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n const button = MoreButton ?? <IconButton icon=\"more\" />;\n\n const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n const className = cn('flex overflow-hidden', props.className);\n\n return (\n <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n {children.map((child, index) =>\n React.cloneElement(child, {\n className: cn(child.props.className, {\n visible: intersectedChildIndex === undefined \|\| index < intersectedChildIndex,\n 'invisible order-[100] pointer-events-none':\n intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n }),\n })\n )}\n {hiddenChildren.length\n ? React.cloneElement(button, {\n className: cn('sticky right-0 order-[99]', button.props.className),\n 'data-observer-ignore': true,\n menu: menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n </Menu>\n ),\n ref: buttonRefCallback,\n })\n : null}\n </div>\n );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","MoreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","IconButton","icon","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","cn","map","child","visible","length","menuProps","Content"],"mappings":"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~~iBACXjC~~,6BAACzB,IAAI,oBAAK0D,SAAS,gBACfjC,6BAACzB,IAAI,CAAC2D,OAAO,QAAER,cAAc,CAACG,GAAG,CAAC7D,8BAA8B,CAAC,CAAgB,~~CAExF~~;IACDqC,GAAG,EAAEQ;GACR,CAAC,GACF,IAAI,CACR;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n const href: string \| undefined = button.props.to \|\| button.props.href;\n const Tag = href ? Menu.Link : Menu.Item;\n\n // Removing className prop so that custom styling cannot be applied on Menu.Link\n const {\n as,\n className: _,\n appearance: _1,\n drawer: _2,\n fluid: _3,\n hanger: _4,\n menu: _5,\n popover: _6,\n tooltip: _7,\n ...attributes\n } = button.props;\n\n const props = {\n ...attributes,\n key: index,\n target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n };\n\n if (as) {\n return React.cloneElement(button, { as: Tag, ...props });\n }\n\n return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n moreButton?: React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n const { moreButton: MoreButton, ...attributes } = props;\n const internalRef = useMergedRef<HTMLDivElement>(ref);\n // determine width of more button, to add intersection observer margin\n const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n const button = MoreButton ?? <IconButton icon=\"more\" />;\n\n const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n const className = cn('flex overflow-hidden', props.className);\n\n return (\n <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n {children.map((child, index) =>\n React.cloneElement(child, {\n className: cn(child.props.className, {\n visible: intersectedChildIndex === undefined \|\| index < intersectedChildIndex,\n 'invisible order-[100] pointer-events-none':\n intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n }),\n })\n )}\n {hiddenChildren.length\n ? React.cloneElement(button, {\n className: cn('sticky right-0 order-[99]', button.props.className),\n 'data-observer-ignore': true,\n menu: menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n </Menu>\n ),\n ref: buttonRefCallback,\n })\n : null}\n </div>\n );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","MoreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","IconButton","icon","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","cn","map","child","visible","length","menuProps","Content"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Pagination/PageNumbers.js CHANGED Viewed

@@ -30,14 +30,14 @@ const PageNumbers = ({
   const {
     texts
   } = useLocalization();
-  return /*#__PURE__*/createElement(Fragment, null, range.map(pageNumber => /*#__PURE__*/createElement(Button, {
+  return /*#__PURE__*/createElement(Fragment, null, range.map(pageNumber => ( /*#__PURE__*/createElement(Button, {
     appearance: pageNumber === currentPageIndex + 1 ? 'primary' : 'default',
     "aria-current": pageNumber === currentPageIndex + 1 ? 'page' : undefined,
     key: pageNumber,
     onClick: () => handleClick(pageNumber - 1),
     "aria-label": texts.pagination.actions.pageX.replace('[X]', String(pageNumber)),
     tooltip: texts.pagination.actions.pageX.replace('[X]', String(pageNumber))
-  }, pageNumber)));
+  }, pageNumber))));
 };
 export { PageNumbers };

package/dist/esm/packages/taco/src/components/Pagination/PageNumbers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageNumbers.js","sources":["../../../../../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '../Button/Button';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n currentPageIndex: number;\n onClick: (pageIndex: number) => void;\n pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n let lowerLimit = Math.min(pageNumber, pageCount);\n let upperLimit = Math.min(pageNumber, pageCount);\n\n for (let b = 1; b < 5 && b < pageCount; ) {\n if (lowerLimit > 1) {\n lowerLimit--;\n b++;\n }\n if (b < 5 && upperLimit < pageCount) {\n upperLimit++;\n b++;\n }\n }\n\n const range: number[] = [];\n\n for (let i = lowerLimit; i <= upperLimit; i++) {\n range.push(i);\n }\n\n return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n const range = createPageRange(pageCount, currentPageIndex + 1);\n const { texts } = useLocalization();\n\n return (\n <>\n {range.map((pageNumber: number) => (\n <Button\n appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n key={pageNumber}\n onClick={() => handleClick(pageNumber - 1)}\n aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n {pageNumber}\n </Button>\n ))}\n </>\n );\n};\n"],"names":["createPageRange","pageCount","pageNumber","lowerLimit","Math","min","upperLimit","b","range","i","push","PageNumbers","currentPageIndex","onClick","handleClick","texts","useLocalization","React","map","Button","appearance","undefined","key","pagination","actions","pageX","replace","String","tooltip"],"mappings":";;;;AAUA,MAAMA,eAAe,GAAGA,CAACC,SAAiB,EAAEC,UAAkB;EAC1D,IAAIC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACH,UAAU,EAAED,SAAS,CAAC;EAChD,IAAIK,UAAU,GAAGF,IAAI,CAACC,GAAG,CAACH,UAAU,EAAED,SAAS,CAAC;EAEhD,KAAK,IAAIM,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,IAAIA,CAAC,GAAGN,SAAS,GAAI;IACtC,IAAIE,UAAU,GAAG,CAAC,EAAE;MAChBA,UAAU,EAAE;MACZI,CAAC,EAAE;;IAEP,IAAIA,CAAC,GAAG,CAAC,IAAID,UAAU,GAAGL,SAAS,EAAE;MACjCK,UAAU,EAAE;MACZC,CAAC,EAAE;;;EAIX,MAAMC,KAAK,GAAa,EAAE;EAE1B,KAAK,IAAIC,CAAC,GAAGN,UAAU,EAAEM,CAAC,IAAIH,UAAU,EAAEG,CAAC,EAAE,EAAE;IAC3CD,KAAK,CAACE,IAAI,CAACD,CAAC,CAAC;;EAGjB,OAAOD,KAAK;AAChB,CAAC;MAEYG,WAAW,GAAGA,CAAC;EAAEC,gBAAgB,GAAG,CAAC;EAAEC,OAAO,EAAEC,WAAW;EAAEb;CAA4B;EAClG,MAAMO,KAAK,GAAGR,eAAe,CAACC,SAAS,EAAEW,gBAAgB,GAAG,CAAC,CAAC;EAC9D,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC,8BACKT,KAAK,CAACU,GAAG,CAAEhB,UAAkB,~~iBAC1Be~~,cAACE,MAAM;IACHC,UAAU,EAAElB,UAAU,KAAKU,gBAAgB,GAAG,CAAC,GAAG,SAAS,GAAG,SAAS;oBACzDV,UAAU,KAAKU,gBAAgB,GAAG,CAAC,GAAG,MAAM,GAAGS,SAAS;IACtEC,GAAG,EAAEpB,UAAU;IACfW,OAAO,EAAEA,MAAMC,WAAW,CAACZ,UAAU,GAAG,CAAC,CAAC;kBAC9Ba,KAAK,CAACQ,UAAU,CAACC,OAAO,CAACC,KAAK,CAACC,OAAO,CAAC,KAAK,EAAEC,MAAM,CAACzB,UAAU,CAAC,CAAC;IAC7E0B,OAAO,EAAEb,KAAK,CAACQ,UAAU,CAACC,OAAO,CAACC,KAAK,CAACC,OAAO,CAAC,KAAK,EAAEC,MAAM,CAACzB,UAAU,CAAC;KACxEA,UAAU,~~CAElB~~,CAAC,CACH;AAEX;;;;"}
1	+ {"version":3,"file":"PageNumbers.js","sources":["../../../../../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '../Button/Button';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n currentPageIndex: number;\n onClick: (pageIndex: number) => void;\n pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n let lowerLimit = Math.min(pageNumber, pageCount);\n let upperLimit = Math.min(pageNumber, pageCount);\n\n for (let b = 1; b < 5 && b < pageCount; ) {\n if (lowerLimit > 1) {\n lowerLimit--;\n b++;\n }\n if (b < 5 && upperLimit < pageCount) {\n upperLimit++;\n b++;\n }\n }\n\n const range: number[] = [];\n\n for (let i = lowerLimit; i <= upperLimit; i++) {\n range.push(i);\n }\n\n return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n const range = createPageRange(pageCount, currentPageIndex + 1);\n const { texts } = useLocalization();\n\n return (\n <>\n {range.map((pageNumber: number) => (\n <Button\n appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n key={pageNumber}\n onClick={() => handleClick(pageNumber - 1)}\n aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n {pageNumber}\n </Button>\n ))}\n </>\n );\n};\n"],"names":["createPageRange","pageCount","pageNumber","lowerLimit","Math","min","upperLimit","b","range","i","push","PageNumbers","currentPageIndex","onClick","handleClick","texts","useLocalization","React","map","Button","appearance","undefined","key","pagination","actions","pageX","replace","String","tooltip"],"mappings":";;;;AAUA,MAAMA,eAAe,GAAGA,CAACC,SAAiB,EAAEC,UAAkB;EAC1D,IAAIC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACH,UAAU,EAAED,SAAS,CAAC;EAChD,IAAIK,UAAU,GAAGF,IAAI,CAACC,GAAG,CAACH,UAAU,EAAED,SAAS,CAAC;EAEhD,KAAK,IAAIM,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,IAAIA,CAAC,GAAGN,SAAS,GAAI;IACtC,IAAIE,UAAU,GAAG,CAAC,EAAE;MAChBA,UAAU,EAAE;MACZI,CAAC,EAAE;;IAEP,IAAIA,CAAC,GAAG,CAAC,IAAID,UAAU,GAAGL,SAAS,EAAE;MACjCK,UAAU,EAAE;MACZC,CAAC,EAAE;;;EAIX,MAAMC,KAAK,GAAa,EAAE;EAE1B,KAAK,IAAIC,CAAC,GAAGN,UAAU,EAAEM,CAAC,IAAIH,UAAU,EAAEG,CAAC,EAAE,EAAE;IAC3CD,KAAK,CAACE,IAAI,CAACD,CAAC,CAAC;;EAGjB,OAAOD,KAAK;AAChB,CAAC;MAEYG,WAAW,GAAGA,CAAC;EAAEC,gBAAgB,GAAG,CAAC;EAAEC,OAAO,EAAEC,WAAW;EAAEb;CAA4B;EAClG,MAAMO,KAAK,GAAGR,eAAe,CAACC,SAAS,EAAEW,gBAAgB,GAAG,CAAC,CAAC;EAC9D,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC,8BACKT,KAAK,CAACU,GAAG,CAAEhB,UAAkB,mBAC1Be,cAACE,MAAM;IACHC,UAAU,EAAElB,UAAU,KAAKU,gBAAgB,GAAG,CAAC,GAAG,SAAS,GAAG,SAAS;oBACzDV,UAAU,KAAKU,gBAAgB,GAAG,CAAC,GAAG,MAAM,GAAGS,SAAS;IACtEC,GAAG,EAAEpB,UAAU;IACfW,OAAO,EAAEA,MAAMC,WAAW,CAACZ,UAAU,GAAG,CAAC,CAAC;kBAC9Ba,KAAK,CAACQ,UAAU,CAACC,OAAO,CAACC,KAAK,CAACC,OAAO,CAAC,KAAK,EAAEC,MAAM,CAACzB,UAAU,CAAC,CAAC;IAC7E0B,OAAO,EAAEb,KAAK,CAACQ,UAAU,CAACC,OAAO,CAACC,KAAK,CAACC,OAAO,CAAC,KAAK,EAAEC,MAAM,CAACzB,UAAU,CAAC;KACxEA,UAAU,CACN,CACZ,CAAC,CACH;AAEX;;;;"}