@rescui/tab-list 0.17.0 → 0.17.1-RUI-293-Update-menu-component-6ca9d26d3.22

package/llm/components/tab-list.md

@@ -0,0 +1,447 @@
+# TabList
+
+TabList is a component for tab-like navigation panels with an animated \`activity indicator\`. Built with adaptivity in mind, it can be used to create tabs that are similar to [react-tabs](https://github.com/reactjs/react-tabs), and it can also handle more specialized cases, such as ones where the tab panel is used more like a horizontal switcher component.
+
+## Usage
+
+### Features showcase
+
+`TabList` component works only as a controlled component. It requires `value` and `onChange` props to function properly.
+
+Basic view modes of `TabList` component:
+
+#### Using TabSeparator for tabs inside and outside container components
+
+In `default` mode `TabList` doesn't render the line below the tabs. The package has a `TabSeparator` component, making it easier to create UIs where the whole screen width is underlined. You can achieve this by placing `TabSeparator` component outside the container `div`s.
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
+
+const ContentSwitcher = ({ index, children }) => {
+  return children[index];
+};
+
+const MyTabs = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div className="rs-docs-offset-top-24">
+      <style>
+        {`.my-container {
+        max-width: 400px;
+        margin: 0 auto;
+      }`}
+      </style>
+      <div className="my-container">
+        <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+        </TabList>
+      </div>
+      <TabSeparator />
+      <div className="my-container">
+        <ContentSwitcher index={activeIndex}>
+          <div>First</div>
+          <div>Second</div>
+          <div>Third</div>
+        </ContentSwitcher>
+      </div>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+#### Content Switcher made of TabList with default values
+
+`TabList` enumerates `Tab` children components, so by default it has different keys for `onChange` prop function. It's possible to use `TabList` with regular React `useState` hook like this:
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
+import { Switcher } from '@rescui/switcher';
+
+const ContentSwitcher = ({ index, children }) => {
+  return children[index];
+};
+const MyTabs = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div>
+      <Switcher
+        size="xs"
+        value={activeIndex}
+        options={[
+          { label: 'First', value: 0 },
+          { label: 'Second', value: 1 },
+          { label: 'Third', value: 2 }
+        ]}
+        onChange={v => setActiveIndex(v)}
+        className="rs-docs-offset-top-12"
+      />
+      <TabList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Tab>First</Tab>
+        <Tab>Second</Tab>
+        <Tab>Third</Tab>
+      </TabList>
+      <TabSeparator />
+      <div className="rs-docs-offset-top-12">
+        <ContentSwitcher index={activeIndex}>
+          <div>First</div>
+          <div>Second</div>
+          <div>Third</div>
+        </ContentSwitcher>
+      </div>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+#### Switcher with custom values on Tabs and component for tab content
+
+`TabList` component works as radio button-like control with custom `value` on `Tab` components
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
+import { Switcher } from '@rescui/switcher';
+
+const Content = ({ activeTab }) => {
+  switch (activeTab) {
+    case 'first':
+      return <div>First</div>;
+    case 'second':
+      return <div>Second</div>;
+    case 'third':
+      return <div>Third</div>;
+  }
+};
+
+const MyTabs = () => {
+  const [activeTab, setActiveTab] = useState('second');
+  return (
+    <div>
+      <div>
+        <Switcher
+          size="xs"
+          value={activeTab}
+          options={[
+            { label: 'First', value: 'first' },
+            { label: 'Second', value: 'second' },
+            { label: 'Third', value: 'third' }
+          ]}
+          onChange={tab => setActiveTab(tab)}
+          className="rs-docs-offset-top-12"
+        />
+      </div>
+      <TabList
+        value={activeTab}
+        onChange={v => setActiveTab(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Tab value="first">First</Tab>
+        <Tab value="second">Second</Tab>
+        <Tab value="third">Third</Tab>
+      </TabList>
+      <TabSeparator />
+      <div className="rs-docs-offset-top-12">
+        <Content activeTab={activeTab} />
+      </div>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+#### SEO tip: render the content from every tab and hide it with display: none
+
+Content could be rendered to DOM and hidden with CSS. This is a usefull trick for SEO optimization.
+
+```tsx
+import { useState, cloneElement } from 'react';
+import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
+
+const CSSContentSwitcher = ({ index, children }) => {
+  return children.map((ch, i) => {
+    const chStyles = ch.props.style || {};
+    const addStyles = i === index ? {} : { display: 'none' };
+    return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
+  });
+};
+
+const MyTabs = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div className="rs-docs-offset-top-24">
+      <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
+        <Tab>First</Tab>
+        <Tab>Second</Tab>
+        <Tab>Third</Tab>
+      </TabList>
+      <TabSeparator />
+      <CSSContentSwitcher index={activeIndex}>
+        <div>First</div>
+        <div>Second</div>
+        <div>Third</div>
+      </CSSContentSwitcher>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+#### Controls for the e2e tests
+
+When testing the page, you can get access to the arrows with `data-e2e` attributes. You should set the scope with the `data-e2e` attribute from the outside.
+
+```tsx
+import { useState, cloneElement } from 'react';
+import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
+
+const CSSContentSwitcher = ({ index, children }) => {
+  return children.map((ch, i) => {
+    const chStyles = ch.props.style || {};
+    const addStyles = i === index ? {} : { display: 'none' };
+    return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
+  });
+};
+const MyTabs = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div className="rs-docs-offset-top-24" style={{ width: 240 }}>
+      <TabList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        data-e2e={'example-tabs'}
+      >
+        <Tab>First</Tab>
+        <Tab>Second</Tab>
+        <Tab>Third</Tab>
+        <Tab>Fourth</Tab>
+        <Tab>Fifth</Tab>
+        <Tab>Sixth</Tab>
+      </TabList>
+      <TabSeparator />
+      <CSSContentSwitcher index={activeIndex}>
+        <div>First</div>
+        <div>Second</div>
+        <div>Third</div>
+        <div>Fourth</div>
+        <div>Fifth</div>
+        <div>Sixth</div>
+      </CSSContentSwitcher>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+Now you can get access to the arrows using the `[data-e2e="example-tabs__left-arrow"]` and `[data-e2e="example-tabs__right-arrow"]` selectors.
+
+#### Custom background
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab } from '@rescui/tab-list';
+
+const backgroundColor = '#F4F4F4';
+
+const MyTabs = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div style={{ width: 260, padding: 10, backgroundColor }}>
+      <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
+        <Tab>First</Tab>
+        <Tab>Second</Tab>
+        <Tab>Third</Tab>
+        <Tab>Fourth</Tab>
+        <Tab>Fifth</Tab>
+        <Tab>Sixth</Tab>
+      </TabList>
+    </div>
+  );
+};
+
+render(<MyTabs />);
+```
+
+#### Custom comparator
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab } from '@rescui/tab-list';
+
+const Content = ({ activeIndex }) => {
+  switch (activeIndex) {
+    case 0:
+      return <div>First</div>;
+    case 1:
+      return <div>Second</div>;
+    case 2:
+      return <div>Third</div>;
+  }
+};
+
+const TabsWithCustomComparator = () => {
+  const [active, setActive] = useState({ value: 0 });
+
+  return (
+    <div>
+      <TabList
+        value={active}
+        onChange={v => setActive(v)}
+        compareValues={(obj1, obj2) => obj1.value === obj2.value}
+      >
+        <Tab value={{ value: 0 }}>First</Tab>
+        <Tab value={{ value: 1 }}>Second</Tab>
+        <Tab value={{ value: 2 }}>Third</Tab>
+      </TabList>
+      <div style={{ marginTop: '10px' }}>
+        <Content activeIndex={active.value} />
+      </div>
+    </div>
+  );
+};
+
+render(<TabsWithCustomComparator />);
+```
+
+#### Tabs as links
+
+```tsx
+import { useState } from 'react';
+import { TabList, Tab } from '@rescui/tab-list';
+
+const Demo = () => {
+  const [activeTab, setActiveTab] = useState('second');
+  return (
+    <div>
+      <TabList
+        value={activeTab}
+        onChange={v => setActiveTab(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Tab href="#first" value="first">
+          First
+        </Tab>
+        <Tab href="#second" value="second">
+          Second
+        </Tab>
+        <Tab href="#third" value="third">
+          Third
+        </Tab>
+      </TabList>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+## CSS Mixins API
+
+#### `Tab` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-tab-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
+| `rs-tab-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
+
+#### `TabList` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-tab-list-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-tab-list-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-tab-list-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-tab-list-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-tab-list-sparse-true` | prop: `sparse`<br><br>value: `true` |
+| `rs-tab-list-sparse-false` | prop: `sparse`<br><br>value: `false` |
+| `rs-tab-list-short-true` | prop: `short`<br><br>value: `true` |
+| `rs-tab-list-short-false` | prop: `short`<br><br>value: `false` |
+
+#### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { TabList, Tab } from '@rescui/tab-list';
+import { useState } from 'react';
+import { TeamOutlineIcon, WinOutlineIcon, ThumbsUpOutlineIcon } from '@rescui/icons';
+
+const MyTabList = ({ className }) => {
+  const [activeIndex, setActiveIndex] = useState(1);
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <TabList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        className={className}
+      >
+        <Tab className="my-tab" icon={<TeamOutlineIcon />}>
+          First
+        </Tab>
+        <Tab className="my-tab" icon={<WinOutlineIcon />}>
+          Second
+        </Tab>
+        <Tab className="my-tab" icon={<ThumbsUpOutlineIcon />}>
+          Third
+        </Tab>
+      </TabList>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyTabList />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyTabList className={`my-tab-list-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyTabList className={`my-tab-list-var-1 my-tab-list-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/tab-list/lib/public-api.p.css';
+
+.my-tab-list-var-1 {
+  @mixin rs-tab-list-size-l;
+  @mixin rs-tab-list-mode-rock;
+  @mixin rs-tab-list-sparse-true;
+  @mixin rs-tab-list-short-true;
+
+  .my-tab {
+    @mixin rs-tab-icon-right;
+  }
+}
+.my-tab-list-var-2 {
+  @mixin rs-tab-list-size-m;
+  @mixin rs-tab-list-mode-classic;
+  @mixin rs-tab-list-sparse-false;
+  @mixin rs-tab-list-short-false;
+
+  .my-tab {
+    @mixin rs-tab-icon-left;
+  }
+}
+```

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [TabList](./components/tab-list.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tab-list",
-  "version": "0.17.0",
+  "version": "0.17.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -16,8 +17,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/button": "^0.24.0",
-    "@rescui/use-resize-observer": "^0.3.0",
+    "@rescui/button": "0.24.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
+    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.169+6ca9d26d3",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -26,16 +27,16 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.0",
-    "@rescui/postcss-preset-library": "^0.2.2",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.27.0",
-    "@rescui/visual-regression": "^0.1.4"
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.57+6ca9d26d3",
+    "@rescui/postcss-preset-library": "0.2.2",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
+    "@rescui/visual-regression": "0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
+  "gitHead": "6ca9d26d30da536dc5a10fdd86222129e2832efa"
 }

package/lib/parts/with-scroll-arrows.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { ScrollableListCompareValueType } from './use-scrollable-list';
-export declare type WithScrollArrowsProps<T> = {
-    theme?: Theme;
-    value: T;
-    /** @ignore */
-    compareValues?: ScrollableListCompareValueType<T>;
-    onChange: (value: T) => void;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-};
-export declare type WithScrollArrowsWrappedComponentProps<T> = {
-    selectedId?: number;
-    activeNodeRef?: React.MutableRefObject<HTMLElement>;
-    tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
-    value: T;
-    onChange: (value: T) => void;
-    children: React.ReactNode;
-    theme?: Theme;
-    containerRef?: React.MutableRefObject<HTMLElement>;
-};
-declare type OmittedWrappedComponentProps<P, T> = Omit<P, keyof WithScrollArrowsWrappedComponentProps<T>>;
-export declare const withScrollArrows: <T, P extends WithScrollArrowsWrappedComponentProps<T>>(WrappedComponent: React.FC<WithScrollArrowsWrappedComponentProps<T>>, CompareItem: React.ElementType, arrowHeight?: string) => {
-    <OT extends T>({ compareValues, value, onChange, children, theme: themeFromProps, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<WithScrollArrowsProps<OT> & OmittedWrappedComponentProps<P, OT>>): React.ReactElement | null;
-    displayName: string;
-};
-export {};

package/lib/parts/with-scroll-arrows.js

@@ -1,101 +0,0 @@
-"use client";
-import React from 'react';
-import cn from 'classnames';
-import { Button } from '@rescui/button';
-import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import LeftOutlineIcon from '../_virtual/left-outline.js';
-import RightOutlineIcon from '../_virtual/right-outline.js';
-import { useScrollableList } from './use-scrollable-list.js';
-import styles from './with-scroll-arrows.p.module.css.js';
-
-const compareTabsDefault = (activeValue, tabValue) => activeValue === tabValue;
-
-const withScrollArrows = function (WrappedComponent, CompareItem) {
-  let arrowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '100%';
-
-  const WithScrollArrowsComponent = _ref => {
-    let {
-      compareValues = compareTabsDefault,
-      value,
-      onChange,
-      children,
-      theme: themeFromProps,
-      ['data-e2e']: e2eId,
-      ...restProps
-    } = _ref;
-    const theme = useThemeWithUndefined(themeFromProps);
-    const {
-      selectedId,
-      prepareDirectionScroller,
-      activeNodeRef,
-      tabRefs,
-      scrollableRef,
-      containerRef,
-      childrenWithValues,
-      showLeftArrow,
-      showRightArrow
-    } = useScrollableList({
-      children,
-      compareValues,
-      value,
-      CompareItem
-    });
-    const arrowStyles = {
-      height: arrowHeight
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn(styles.wrapper, styles[theme])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn(styles.arrow, styles.arrowLeft, showLeftArrow && styles.shown),
-      "data-e2e": e2eId,
-      style: arrowStyles,
-      "data-test": 'scrollable-list-arrow-left-wrapper'
-    }, /*#__PURE__*/React.createElement(Button, {
-      theme: theme,
-      mode: "clear",
-      notFocusable: true,
-      onClick: prepareDirectionScroller('left'),
-      icon: /*#__PURE__*/React.createElement(LeftOutlineIcon, {
-        "data-render-all-sizes": true
-      }),
-      size: "s",
-      "data-e2e": e2eId ? `${e2eId}__left-arrow` : null,
-      "data-test": 'scrollable-list-arrow-left'
-    })), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles.scrollable, showLeftArrow && styles.withLeftArrow, showRightArrow && styles.withRightArrow),
-      ref: scrollableRef,
-      tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WrappedComponent, {
-      selectedId: selectedId,
-      activeNodeRef: activeNodeRef,
-      tabRefs: tabRefs,
-      value: value,
-      onChange: onChange,
-      theme: theme,
-      "data-e2e": e2eId,
-      containerRef: containerRef,
-      ...restProps
-    }, childrenWithValues)), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles.arrow, styles.arrowRight, showRightArrow && styles.shown),
-      style: arrowStyles,
-      "data-test": 'scrollable-list-arrow-right-wrapper'
-    }, /*#__PURE__*/React.createElement(Button, {
-      theme: theme,
-      mode: "clear",
-      notFocusable: true,
-      onClick: prepareDirectionScroller('right'),
-      icon: /*#__PURE__*/React.createElement(RightOutlineIcon, {
-        "data-render-all-sizes": true
-      }),
-      className: styles.arrowButton,
-      size: "s",
-      "data-e2e": e2eId ? `${e2eId}__right-arrow` : null,
-      "data-test": 'scrollable-list-arrow-right'
-    })));
-  };
-
-  WithScrollArrowsComponent.displayName = `withScrollArrows(${WrappedComponent.displayName || WrappedComponent.name})`;
-  return WithScrollArrowsComponent;
-};
-
-export { withScrollArrows };

package/lib/parts/with-scroll-arrows.p.module.css.js

@@ -1,14 +0,0 @@
-var styles = {
-  "light": "_light_l17k0g_9",
-  "dark": "_dark_l17k0g_12",
-  "wrapper": "_wrapper_l17k0g_16",
-  "scrollable": "_scrollable_l17k0g_23",
-  "arrow": "_arrow_l17k0g_52",
-  "shown": "_shown_l17k0g_72",
-  "arrowLeft": "_arrowLeft_l17k0g_80",
-  "arrowRight": "_arrowRight_l17k0g_85",
-  "withLeftArrow": "_withLeftArrow_l17k0g_91",
-  "withRightArrow": "_withRightArrow_l17k0g_100",
-  "arrowButton": "_arrowButton_l17k0g_121"
-};
-export { styles as default };