@ya-accelerators/nextjs-framework 0.0.92 → 0.0.94

package/dist/ui/layout/tab/index.jsx

@@ -3,23 +3,47 @@ export * from './content';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import { usePathname } from 'next/navigation';
+import { useId, useState } from 'react';
 import { Composite } from '../../composite';
 import { getBackgroundColorTypeClassName } from '../../theme';
 import { TabItem } from './component';
 const isShadowed = (allHrefs, href, pathname) => allHrefs.some((other) => other.length > href.length && pathname.startsWith(other));
-export const Tab = ({ items, title, children, className, contentClassName, }) => {
+export const Tab = (props) => {
     const pathname = usePathname();
-    const allHrefs = items.map((x) => x.href);
-    return (<div className={classNames('flex size-full flex-col overflow-y-scroll', getBackgroundColorTypeClassName('default'), className)}>
-      {title !== undefined && (<div className='mt-base'>
-          <Composite.PageTitle {...title}/>
+    const [activeIndex, setActiveIndex] = useState(0);
+    const idPrefix = useId();
+    const allHrefs = 'children' in props ? props.items.map((x) => x.href) : [];
+    return (<div className={classNames('flex size-full flex-col overflow-y-scroll', getBackgroundColorTypeClassName('default'), props.className)}>
+      {props.title !== undefined && (<div className='mt-base'>
+          <Composite.PageTitle {...props.title}/>
         </div>)}
-      <div className={classNames('flex h-fit w-full flex-col gap-base p-base', contentClassName)}>
-        <div className='flex w-full gap-md border-outline-default border-b'>
-          {items.map((x, i) => (<TabItem key={i} {...x} ignoreCurrent={isShadowed(allHrefs, x.href, pathname)}/>))}
+      <div className={classNames('flex h-fit w-full flex-col gap-base p-base', props.contentClassName)}>
+        <div role={'children' in props ? undefined : 'tablist'} onKeyDown={'children' in props
+            ? undefined
+            : (e) => {
+                const next = e.key === 'ArrowRight'
+                    ? (activeIndex + 1) % props.items.length
+                    : e.key === 'ArrowLeft'
+                        ? (activeIndex - 1 + props.items.length) % props.items.length
+                        : e.key === 'Home'
+                            ? 0
+                            : e.key === 'End'
+                                ? props.items.length - 1
+                                : undefined;
+                if (next === undefined) {
+                    return;
+                }
+                e.preventDefault();
+                setActiveIndex(next);
+                document.getElementById(`${idPrefix}-${next}`)?.focus();
+            }} className='flex w-full gap-md border-outline-default border-b'>
+          {'children' in props
+            ? props.items.map((x, i) => (<TabItem key={i} label={x.label} href={x.href} isCurrent={!isShadowed(allHrefs, x.href, pathname) &&
+                    (x.href === '/' ? pathname === '/' : pathname.startsWith(x.href))}/>))
+            : props.items.map((x, i) => (<TabItem key={i} label={x.label} isCurrent={i === activeIndex} id={`${idPrefix}-${i}`} controlsId={`${idPrefix}-panel`} onSelect={() => setActiveIndex(i)}/>))}
         </div>
-        <motion.main key={pathname} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
-          {children}
+        <motion.main key={'children' in props ? pathname : activeIndex} role={'children' in props ? undefined : 'tabpanel'} id={'children' in props ? undefined : `${idPrefix}-panel`} aria-labelledby={'children' in props ? undefined : `${idPrefix}-${activeIndex}`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
+          {'children' in props ? props.children : props.items[activeIndex]?.content}
         </motion.main>
       </div>
     </div>);

package/dist/ui/layout/tab/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../../src/ui/layout/tab/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,cAAc,WAAW,CAAA;AAEzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,UAAU,GAAG,CAAC,QAAkB,EAAE,IAAY,EAAE,QAAgB,EAAW,EAAE,CACjF,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;AAEpF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,GAOjB,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IACzC,OAAO,CACL,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,UAAU,CACnB,2CAA2C,EAC3C,+BAA+B,CAAC,SAAS,CAAC,EAC1C,SAAS,CACV,CAAC,CAEF;MAAA,CAAC,KAAK,KAAK,SAAS,IAAI,CACtB,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,CACtB;UAAA,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EACjC;QAAA,EAAE,GAAG,CAAC,CACP,CACD;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,4CAA4C,EAAE,gBAAgB,CAAC,CAAC,CACzF;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oDAAoD,CACjE;UAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAG,CAClF,CAAC,CACJ;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,MAAM,CAAC,IAAI,CACV,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CACxB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CACxB,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CACrB,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAE9B;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,MAAM,CAAC,IAAI,CACf;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../../src/ui/layout/tab/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ya-accelerators/nextjs-framework",
-  "version": "0.0.92",
+  "version": "0.0.94",
   "type": "module",
   "description": "",
   "author": "YA Technologies OÜ",