@uxf/ui 1.0.0-beta.73 → 1.0.0-beta.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/tabs/tabs.d.ts +11 -8
  3. package/tabs/tabs.js +10 -10
  4. package/tabs/tabs.stories.d.ts +5 -1
  5. package/tabs/tabs.stories.js +17 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.73",
3
+ "version": "1.0.0-beta.74",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/tabs/tabs.d.ts CHANGED
@@ -1,14 +1,17 @@
1
- import React, { FC, HTMLAttributes, ReactNode } from "react";
2
- export interface TabProps {
3
- children: ReactNode;
1
+ import React, { ReactNode } from "react";
2
+ export interface TabsPanelProps {
4
3
  className?: string;
5
- tabTitle: ReactNode;
4
+ title: ReactNode;
6
5
  }
7
- export declare const TabPanel: FC<TabProps>;
8
- export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
6
+ export interface TabsProps {
7
+ className?: string;
9
8
  defaultIndex?: number;
9
+ grow?: boolean;
10
10
  onChange?: (index: number) => void;
11
11
  variant?: "default" | "segmented";
12
- grow?: boolean;
13
12
  }
14
- export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
13
+ export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & {
14
+ children?: React.ReactNode;
15
+ } & React.RefAttributes<HTMLDivElement>> & {
16
+ Panel: React.FC<React.PropsWithChildren<TabsPanelProps>>;
17
+ };
package/tabs/tabs.js CHANGED
@@ -23,16 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Tabs = exports.TabPanel = void 0;
26
+ exports.Tabs = void 0;
27
27
  const react_1 = require("@headlessui/react");
28
- const forwardRef_1 = require("@uxf/core/utils/forwardRef");
29
- const cx_1 = require("@uxf/core/utils/cx");
30
- const react_2 = __importStar(require("react"));
31
28
  const classes_1 = require("@uxf/core/constants/classes");
32
29
  const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
33
- const TabPanel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
34
- exports.TabPanel = TabPanel;
35
- exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
30
+ const cx_1 = require("@uxf/core/utils/cx");
31
+ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
32
+ const react_2 = __importStar(require("react"));
33
+ const Panel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
34
+ const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
36
35
  var _a, _b;
37
36
  const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
38
37
  const containerRef = (0, react_2.useRef)(null);
@@ -51,10 +50,10 @@ exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
51
50
  };
52
51
  }, []);
53
52
  if (react_2.Children.count(props.children) === 0) {
54
- return null;
53
+ return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
55
54
  }
56
- const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.tabTitle);
57
- const tabs = tabPanels.map((c) => c.props.tabTitle);
55
+ const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
56
+ const tabs = tabPanels.map((c) => c.props.title);
58
57
  return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
59
58
  react_2.default.createElement(react_1.Tab.List, null,
60
59
  react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`) },
@@ -64,3 +63,4 @@ exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
64
63
  }, key: `${tab}--${index}` }, tab)))))),
65
64
  react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
66
65
  });
66
+ exports.Tabs = Object.assign(TabsRoot, { Panel });
package/tabs/tabs.stories.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import React from "react";
2
2
  declare const _default: {
3
3
  title: string;
4
- component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & React.RefAttributes<HTMLDivElement>>;
4
+ component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & {
5
+ children?: React.ReactNode;
6
+ } & React.RefAttributes<HTMLDivElement>> & {
7
+ Panel: React.FC<React.PropsWithChildren<import("./tabs").TabsPanelProps>>;
8
+ };
5
9
  };
6
10
  export default _default;
7
11
  export declare function Default(): JSX.Element;
package/tabs/tabs.stories.js CHANGED
@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Default = void 0;
7
- const tabs_1 = require("./tabs");
8
7
  const react_1 = __importDefault(require("react"));
8
+ const tabs_1 = require("./tabs");
9
9
  exports.default = {
10
10
  title: "UI/Tabs",
11
11
  component: tabs_1.Tabs,
@@ -16,31 +16,31 @@ function Default() {
16
16
  react_1.default.createElement("div", null,
17
17
  react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
18
18
  react_1.default.createElement(tabs_1.Tabs, null,
19
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
20
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
21
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
22
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
19
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
20
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
21
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
22
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
23
23
  react_1.default.createElement("div", null,
24
24
  react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
25
25
  react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
26
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
27
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
28
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
29
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
26
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
27
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
28
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
29
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
30
30
  react_1.default.createElement("div", { className: "w-[600px]" },
31
31
  react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
32
32
  react_1.default.createElement(tabs_1.Tabs, { grow: true },
33
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
34
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
35
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
36
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
33
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
34
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
35
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
36
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
37
37
  react_1.default.createElement("div", { className: "w-[600px]" },
38
38
  react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
39
39
  react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
40
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
41
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
42
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
43
- react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
40
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
41
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
42
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
43
+ react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
44
44
  return (react_1.default.createElement(react_1.default.Fragment, null,
45
45
  react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
46
46
  react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));