chili-ui 0.22.0 → 0.22.2

package/chili/components/Tabs/Tabs.tsx

@@ -21,15 +21,23 @@ export const Tabs = React.forwardRef((props: TabsProps, ref?: React.Ref<HTMLElem
     activeTabKey: activeTabKeyProp,
     children,
     className,
+    contentRender,
+    headingRender,
+    onChange,
     shouldScrollTabs,
     style,
     tabContentNode,
     tabRender,
+    wrapperRender,
+    ...restProps
   } = useProps(props);
 
   const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.tabs);
 
-  const [activeTabKeyState, setActiveTabKeyState] = React.useState<string | number>(0);
+  const [activeTabKeyState, setActiveTabKeyState] = React.useState<string | number>(() => {
+    const firstChild = React.Children.toArray(children).find(React.isValidElement);
+    return firstChild ? (firstChild.props as { tabKey?: string | number }).tabKey ?? 0 : 0;
+  });
 
   // if activeTabKey is not passed - work in uncontrolled mode
   const activeTabKey = isNil(activeTabKeyProp)
@@ -74,6 +82,7 @@ export const Tabs = React.forwardRef((props: TabsProps, ref?: React.Ref<HTMLElem
 
   return (
     <Wrapper
+      {...restProps}
       className={combinedClassNames}
       style={style as React.CSSProperties}
       ref={ref}

package/chili/components/Tabs/types.ts

@@ -90,6 +90,7 @@ export interface WrapperProps {
   style?: React.CSSProperties,
   ref?: React.Ref<HTMLElement>,
   children?: React.ReactNode,
+  [x: string]: unknown,
 }
 
 export interface ContentProps {

package/dist/components/Tabs/Tabs.js

@@ -1,4 +1,15 @@
 'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import isNil from 'lodash/isNil';
@@ -12,9 +23,13 @@ import { TabsContext } from './TabsContext';
 import { ArrowLeft, ArrowRight } from './ScrollArrows';
 import { Div } from '../Div';
 export const Tabs = React.forwardRef((props, ref) => {
-    const { theme: themeProp, activeTabKey: activeTabKeyProp, children, className, shouldScrollTabs, style, tabContentNode, tabRender, } = useProps(props);
+    const _a = useProps(props), { theme: themeProp, activeTabKey: activeTabKeyProp, children, className, contentRender, headingRender, onChange, shouldScrollTabs, style, tabContentNode, tabRender, wrapperRender } = _a, restProps = __rest(_a, ["theme", "activeTabKey", "children", "className", "contentRender", "headingRender", "onChange", "shouldScrollTabs", "style", "tabContentNode", "tabRender", "wrapperRender"]);
     const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.tabs);
-    const [activeTabKeyState, setActiveTabKeyState] = React.useState(0);
+    const [activeTabKeyState, setActiveTabKeyState] = React.useState(() => {
+        var _a;
+        const firstChild = React.Children.toArray(children).find(React.isValidElement);
+        return firstChild ? (_a = firstChild.props.tabKey) !== null && _a !== void 0 ? _a : 0 : 0;
+    });
     // if activeTabKey is not passed - work in uncontrolled mode
     const activeTabKey = isNil(activeTabKeyProp)
         ? activeTabKeyState
@@ -31,11 +46,11 @@ export const Tabs = React.forwardRef((props, ref) => {
     const headingClassNames = getClassNames(theme.tabsBar, shouldScrollTabs && theme.scroll);
     if (!children)
         return null;
-    return (_jsxs(Wrapper, { className: combinedClassNames, style: style, ref: ref, children: [_jsxs(Div, { ref: containerRef, className: containerClassNames, children: [hasLeftArrow && (_jsx(ArrowLeft, { onClick: onLeftClick, theme: theme })), hasRightArrow && (_jsx(ArrowRight, { onClick: onRightClick, theme: theme })), _jsx(Heading, { className: headingClassNames, children: _jsx(TabsContext.Provider, { value: tabsContext, children: React.Children.map(children, (child) => {
+    return (_jsxs(Wrapper, Object.assign({}, restProps, { className: combinedClassNames, style: style, ref: ref, children: [_jsxs(Div, { ref: containerRef, className: containerClassNames, children: [hasLeftArrow && (_jsx(ArrowLeft, { onClick: onLeftClick, theme: theme })), hasRightArrow && (_jsx(ArrowRight, { onClick: onRightClick, theme: theme })), _jsx(Heading, { className: headingClassNames, children: _jsx(TabsContext.Provider, { value: tabsContext, children: React.Children.map(children, (child) => {
                                 if (!React.isValidElement(child))
                                     return null;
                                 return (_jsx(Tab, Object.assign({}, child.props)));
-                            }) }) })] }), _jsx(Content, { className: theme.content, tabContentNode: tabContentNode, children: _jsx(TabContent, { activeTabKey: activeTabKey, children: children }, activeTabKey) })] }));
+                            }) }) })] }), _jsx(Content, { className: theme.content, tabContentNode: tabContentNode, children: _jsx(TabContent, { activeTabKey: activeTabKey, children: children }, activeTabKey) })] })));
 });
 Tabs.displayName = 'Tabs';
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../chili/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../chili/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tabs/types.d.ts

@@ -77,6 +77,7 @@ export interface WrapperProps {
     style?: React.CSSProperties;
     ref?: React.Ref<HTMLElement>;
     children?: React.ReactNode;
+    [x: string]: unknown;
 }
 export interface ContentProps {
     className?: string;

package/docs/src/app/layout-components/tabs/MainDemo/ControlledDemo.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as L from '@chili';
+import { Live } from '@/components/live';
+
+export const ControlledDemo = () => (
+  <Live scope={{ L }}>
+    {`
+() => {
+  const [selected, setSelected] = React.useState(0);
+
+  return (
+    <L.Tabs
+      activeTabKey={selected}
+      onChange={(ev) => setSelected(ev.component.value)}
+    >
+      <L.Tab title={'Tab 1'} tabKey={0}>
+        <div className='p-4'>Tab 1 content</div>
+      </L.Tab>
+      <L.Tab title={'Tab 2'} tabKey={1}>
+        <div className='p-4'>Tab 2 content</div>
+      </L.Tab>
+      <L.Tab title={'Tab 3'} tabKey={2}>
+        <div className='p-4'>Tab 3 content</div>
+      </L.Tab>
+    </L.Tabs>
+  );
+}
+    `}
+  </Live>
+);

package/docs/src/app/layout-components/tabs/MainDemo/UncontrolledDemo.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as L from '@chili';
+import { Live } from '@/components/live';
+
+export const UncontrolledDemo = () => (
+  <Live scope={{ L }}>
+    {`
+<L.Tabs>
+  <L.Tab title={'Tab 1'} tabKey={0}>
+    <div className='p-4'>Tab 1 content</div>
+  </L.Tab>
+  <L.Tab title={'Tab 2'} tabKey={1}>
+    <div className='p-4'>Tab 2 content</div>
+  </L.Tab>
+  <L.Tab title={'Tab 3'} tabKey={2}>
+    <div className='p-4'>Tab 3 content</div>
+  </L.Tab>
+</L.Tabs>
+    `}
+  </Live>
+);

package/docs/src/app/layout-components/tabs/MainDemo/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as L from '@chili';
+import React from 'react';
+import { ControlledDemo } from './ControlledDemo';
+import { UncontrolledDemo } from './UncontrolledDemo';
+
+export const MainDemo = () => {
+  const [selected, setSelected] = React.useState<string | number>(0);
+
+  return (
+    <L.Tabs
+      activeTabKey={selected}
+      onChange={(ev) => setSelected(ev.component.value)}
+      _my-6
+    >
+      <L.Tab title="Controlled" tabKey={0}>
+        <ControlledDemo />
+      </L.Tab>
+      <L.Tab title="Uncontrolled" tabKey={1}>
+        <UncontrolledDemo />
+      </L.Tab>
+    </L.Tabs>
+  );
+};

package/docs/src/app/layout-components/tabs/page.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import * as L from '@chili';
 import { UnderscoreClasses } from '@/components/commonProps';
 import {
   H1, H2, Section, THead, Table, Td, propsTableCommonHeaders,
 } from '@/components/typography';
-import { Live } from '@/components/live';
+import { MainDemo } from './MainDemo';
 
 const TabsPage = () => (
   <article>
@@ -94,30 +93,7 @@ const TabsPage = () => (
       </Table>
     </Section>
 
-    <Live scope={{ L }}>
-      {`
-() => {
-  const [selected, setSelected] = React.useState(0);
-
-  return (
-    <L.Tabs
-      activeTabKey={selected}
-      onChange={(ev) => setSelected(ev.component.value)}
-    >
-      <L.Tab title={'Tab 1'} tabKey={0}>
-        <div className='p-4'>Tab 1 content</div>
-      </L.Tab>
-      <L.Tab title={'Tab 2'} tabKey={1}>
-        <div className='p-4'>Tab 2 content</div>
-      </L.Tab>
-      <L.Tab title={'Tab 3'} tabKey={2}>
-        <div className='p-4'>Tab 3 content</div>
-      </L.Tab>
-    </L.Tabs>
-  );
-};
-  `}
-    </Live>
+    <MainDemo />
   </article>
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chili-ui",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "description": "UI components library for React applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",