Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@launchpad-ui/tab-list

Package Overview
Dependencies
Maintainers
1
Versions
89
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@launchpad-ui/tab-list - npm Package Compare versions

Comparing version 0.4.16 to 0.4.17

63

dist/index.es.js
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 {

65

dist/index.js
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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc