@launchpad-ui/tab-list
Advanced tools
Comparing version 0.4.16 to 0.4.17
import './style.css'; | ||
import { jsxs, jsx } from "react/jsx-runtime"; | ||
import { useTabList, useTab, useTabPanel } from "@react-aria/tabs"; | ||
@@ -7,2 +6,3 @@ import { useTabListState } from "@react-stately/tabs"; | ||
import { useRef } from "react"; | ||
import { jsxs, jsx } from "react/jsx-runtime"; | ||
const styles = { | ||
@@ -31,20 +31,59 @@ "TabList-list": "_TabList-list_jvqfk_1", | ||
}); | ||
const { tabListProps } = useTabList(props, state, ref); | ||
return /* @__PURE__ */ jsxs("div", { className, "data-test-id": testId, children: [ | ||
/* @__PURE__ */ jsx("div", { ...tabListProps, ref, className: styles["TabList-list"], children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TabItem, { item, state }, item.key)) }), | ||
/* @__PURE__ */ jsx(TabItemPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key) | ||
] }); | ||
const { | ||
tabListProps | ||
} = useTabList(props, state, ref); | ||
return /* @__PURE__ */ jsxs("div", { | ||
className, | ||
"data-test-id": testId, | ||
children: [/* @__PURE__ */ jsx("div", { | ||
...tabListProps, | ||
ref, | ||
className: styles["TabList-list"], | ||
children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TabItem, { | ||
item, | ||
state | ||
}, item.key)) | ||
}), /* @__PURE__ */ jsx(TabItemPanel, { | ||
state | ||
}, (_a = state.selectedItem) == null ? void 0 : _a.key)] | ||
}); | ||
}; | ||
const TabItem = ({ className, item: { key, rendered }, state }) => { | ||
const TabItem = ({ | ||
className, | ||
item: { | ||
key, | ||
rendered | ||
}, | ||
state | ||
}) => { | ||
const ref = useRef(null); | ||
const { tabProps } = useTab({ key }, state, ref); | ||
const { | ||
tabProps | ||
} = useTab({ | ||
key | ||
}, state, ref); | ||
const isSelected = state.selectedKey === key; | ||
const classes = cx(styles["TabList-item"], isSelected && styles["is-active"], className); | ||
return /* @__PURE__ */ jsx("div", { ...tabProps, ref, className: classes, children: rendered }); | ||
return /* @__PURE__ */ jsx("div", { | ||
...tabProps, | ||
ref, | ||
className: classes, | ||
children: rendered | ||
}); | ||
}; | ||
const TabItemPanel = ({ state, ...props }) => { | ||
const TabItemPanel = ({ | ||
state, | ||
...props | ||
}) => { | ||
var _a; | ||
const ref = useRef(null); | ||
const { tabPanelProps } = useTabPanel(props, state, ref); | ||
return /* @__PURE__ */ jsx("div", { ...tabPanelProps, ref, className: styles["TabList-panel"], children: (_a = state.selectedItem) == null ? void 0 : _a.props.children }); | ||
const { | ||
tabPanelProps | ||
} = useTabPanel(props, state, ref); | ||
return /* @__PURE__ */ jsx("div", { | ||
...tabPanelProps, | ||
ref, | ||
className: styles["TabList-panel"], | ||
children: (_a = state.selectedItem) == null ? void 0 : _a.props.children | ||
}); | ||
}; | ||
@@ -51,0 +90,0 @@ export { |
require('./style.css'); | ||
"use strict"; | ||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
const jsxRuntime = require("react/jsx-runtime"); | ||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } }); | ||
const tabs$1 = require("@react-aria/tabs"); | ||
@@ -9,2 +8,3 @@ const tabs = require("@react-stately/tabs"); | ||
const react = require("react"); | ||
const jsxRuntime = require("react/jsx-runtime"); | ||
const styles = { | ||
@@ -33,22 +33,61 @@ "TabList-list": "_TabList-list_jvqfk_1", | ||
}); | ||
const { tabListProps } = tabs$1.useTabList(props, state, ref); | ||
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-test-id": testId, children: [ | ||
/* @__PURE__ */ jsxRuntime.jsx("div", { ...tabListProps, ref, className: styles["TabList-list"], children: [...state.collection].map((item) => /* @__PURE__ */ jsxRuntime.jsx(TabItem, { item, state }, item.key)) }), | ||
/* @__PURE__ */ jsxRuntime.jsx(TabItemPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key) | ||
] }); | ||
const { | ||
tabListProps | ||
} = tabs$1.useTabList(props, state, ref); | ||
return /* @__PURE__ */ jsxRuntime.jsxs("div", { | ||
className, | ||
"data-test-id": testId, | ||
children: [/* @__PURE__ */ jsxRuntime.jsx("div", { | ||
...tabListProps, | ||
ref, | ||
className: styles["TabList-list"], | ||
children: [...state.collection].map((item) => /* @__PURE__ */ jsxRuntime.jsx(TabItem, { | ||
item, | ||
state | ||
}, item.key)) | ||
}), /* @__PURE__ */ jsxRuntime.jsx(TabItemPanel, { | ||
state | ||
}, (_a = state.selectedItem) == null ? void 0 : _a.key)] | ||
}); | ||
}; | ||
const TabItem = ({ className, item: { key, rendered }, state }) => { | ||
const TabItem = ({ | ||
className, | ||
item: { | ||
key, | ||
rendered | ||
}, | ||
state | ||
}) => { | ||
const ref = react.useRef(null); | ||
const { tabProps } = tabs$1.useTab({ key }, state, ref); | ||
const { | ||
tabProps | ||
} = tabs$1.useTab({ | ||
key | ||
}, state, ref); | ||
const isSelected = state.selectedKey === key; | ||
const classes = classix.cx(styles["TabList-item"], isSelected && styles["is-active"], className); | ||
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...tabProps, ref, className: classes, children: rendered }); | ||
return /* @__PURE__ */ jsxRuntime.jsx("div", { | ||
...tabProps, | ||
ref, | ||
className: classes, | ||
children: rendered | ||
}); | ||
}; | ||
const TabItemPanel = ({ state, ...props }) => { | ||
const TabItemPanel = ({ | ||
state, | ||
...props | ||
}) => { | ||
var _a; | ||
const ref = react.useRef(null); | ||
const { tabPanelProps } = tabs$1.useTabPanel(props, state, ref); | ||
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...tabPanelProps, ref, className: styles["TabList-panel"], children: (_a = state.selectedItem) == null ? void 0 : _a.props.children }); | ||
const { | ||
tabPanelProps | ||
} = tabs$1.useTabPanel(props, state, ref); | ||
return /* @__PURE__ */ jsxRuntime.jsx("div", { | ||
...tabPanelProps, | ||
ref, | ||
className: styles["TabList-panel"], | ||
children: (_a = state.selectedItem) == null ? void 0 : _a.props.children | ||
}); | ||
}; | ||
exports.TabList = TabList; | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@launchpad-ui/tab-list", | ||
"version": "0.4.16", | ||
"version": "0.4.17", | ||
"status": "beta", | ||
@@ -29,18 +29,18 @@ "publishConfig": { | ||
"dependencies": { | ||
"@react-aria/tabs": "^3.3.0", | ||
"@react-stately/tabs": "^3.2.0", | ||
"@react-types/shared": "^3.16.0", | ||
"@react-types/tabs": "^3.1.0", | ||
"classix": "^2.1.13", | ||
"@react-aria/tabs": "3.3.0", | ||
"@react-stately/tabs": "3.2.0", | ||
"@react-types/shared": "3.16.0", | ||
"@react-types/tabs": "3.1.0", | ||
"classix": "2.1.17", | ||
"@launchpad-ui/tokens": "~0.4.7" | ||
}, | ||
"peerDependencies": { | ||
"@react-stately/collections": "^3.4.0", | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0" | ||
"@react-stately/collections": "3.5.0", | ||
"react": "18.2.0", | ||
"react-dom": "18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@react-stately/collections": "^3.5.0", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
"@react-stately/collections": "3.5.0", | ||
"react": "18.2.0", | ||
"react-dom": "18.2.0" | ||
}, | ||
@@ -47,0 +47,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
23668
272
+ Added@babel/runtime@7.26.0(transitive)
+ Added@react-aria/tabs@3.3.0(transitive)
+ Added@react-stately/collections@3.5.0(transitive)
+ Added@react-stately/tabs@3.2.0(transitive)
+ Added@react-types/shared@3.16.0(transitive)
+ Added@react-types/tabs@3.1.0(transitive)
+ Addedclassix@2.1.17(transitive)
+ Addedreact@18.2.0(transitive)
+ Addedreact-dom@18.2.0(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removed@react-aria/tabs@3.9.8(transitive)
- Removed@react-stately/tabs@3.7.0(transitive)
- Removedclassix@2.2.0(transitive)
- Removedreact@18.3.1(transitive)
- Removedreact-dom@18.3.1(transitive)
Updated@react-aria/tabs@3.3.0
Updated@react-stately/tabs@3.2.0
Updated@react-types/shared@3.16.0
Updated@react-types/tabs@3.1.0
Updatedclassix@2.1.17