@clayui/tabs 3.156.0 → 3.158.0

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.
package/lib/cjs/index.js CHANGED
@@ -1,48 +1,67 @@
1
1
  "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var src_exports = {};
30
+ __export(src_exports, {
31
+ default: () => src_default
5
32
  });
6
- exports.default = void 0;
7
- var _shared = require("@clayui/shared");
8
- var _react = _interopRequireDefault(require("react"));
9
- var _Content = _interopRequireDefault(require("./Content"));
10
- var _Item = _interopRequireDefault(require("./Item"));
11
- var _List = require("./List");
12
- var _TabPane = _interopRequireDefault(require("./TabPane"));
13
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
15
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
16
- * SPDX-License-Identifier: BSD-3-Clause
17
- */
18
- function Tabs(_ref) {
19
- let {
20
- activation = 'manual',
21
- active: externalActive,
22
- children,
23
- className,
24
- defaultActive = 0,
25
- displayType,
26
- fade = false,
27
- justified,
28
- modern = false,
29
- onActiveChange,
30
- ...otherProps
31
- } = _ref;
32
- const [active, setActive, isUncontrolled] = (0, _shared.useControlledState)({
33
- defaultName: 'defaultActive',
33
+ module.exports = __toCommonJS(src_exports);
34
+ var import_shared = require("@clayui/shared");
35
+ var import_react = __toESM(require("react"));
36
+ var import_Content = __toESM(require("./Content"));
37
+ var import_Item = __toESM(require("./Item"));
38
+ var import_List = require("./List");
39
+ var import_TabPane = __toESM(require("./TabPane"));
40
+ function Tabs({
41
+ activation = "manual",
42
+ active: externalActive,
43
+ children,
44
+ className,
45
+ defaultActive = 0,
46
+ displayType,
47
+ fade = false,
48
+ justified,
49
+ modern = false,
50
+ onActiveChange,
51
+ ...otherProps
52
+ }) {
53
+ const [active, setActive, isUncontrolled] = (0, import_shared.useControlledState)({
54
+ defaultName: "defaultActive",
34
55
  defaultValue: defaultActive,
35
- handleName: 'onActiveChange',
36
- name: 'active',
56
+ handleName: "onActiveChange",
57
+ name: "active",
37
58
  onChange: onActiveChange,
38
59
  value: externalActive
39
60
  });
40
- const [left, right] = _react.default.Children.toArray(children);
41
- const tabsId = (0, _shared.useId)();
42
-
43
- // @ts-ignore
44
- if (left?.type?.displayName === 'ClayTabsList') {
45
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(left, {
61
+ const [left, right] = import_react.default.Children.toArray(children);
62
+ const tabsId = (0, import_shared.useId)();
63
+ if (left?.type?.displayName === "ClayTabsList") {
64
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_react.default.cloneElement(left, {
46
65
  activation,
47
66
  active,
48
67
  displayType,
@@ -51,30 +70,31 @@ function Tabs(_ref) {
51
70
  onActiveChange: setActive,
52
71
  shouldUseActive: isUncontrolled,
53
72
  tabsId
54
- }), /*#__PURE__*/_react.default.isValidElement(right) && /*#__PURE__*/_react.default.cloneElement(right, {
73
+ }), import_react.default.isValidElement(right) && import_react.default.cloneElement(right, {
55
74
  active,
56
75
  fade,
57
76
  tabsId
58
77
  }));
59
78
  }
60
- return /*#__PURE__*/_react.default.createElement(_List.List, _extends({}, otherProps, {
61
- activation: activation,
62
- active: active,
63
- className: className,
64
- displayType: displayType,
65
- justified: justified,
66
- modern: modern,
67
- onActiveChange: setActive
68
- }), children);
79
+ return /* @__PURE__ */ import_react.default.createElement(
80
+ import_List.List,
81
+ {
82
+ ...otherProps,
83
+ activation,
84
+ active,
85
+ className,
86
+ displayType,
87
+ justified,
88
+ modern,
89
+ onActiveChange: setActive
90
+ },
91
+ children
92
+ );
69
93
  }
70
-
71
- /**
72
- * @deprecated since v3.78.2 - Use new composition with Tabs.List and Tabs.Panels.
73
- */
74
- Tabs.Content = _Content.default;
75
- Tabs.Panels = _Content.default;
76
- Tabs.Item = _Item.default;
77
- Tabs.List = _List.List;
78
- Tabs.TabPane = _TabPane.default;
79
- Tabs.TabPanel = _TabPane.default;
80
- var _default = exports.default = Tabs;
94
+ Tabs.Content = import_Content.default;
95
+ Tabs.Panels = import_Content.default;
96
+ Tabs.Item = import_Item.default;
97
+ Tabs.List = import_List.List;
98
+ Tabs.TabPane = import_TabPane.default;
99
+ Tabs.TabPanel = import_TabPane.default;
100
+ var src_default = Tabs;
@@ -1,37 +1,37 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- /**
3
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
-
7
- import classNames from 'classnames';
8
- import React from 'react';
9
- const Content = /*#__PURE__*/React.forwardRef(function Content(_ref, ref) {
10
- let {
11
- active,
12
- activeIndex = 0,
13
- children,
14
- className,
15
- fade = false,
16
- tabsId,
17
- ...otherProps
18
- } = _ref;
19
- return /*#__PURE__*/React.createElement("div", _extends({
20
- className: classNames('tab-content', className)
21
- }, otherProps, {
22
- ref: ref
23
- }), React.Children.map(children, (child, index) => {
24
- if (! /*#__PURE__*/React.isValidElement(child)) {
25
- return child;
26
- }
27
- return /*#__PURE__*/React.cloneElement(child, {
28
- ...child.props,
29
- active: typeof active === 'number' ? active === index : activeIndex === index,
30
- 'aria-labelledby': tabsId ? `${tabsId}-tab-${index}` : child.props['aria-labelledby'],
31
- fade,
32
- id: tabsId ? `${tabsId}-tabpanel-${index}` : child.props.id,
33
- key: index
34
- });
35
- }));
1
+ import classNames from "classnames";
2
+ import React from "react";
3
+ const Content = React.forwardRef(function Content2({
4
+ active,
5
+ activeIndex = 0,
6
+ children,
7
+ className,
8
+ fade = false,
9
+ tabsId,
10
+ ...otherProps
11
+ }, ref) {
12
+ return /* @__PURE__ */ React.createElement(
13
+ "div",
14
+ {
15
+ className: classNames("tab-content", className),
16
+ ...otherProps,
17
+ ref
18
+ },
19
+ React.Children.map(children, (child, index) => {
20
+ if (!React.isValidElement(child)) {
21
+ return child;
22
+ }
23
+ return React.cloneElement(child, {
24
+ ...child.props,
25
+ "active": typeof active === "number" ? active === index : activeIndex === index,
26
+ "aria-labelledby": tabsId ? `${tabsId}-tab-${index}` : child.props["aria-labelledby"],
27
+ fade,
28
+ "id": tabsId ? `${tabsId}-tabpanel-${index}` : child.props.id,
29
+ "key": index
30
+ });
31
+ })
32
+ );
36
33
  });
37
- export default Content;
34
+ var Content_default = Content;
35
+ export {
36
+ Content_default as default
37
+ };
package/lib/esm/Item.js CHANGED
@@ -1,14 +1,8 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- /**
3
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
-
7
- import { LinkOrButton } from '@clayui/shared';
8
- import classNames from 'classnames';
9
- import React from 'react';
10
- const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
11
- let {
1
+ import { LinkOrButton } from "@clayui/shared";
2
+ import classNames from "classnames";
3
+ import React from "react";
4
+ const Item = React.forwardRef(
5
+ ({
12
6
  active = false,
13
7
  children,
14
8
  className,
@@ -17,25 +11,38 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
17
11
  innerProps = {},
18
12
  onClick,
19
13
  ...otherProps
20
- } = _ref;
21
- return /*#__PURE__*/React.createElement("li", _extends({}, otherProps, {
22
- className: classNames('nav-item', className),
23
- role: "none"
24
- }), /*#__PURE__*/React.createElement(LinkOrButton, _extends({}, innerProps, {
25
- "aria-selected": active,
26
- buttonDisplayType: "unstyled",
27
- buttonType: "button",
28
- className: classNames('nav-link', {
29
- active,
30
- disabled
31
- }),
32
- disabled: disabled,
33
- href: href,
34
- onClick: onClick,
35
- ref: ref,
36
- role: "tab",
37
- tabIndex: !active ? -1 : 0
38
- }), children));
39
- });
40
- Item.displayName = 'ClayTabsItem';
41
- export default Item;
14
+ }, ref) => /* @__PURE__ */ React.createElement(
15
+ "li",
16
+ {
17
+ ...otherProps,
18
+ className: classNames("nav-item", className),
19
+ role: "none"
20
+ },
21
+ /* @__PURE__ */ React.createElement(
22
+ LinkOrButton,
23
+ {
24
+ ...innerProps,
25
+ "aria-selected": active,
26
+ buttonDisplayType: "unstyled",
27
+ buttonType: "button",
28
+ className: classNames("nav-link", {
29
+ active,
30
+ disabled
31
+ }),
32
+ "data-testid": "tabItem",
33
+ disabled,
34
+ href,
35
+ onClick,
36
+ ref,
37
+ role: "tab",
38
+ tabIndex: !active ? -1 : 0
39
+ },
40
+ children
41
+ )
42
+ )
43
+ );
44
+ Item.displayName = "ClayTabsItem";
45
+ var Item_default = Item;
46
+ export {
47
+ Item_default as default
48
+ };
package/lib/esm/List.js CHANGED
@@ -1,84 +1,77 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- /**
3
- * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
-
7
- import { useNavigation } from '@clayui/shared';
8
- import classNames from 'classnames';
9
- import React, { useEffect, useImperativeHandle, useRef } from 'react';
10
- export const List = /*#__PURE__*/React.forwardRef(function List(_ref, ref) {
11
- let {
12
- activation,
13
- active,
14
- children,
15
- className,
16
- displayType = null,
17
- justified,
18
- modern: __,
19
- onActiveChange,
20
- shouldUseActive = false,
21
- tabsId,
22
- ...otherProps
23
- } = _ref;
1
+ import { useNavigation } from "@clayui/shared";
2
+ import classNames from "classnames";
3
+ import React, { useEffect, useImperativeHandle, useRef } from "react";
4
+ const List = React.forwardRef(function List2({
5
+ activation,
6
+ active,
7
+ children,
8
+ className,
9
+ displayType = null,
10
+ justified,
11
+ modern: __,
12
+ onActiveChange,
13
+ shouldUseActive = false,
14
+ tabsId,
15
+ ...otherProps
16
+ }, ref) {
24
17
  const tabsRef = useRef(null);
25
- const {
26
- navigationProps
27
- } = useNavigation({
18
+ const { navigationProps } = useNavigation({
28
19
  activation,
29
20
  containerRef: tabsRef,
30
- orientation: 'horizontal'
21
+ orientation: "horizontal"
31
22
  });
32
23
  useImperativeHandle(ref, () => tabsRef.current, [tabsRef]);
33
24
  useEffect(() => {
34
- // Internal API to maintain compatibility with the old Tabs pattern and to
35
- // only update the initial state when the component is in
36
- // uncontrolled mode.
37
25
  if (!shouldUseActive) {
38
26
  return;
39
27
  }
40
28
  const childrenArray = React.Children.toArray(children);
41
-
42
- // The `active` API in the new pattern has uncontrolled behavior, working
43
- // just like defaultActive as in the prop declared in the root component.
44
29
  for (let index = 0; index < childrenArray.length; index++) {
45
30
  const child = childrenArray[index];
46
- if (/*#__PURE__*/React.isValidElement(child) && child.props.active) {
31
+ if (React.isValidElement(child) && child.props.active) {
47
32
  onActiveChange(index);
48
33
  break;
49
34
  }
50
35
  }
51
36
  }, []);
52
- return /*#__PURE__*/React.createElement("ul", _extends({}, otherProps, navigationProps, {
53
- className: classNames('nav nav-tabs', {
54
- 'nav-justified': justified
55
- }, {
56
- [`nav-tabs-${displayType}`]: displayType === 'light'
57
- }, className),
58
- ref: tabsRef,
59
- role: "tablist"
60
- }), React.Children.map(children, (child, index) => {
61
- if (! /*#__PURE__*/React.isValidElement(child)) {
62
- return child;
63
- }
64
- return /*#__PURE__*/React.cloneElement(child, {
65
- active: !shouldUseActive && child.props.active !== undefined ? child.props.active : active === index,
66
- innerProps: {
67
- 'aria-controls': tabsId && `${tabsId}-tabpanel-${index}`,
68
- id: tabsId && `${tabsId}-tab-${index}`,
69
- ...(child.props.innerProps ?? {})
70
- },
71
- onClick: event => {
72
- const {
73
- onClick
74
- } = child.props;
75
- if (onClick) {
76
- onClick(event);
77
- } else {
78
- onActiveChange(index);
79
- }
37
+ return /* @__PURE__ */ React.createElement(
38
+ "ul",
39
+ {
40
+ ...otherProps,
41
+ ...navigationProps,
42
+ className: classNames(
43
+ "nav nav-tabs",
44
+ { "nav-justified": justified },
45
+ { [`nav-tabs-${displayType}`]: displayType === "light" },
46
+ className
47
+ ),
48
+ ref: tabsRef,
49
+ role: "tablist"
50
+ },
51
+ React.Children.map(children, (child, index) => {
52
+ if (!React.isValidElement(child)) {
53
+ return child;
80
54
  }
81
- });
82
- }));
55
+ return React.cloneElement(child, {
56
+ active: !shouldUseActive && child.props.active !== void 0 ? child.props.active : active === index,
57
+ innerProps: {
58
+ "aria-controls": tabsId && `${tabsId}-tabpanel-${index}`,
59
+ "id": tabsId && `${tabsId}-tab-${index}`,
60
+ ...child.props.innerProps ?? {}
61
+ },
62
+ onClick: (event) => {
63
+ const { onClick } = child.props;
64
+ if (onClick) {
65
+ onClick(event);
66
+ } else {
67
+ onActiveChange(index);
68
+ }
69
+ }
70
+ });
71
+ })
72
+ );
83
73
  });
84
- List.displayName = 'ClayTabsList';
74
+ List.displayName = "ClayTabsList";
75
+ export {
76
+ List
77
+ };
@@ -1,52 +1,58 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- /**
3
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
-
7
- import classNames from 'classnames';
8
- import React from 'react';
9
- const delay = function (fn) {
10
- let val = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 150;
1
+ import classNames from "classnames";
2
+ import React from "react";
3
+ function delay(fn, val = 150) {
11
4
  return setTimeout(() => {
12
5
  fn();
13
6
  }, val);
14
- };
15
- const TabPane = /*#__PURE__*/React.forwardRef(function TabPane(_ref, ref) {
16
- let {
7
+ }
8
+ const TabPane = React.forwardRef(
9
+ function TabPane2({
17
10
  active = false,
18
11
  children,
19
12
  className,
20
13
  fade,
21
14
  tabIndex = 0,
22
15
  ...otherProps
23
- } = _ref;
24
- const [internalActive, setInternalActive] = React.useState(active);
25
- const [internalShow, setInternalShow] = React.useState(active);
26
- React.useEffect(() => {
27
- let delayFn = () => {
28
- setInternalActive(true);
29
- delay(() => setInternalShow(true), 50);
30
- };
31
- if (!active) {
32
- setInternalShow(false);
33
- delayFn = () => setInternalActive(false);
34
- }
35
- const timer = delay(delayFn);
36
- return () => {
37
- clearTimeout(timer);
38
- setInternalShow(false);
39
- };
40
- }, [active]);
41
- return /*#__PURE__*/React.createElement("div", _extends({}, otherProps, {
42
- className: classNames('tab-pane', {
43
- active: internalActive,
44
- fade,
45
- show: internalShow
46
- }, className),
47
- ref: ref,
48
- role: "tabpanel",
49
- tabIndex: tabIndex
50
- }), children);
51
- });
52
- export default TabPane;
16
+ }, ref) {
17
+ const [internalActive, setInternalActive] = React.useState(active);
18
+ const [internalShow, setInternalShow] = React.useState(active);
19
+ React.useEffect(() => {
20
+ let delayFn = () => {
21
+ setInternalActive(true);
22
+ delay(() => setInternalShow(true), 50);
23
+ };
24
+ if (!active) {
25
+ setInternalShow(false);
26
+ delayFn = () => setInternalActive(false);
27
+ }
28
+ const timer = delay(delayFn);
29
+ return () => {
30
+ clearTimeout(timer);
31
+ setInternalShow(false);
32
+ };
33
+ }, [active]);
34
+ return /* @__PURE__ */ React.createElement(
35
+ "div",
36
+ {
37
+ ...otherProps,
38
+ className: classNames(
39
+ "tab-pane",
40
+ {
41
+ active: internalActive,
42
+ fade,
43
+ show: internalShow
44
+ },
45
+ className
46
+ ),
47
+ ref,
48
+ role: "tabpanel",
49
+ tabIndex
50
+ },
51
+ children
52
+ );
53
+ }
54
+ );
55
+ var TabPane_default = TabPane;
56
+ export {
57
+ TabPane_default as default
58
+ };