@launchpad-ui/tab-list
Advanced tools
Comparing version 0.2.2 to 0.3.0
@@ -10,2 +10,3 @@ // ../../scripts/react-shim.js | ||
import "./styles/TabList.css"; | ||
import { jsx, jsxs } from "react/jsx-runtime"; | ||
var TabList = (props) => { | ||
@@ -22,16 +23,19 @@ const { activeTab, className, disabledTabs, onChange, ...rest } = props; | ||
const classes = cx("TabList", className); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
className: classes | ||
}, /* @__PURE__ */ React.createElement("div", { | ||
...tabListProps, | ||
ref, | ||
className: "TabList-list" | ||
}, [...state.collection].map((item) => /* @__PURE__ */ React.createElement(TabItem, { | ||
key: item.key, | ||
item, | ||
state | ||
}))), /* @__PURE__ */ React.createElement(TabItemPanel, { | ||
key: state.selectedItem?.key, | ||
state | ||
})); | ||
return /* @__PURE__ */ jsxs("div", { | ||
className: classes, | ||
children: [ | ||
/* @__PURE__ */ jsx("div", { | ||
...tabListProps, | ||
ref, | ||
className: "TabList-list", | ||
children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TabItem, { | ||
item, | ||
state | ||
}, item.key)) | ||
}), | ||
/* @__PURE__ */ jsx(TabItemPanel, { | ||
state | ||
}, state.selectedItem?.key) | ||
] | ||
}); | ||
}; | ||
@@ -42,10 +46,15 @@ var TabItem = ({ className, item: { key, rendered }, state }) => { | ||
const isSelected = state.selectedKey === key; | ||
const classes = cx("TabList-item", { | ||
"is-active": isSelected | ||
}, className); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
const classes = cx( | ||
"TabList-item", | ||
{ | ||
"is-active": isSelected | ||
}, | ||
className | ||
); | ||
return /* @__PURE__ */ jsx("div", { | ||
...tabProps, | ||
ref, | ||
className: classes | ||
}, rendered); | ||
className: classes, | ||
children: rendered | ||
}); | ||
}; | ||
@@ -55,7 +64,8 @@ var TabItemPanel = ({ state, ...props }) => { | ||
const { tabPanelProps } = useTabPanel(props, state, ref); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
return /* @__PURE__ */ jsx("div", { | ||
...tabPanelProps, | ||
ref, | ||
className: "TabList-panel" | ||
}, state.selectedItem?.props.children); | ||
className: "TabList-panel", | ||
children: state.selectedItem?.props.children | ||
}); | ||
}; | ||
@@ -62,0 +72,0 @@ export { |
@@ -20,3 +20,6 @@ "use strict"; | ||
}; | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod)); | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
mod | ||
)); | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
@@ -40,2 +43,3 @@ | ||
var import_TabList = require("./styles/TabList.css"); | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var TabList = (props) => { | ||
@@ -52,16 +56,19 @@ const { activeTab, className, disabledTabs, onChange, ...rest } = props; | ||
const classes = (0, import_clsx.default)("TabList", className); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
className: classes | ||
}, /* @__PURE__ */ React.createElement("div", { | ||
...tabListProps, | ||
ref, | ||
className: "TabList-list" | ||
}, [...state.collection].map((item) => /* @__PURE__ */ React.createElement(TabItem, { | ||
key: item.key, | ||
item, | ||
state | ||
}))), /* @__PURE__ */ React.createElement(TabItemPanel, { | ||
key: state.selectedItem?.key, | ||
state | ||
})); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { | ||
className: classes, | ||
children: [ | ||
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { | ||
...tabListProps, | ||
ref, | ||
className: "TabList-list", | ||
children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabItem, { | ||
item, | ||
state | ||
}, item.key)) | ||
}), | ||
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabItemPanel, { | ||
state | ||
}, state.selectedItem?.key) | ||
] | ||
}); | ||
}; | ||
@@ -72,10 +79,15 @@ var TabItem = ({ className, item: { key, rendered }, state }) => { | ||
const isSelected = state.selectedKey === key; | ||
const classes = (0, import_clsx.default)("TabList-item", { | ||
"is-active": isSelected | ||
}, className); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
const classes = (0, import_clsx.default)( | ||
"TabList-item", | ||
{ | ||
"is-active": isSelected | ||
}, | ||
className | ||
); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { | ||
...tabProps, | ||
ref, | ||
className: classes | ||
}, rendered); | ||
className: classes, | ||
children: rendered | ||
}); | ||
}; | ||
@@ -85,7 +97,8 @@ var TabItemPanel = ({ state, ...props }) => { | ||
const { tabPanelProps } = (0, import_tabs.useTabPanel)(props, state, ref); | ||
return /* @__PURE__ */ React.createElement("div", { | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { | ||
...tabPanelProps, | ||
ref, | ||
className: "TabList-panel" | ||
}, state.selectedItem?.props.children); | ||
className: "TabList-panel", | ||
children: state.selectedItem?.props.children | ||
}); | ||
}; | ||
@@ -92,0 +105,0 @@ // Annotate the CommonJS export names for ESM import in node: |
{ | ||
"name": "@launchpad-ui/tab-list", | ||
"version": "0.2.2", | ||
"version": "0.3.0", | ||
"status": "beta", | ||
@@ -38,4 +38,4 @@ "publishConfig": { | ||
"@react-stately/collections": "^3.4.0", | ||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0", | ||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0" | ||
}, | ||
@@ -42,0 +42,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
23725
216