@revisium/schema-toolkit-ui 0.6.10 → 0.6.11

package/dist/index.cjs

@@ -39,7 +39,6 @@ let _uiw_codemirror_theme_github = require("@uiw/codemirror-theme-github");
 let _uiw_react_codemirror = require("@uiw/react-codemirror");
 _uiw_react_codemirror = __toESM(_uiw_react_codemirror);
 let _codemirror_lang_json = require("@codemirror/lang-json");
-let _chakra_ui_react_breadcrumb = require("@chakra-ui/react/breadcrumb");
 let react_icons_md = require("react-icons/md");
 let _chakra_ui_react_menu = require("@chakra-ui/react/menu");
 let react_icons_lu = require("react-icons/lu");
@@ -2784,29 +2783,40 @@ const EditableSegment = ({ value, onChange, onBlur, tooltip, placeholder, dataTe
 
 //#endregion
 //#region src/components/Breadcrumbs/SegmentContent.tsx
+const StyledButton = (0, _chakra_ui_react.chakra)("button");
+const SHARED_STYLES = {
+	display: "inline-block",
+	borderRadius: BREADCRUMB_BORDER_RADIUS,
+	px: BREADCRUMB_PADDING,
+	py: BREADCRUMB_PADDING,
+	lineHeight: "inherit",
+	fontSize: "inherit",
+	fontFamily: "inherit"
+};
 const SegmentContent = ({ segment, isHighlighted, onClick }) => {
-	if (isHighlighted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.CurrentLink, {
-		color: CURRENT_COLOR,
-		fontWeight: "600",
-		"data-testid": segment.dataTestId,
-		children: segment.label
-	});
-	if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.Link, {
-		as: "button",
-		color: SEGMENT_COLOR,
-		borderRadius: BREADCRUMB_BORDER_RADIUS,
-		px: BREADCRUMB_PADDING,
-		py: BREADCRUMB_PADDING,
-		focusRing: "none",
+	if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+		type: "button",
+		...SHARED_STYLES,
+		color: isHighlighted ? CURRENT_COLOR : SEGMENT_COLOR,
+		fontWeight: isHighlighted ? "600" : void 0,
 		cursor: "pointer",
+		border: "none",
+		background: "none",
+		outline: "none",
 		_hover: { bg: HOVER_BG },
 		_focusVisible: { bg: HOVER_BG },
 		onClick,
+		"aria-current": isHighlighted ? "page" : void 0,
 		"data-testid": segment.dataTestId,
 		children: segment.label
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Text, {
-		color: SEGMENT_COLOR,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
+		as: "span",
+		...SHARED_STYLES,
+		color: isHighlighted ? CURRENT_COLOR : SEGMENT_COLOR,
+		fontWeight: isHighlighted ? "600" : void 0,
+		cursor: isHighlighted ? "text" : "default",
+		"aria-current": isHighlighted ? "page" : void 0,
 		"data-testid": segment.dataTestId,
 		children: segment.label
 	});
@@ -2816,35 +2826,53 @@ const SegmentContent = ({ segment, isHighlighted, onClick }) => {
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
 const Breadcrumbs = ({ segments, separator = "/", dataTestId, highlightLast = true, onSegmentClick, editable, action }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+		as: "nav",
+		"aria-label": "breadcrumb",
 		alignItems: "center",
 		gap: BREADCRUMB_PADDING,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.Root, {
+		"data-testid": dataTestId,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+			as: "ol",
+			alignItems: "center",
+			listStyleType: "none",
+			margin: 0,
+			padding: 0,
 			fontWeight: "400",
 			fontSize: BREADCRUMB_FONT_SIZE,
-			"data-testid": dataTestId,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react_breadcrumb.Breadcrumb.List, {
-				fontSize: BREADCRUMB_FONT_SIZE,
-				children: [segments.map((segment, index) => {
-					const isLast = index === segments.length - 1 && !editable;
-					const isHighlighted = isLast && highlightLast;
-					const handleClick = onSegmentClick ? () => onSegmentClick(segment, index) : void 0;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.Item, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentContent, {
+			gap: BREADCRUMB_PADDING,
+			children: [segments.map((segment, index) => {
+				const isLast = index === segments.length - 1 && !editable;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+					as: "li",
+					alignItems: "center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentContent, {
 						segment,
-						isHighlighted,
-						onClick: isLast ? void 0 : handleClick
-					}) }), (!isLast || editable) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.Separator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Text, {
+						isHighlighted: isLast && highlightLast,
+						onClick: isLast ? void 0 : onSegmentClick ? () => onSegmentClick(segment, index) : void 0
+					})
+				}), (!isLast || editable) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+					as: "li",
+					"aria-hidden": true,
+					alignItems: "center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Text, {
 						color: SEPARATOR_COLOR,
+						px: BREADCRUMB_PADDING,
+						lineHeight: 1,
 						children: separator
-					}) })] }, `${segment.label}-${index}`);
-				}), editable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react_breadcrumb.Breadcrumb.Item, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditableSegment, {
+					})
+				})] }, `${segment.label}-${index}`);
+			}), editable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+				as: "li",
+				alignItems: "center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditableSegment, {
 					value: editable.value,
 					onChange: editable.onChange,
 					onBlur: editable.onBlur,
 					tooltip: editable.tooltip,
 					placeholder: editable.placeholder,
 					dataTestId: editable.dataTestId
-				}) })]
-			})
+				})
+			})]
 		}), action]
 	});
 };
@@ -14369,7 +14397,7 @@ const TableEditor = (0, mobx_react_lite.observer)(({ viewModel, useWindowScroll
 				px: 3,
 				pt: "32px",
 				pb: "48px",
-				alignItems: "center",
+				alignItems: "flex-start",
 				justifyContent: "space-between",
 				...useWindowScroll && {
 					position: "sticky",