@plumile/ui 0.1.132 → 0.1.134
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/esm/admin/organisms/admin_sidebar/adminSidebar.css.js +2 -0
- package/lib/esm/admin/theme/adminSurface.css.js +0 -2
- package/lib/esm/atomic/molecules/markdown/components/MarkdownDelete.css.js +1 -0
- package/lib/esm/atomic/molecules/markdown/components/MarkdownTable.css.js +0 -1
- package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js +2 -2
- package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js.map +1 -1
- package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js +22 -22
- package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js.map +1 -1
- package/lib/types/backoffice/molecules/backoffice_tabs/backofficeTabs.css.d.ts.map +1 -1
- package/lib/types/backoffice/molecules/sidebar_nav_item/SidebarNavItem.d.ts +2 -1
- package/lib/types/backoffice/molecules/sidebar_nav_item/SidebarNavItem.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
/* empty css */
|
|
3
|
-
/* empty css */
|
|
4
3
|
//#region src/atomic/molecules/markdown/components/MarkdownTable.css.ts
|
|
5
4
|
var e = "tr18yy0 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbn8h txvbqbusr txvbqbuvn", t = "tr18yy2 tr18yy1 txvbqbbl8 txvbqbana txvbqbtqh txvbqb17w0";
|
|
6
5
|
//#endregion
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
//#region src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts
|
|
4
4
|
var e = "_4p4jiq0 txvbqbdsb txvbqbf8o txvbqbfet txvbqbs65 txvbqbuvn", t = {
|
|
5
5
|
pill: "_4p4jiq1 txvbqbuxg txvbqb2is txvbqb196f txvbqb1uy txvbqb2et txvbqb17u",
|
|
6
|
-
underline: "_4p4jiq2
|
|
6
|
+
underline: "_4p4jiq2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqb17w0 txvbqbff6 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqb196b"
|
|
7
7
|
}, n = {
|
|
8
8
|
pill: "_4p4jiq4 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqb2is txvbqb9j txvbqbik",
|
|
9
|
-
underline: "_4p4jiq5
|
|
9
|
+
underline: "_4p4jiq5 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqb2f6 txvbqb1g5 txvbqb8oi txvbqbik txvbqb9j"
|
|
10
10
|
}, r = {
|
|
11
11
|
pill: "_4p4jiq6 txvbqb1963 txvbqb11p txvbqb19bj txvbqbcol",
|
|
12
12
|
underline: "_4p4jiq7 txvbqb19bj txvbqb512"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"backofficeTabs.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const tabs = sprinkles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n gap: 1,\n maxWidth: 'full',\n overflowX: 'auto',\n});\n\nexport const tabsVariant = {\n pill: sprinkles({\n padding: 1,\n borderRadius: 'full',\n backgroundColor: 'surfaceMuted',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n }),\n underline: sprinkles({\n gap:
|
|
1
|
+
{"version":3,"file":"backofficeTabs.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const tabs = sprinkles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n gap: 1,\n maxWidth: 'full',\n overflowX: 'auto',\n});\n\nexport const tabsVariant = {\n pill: sprinkles({\n padding: 1,\n borderRadius: 'full',\n backgroundColor: 'surfaceMuted',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n }),\n underline: sprinkles({\n width: 'full',\n gap: 2,\n paddingX: 3,\n paddingY: 1.5,\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'borderSubtle',\n backgroundColor: 'surface',\n }),\n};\n\nconst tabBase = sprinkles({\n display: 'inline-flex',\n flexShrink: 0,\n alignItems: 'center',\n borderWidth: 'default',\n borderStyle: 'solid',\n backgroundColor: 'transparent',\n color: 'textSecondary',\n cursor: 'pointer',\n fontWeight: 'medium',\n});\n\nexport const tabVariant = {\n pill: sprinkles({\n paddingX: 3,\n paddingY: 1.5,\n borderRadius: 'full',\n fontSize: 'sm',\n borderColor: 'transparent',\n }),\n underline: sprinkles({\n paddingX: 3,\n paddingY: 2,\n borderRadius: 'none',\n borderWidth: 0,\n borderBottomWidth: 'default',\n borderColor: 'transparent',\n fontSize: 'sm',\n }),\n};\n\nexport const activeVariant = {\n pill: sprinkles({\n backgroundColor: 'primaryLight',\n borderColor: 'primary',\n color: 'primary',\n boxShadow: 'primaryLightRing',\n }),\n underline: sprinkles({\n color: 'primary',\n borderBottomColor: 'primary',\n }),\n};\n\nexport const tab = style([\n tabBase,\n stateSprinkles({\n color: {\n hover: 'text',\n },\n backgroundColor: {\n hover: 'surface',\n },\n }),\n {\n ':focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: 2,\n },\n },\n]);\n"],"mappings":""}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { cx as e } from "../../../theme/tools.js";
|
|
2
|
-
import { actionSlot as t, actions as ee, actionsVisible as te, badge as
|
|
2
|
+
import { actionSlot as t, actions as ee, actionsVisible as te, badge as n, badgeCollapsed as r, dragHandle as i, icon as a, iconNested as o, item as s, itemActive as ne, itemCollapsed as re, itemDisabled as ie, itemDragging as ae, itemNested as oe, label as se, labelCollapsed as ce, link as c } from "./sidebarNavItem.css.js";
|
|
3
3
|
import { useCallback as le, useEffect as ue, useRef as l, useState as u } from "react";
|
|
4
4
|
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
5
5
|
import m from "@plumile/router/routing/Link.js";
|
|
6
6
|
//#region src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx
|
|
7
|
-
var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabled: b = !1, onClick: de, collapsed: x = !1, nested: S = !1, ariaLabel: fe, className: C, actionSlot: w, dragHandleSlot: T, dragHandleLabel: E, dragHandleProps: D, isDragging: O = !1 }) => {
|
|
8
|
-
let k = l(null), A = l(null), [j, M] = u(!1), [N, P] = u(!1), F = [
|
|
9
|
-
x && F.push(re), S && !x && F.push(oe), y && F.push(
|
|
7
|
+
var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabled: b = !1, onClick: de, collapsed: x = !1, nested: S = !1, ariaLabel: fe, className: C, actionSlot: w, dragHandleSlot: T, dragHandleLabel: E, dragHandleProps: D, isDragging: O = !1, actionsVisibility: pe = "auto" }) => {
|
|
8
|
+
let k = l(null), A = l(null), [j, M] = u(!1), [N, P] = u(!1), F = [s];
|
|
9
|
+
x && F.push(re), S && !x && F.push(oe), y && F.push(ne), b && F.push(ie), O && F.push(ae), C != null && F.push(C);
|
|
10
10
|
let I = e(...F), L = fe;
|
|
11
11
|
L == null && typeof m == "string" && (L = m);
|
|
12
12
|
let R, z;
|
|
@@ -15,23 +15,23 @@ var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabl
|
|
|
15
15
|
y && (B = "page");
|
|
16
16
|
let V = null;
|
|
17
17
|
_ != null && (V = /* @__PURE__ */ f("span", {
|
|
18
|
-
className: e(
|
|
18
|
+
className: e(a, { [o]: S && !x }),
|
|
19
19
|
children: _
|
|
20
20
|
}));
|
|
21
21
|
let H = null;
|
|
22
22
|
x && (H = ce);
|
|
23
|
-
let
|
|
23
|
+
let me = e(se, H), U = null;
|
|
24
24
|
if (v != null) {
|
|
25
25
|
let t = null;
|
|
26
|
-
x && (t =
|
|
27
|
-
className: e(
|
|
26
|
+
x && (t = r), U = /* @__PURE__ */ f("span", {
|
|
27
|
+
className: e(n, t),
|
|
28
28
|
children: v
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
let W = /* @__PURE__ */ p(d, { children: [
|
|
32
32
|
V,
|
|
33
33
|
/* @__PURE__ */ f("span", {
|
|
34
|
-
className:
|
|
34
|
+
className: me,
|
|
35
35
|
children: m
|
|
36
36
|
}),
|
|
37
37
|
U
|
|
@@ -43,15 +43,15 @@ var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabl
|
|
|
43
43
|
ue(() => (K || (M(!1), P(!1), q()), () => {
|
|
44
44
|
q();
|
|
45
45
|
}), [q, K]);
|
|
46
|
-
let
|
|
46
|
+
let he = () => {
|
|
47
47
|
K && (q(), A.current = setTimeout(() => {
|
|
48
48
|
M(!0);
|
|
49
49
|
}, 150));
|
|
50
|
-
}, he = () => {
|
|
51
|
-
q(), M(!1);
|
|
52
50
|
}, ge = () => {
|
|
51
|
+
q(), M(!1);
|
|
52
|
+
}, _e = () => {
|
|
53
53
|
K && P(!0);
|
|
54
|
-
},
|
|
54
|
+
}, ve = (e) => {
|
|
55
55
|
if (!K) {
|
|
56
56
|
P(!1);
|
|
57
57
|
return;
|
|
@@ -82,13 +82,13 @@ var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabl
|
|
|
82
82
|
onClick: G,
|
|
83
83
|
children: W
|
|
84
84
|
});
|
|
85
|
-
let
|
|
86
|
-
|
|
87
|
-
let
|
|
85
|
+
let ye = K && (pe === "always" || j || N), Y;
|
|
86
|
+
ye && (Y = te);
|
|
87
|
+
let X = e(ee, Y), Z = null;
|
|
88
88
|
T != null && !x && (Z = /* @__PURE__ */ f("button", {
|
|
89
89
|
...D,
|
|
90
90
|
type: "button",
|
|
91
|
-
className: e(
|
|
91
|
+
className: e(i, D?.className),
|
|
92
92
|
"aria-label": E,
|
|
93
93
|
title: E,
|
|
94
94
|
children: T
|
|
@@ -100,14 +100,14 @@ var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabl
|
|
|
100
100
|
}));
|
|
101
101
|
let $ = null;
|
|
102
102
|
return K && ($ = /* @__PURE__ */ p("span", {
|
|
103
|
-
className:
|
|
103
|
+
className: X,
|
|
104
104
|
children: [Z, Q]
|
|
105
105
|
})), /* @__PURE__ */ p("div", {
|
|
106
106
|
className: I,
|
|
107
|
-
onMouseEnter:
|
|
108
|
-
onMouseLeave:
|
|
109
|
-
onFocusCapture:
|
|
110
|
-
onBlurCapture:
|
|
107
|
+
onMouseEnter: he,
|
|
108
|
+
onMouseLeave: ge,
|
|
109
|
+
onFocusCapture: _e,
|
|
110
|
+
onBlurCapture: ve,
|
|
111
111
|
ref: k,
|
|
112
112
|
role: "listitem",
|
|
113
113
|
children: [J, $]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type JSX,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n label: ReactNode;\n href?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isActive?: boolean;\n disabled?: boolean;\n onClick?: () => void;\n collapsed?: boolean;\n nested?: boolean;\n ariaLabel?: string;\n className?: string;\n actionSlot?: ReactNode;\n dragHandleSlot?: ReactNode;\n dragHandleLabel?: string;\n dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n isDragging?: boolean;\n};\n\nexport const SidebarNavItem = ({\n label,\n href,\n icon,\n badge,\n isActive = false,\n disabled = false,\n onClick,\n collapsed = false,\n nested = false,\n ariaLabel,\n className,\n actionSlot,\n dragHandleSlot,\n dragHandleLabel,\n dragHandleProps,\n isDragging = false,\n}: SidebarNavItemProps): JSX.Element => {\n const itemRef = useRef<HTMLDivElement | null>(null);\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isHoverIntent, setIsHoverIntent] = useState(false);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n const itemClassNames: (string | null | undefined)[] = [styles.item];\n if (collapsed) {\n itemClassNames.push(styles.itemCollapsed);\n }\n if (nested && !collapsed) {\n itemClassNames.push(styles.itemNested);\n }\n if (isActive) {\n itemClassNames.push(styles.itemActive);\n }\n if (disabled) {\n itemClassNames.push(styles.itemDisabled);\n }\n if (isDragging) {\n itemClassNames.push(styles.itemDragging);\n }\n if (className != null) {\n itemClassNames.push(className);\n }\n const itemClassName = cx(...itemClassNames);\n\n let resolvedAriaLabel: string | undefined = ariaLabel;\n if (resolvedAriaLabel == null && typeof label === 'string') {\n resolvedAriaLabel = label;\n }\n\n let collapsedAriaLabel: string | undefined;\n let collapsedTitle: string | undefined;\n if (collapsed) {\n collapsedAriaLabel = resolvedAriaLabel;\n collapsedTitle = resolvedAriaLabel;\n }\n\n let ariaCurrent: 'page' | undefined;\n if (isActive) {\n ariaCurrent = 'page';\n }\n\n let iconNode: JSX.Element | null = null;\n if (icon != null) {\n iconNode = (\n <span\n className={cx(styles.icon, {\n [styles.iconNested]: nested && !collapsed,\n })}\n >\n {icon}\n </span>\n );\n }\n\n let labelExtraClass: string | null = null;\n if (collapsed) {\n labelExtraClass = styles.labelCollapsed;\n }\n const labelClassName = cx(styles.label, labelExtraClass);\n\n let badgeNode: JSX.Element | null = null;\n if (badge != null) {\n let badgeExtraClass: string | null = null;\n if (collapsed) {\n badgeExtraClass = styles.badgeCollapsed;\n }\n badgeNode = (\n <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n );\n }\n\n const content = (\n <>\n {iconNode}\n <span className={labelClassName}>{label}</span>\n {badgeNode}\n </>\n );\n\n const handleClick = (): void => {\n if (onClick != null) {\n onClick();\n }\n };\n\n const shouldRenderActions =\n !collapsed &&\n !disabled &&\n !isDragging &&\n (actionSlot != null || dragHandleSlot != null);\n\n const clearHoverTimeout = useCallback((): void => {\n if (hoverTimeoutRef.current != null) {\n clearTimeout(hoverTimeoutRef.current);\n hoverTimeoutRef.current = null;\n }\n }, []);\n\n useEffect(() => {\n if (!shouldRenderActions) {\n setIsHoverIntent(false);\n setIsFocusWithin(false);\n clearHoverTimeout();\n }\n\n return () => {\n clearHoverTimeout();\n };\n }, [clearHoverTimeout, shouldRenderActions]);\n\n const handleMouseEnter = (): void => {\n if (!shouldRenderActions) {\n return;\n }\n clearHoverTimeout();\n hoverTimeoutRef.current = setTimeout(() => {\n setIsHoverIntent(true);\n }, 150);\n };\n\n const handleMouseLeave = (): void => {\n clearHoverTimeout();\n setIsHoverIntent(false);\n };\n\n const handleFocusCapture = (): void => {\n if (!shouldRenderActions) {\n return;\n }\n setIsFocusWithin(true);\n };\n\n const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n if (!shouldRenderActions) {\n setIsFocusWithin(false);\n return;\n }\n const nextTarget = event.relatedTarget as Node | null;\n if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n return;\n }\n setIsFocusWithin(false);\n };\n\n let mainNode: JSX.Element;\n if (disabled) {\n mainNode = (\n <span\n className={styles.link}\n aria-disabled=\"true\"\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n >\n {content}\n </span>\n );\n } else if (href != null) {\n mainNode = (\n <RouterLink\n to={href}\n className={styles.link}\n aria-current={ariaCurrent}\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n onClick={handleClick}\n >\n {content}\n </RouterLink>\n );\n } else {\n mainNode = (\n <button\n type=\"button\"\n className={styles.link}\n onClick={handleClick}\n aria-current={ariaCurrent}\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n >\n {content}\n </button>\n );\n }\n\n const isActionsVisible =\n shouldRenderActions && (isHoverIntent || isFocusWithin);\n let actionsVisibilityClass: string | undefined;\n if (isActionsVisible) {\n actionsVisibilityClass = styles.actionsVisible;\n }\n const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n let dragHandleNode: JSX.Element | null = null;\n if (dragHandleSlot != null && !collapsed) {\n dragHandleNode = (\n <button\n {...dragHandleProps}\n type=\"button\"\n className={cx(styles.dragHandle, dragHandleProps?.className)}\n aria-label={dragHandleLabel}\n title={dragHandleLabel}\n >\n {dragHandleSlot}\n </button>\n );\n }\n\n let actionNode: JSX.Element | null = null;\n if (actionSlot != null && !collapsed) {\n actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n }\n\n let actionsNode: JSX.Element | null = null;\n if (shouldRenderActions) {\n actionsNode = (\n <span className={actionsClassName}>\n {dragHandleNode}\n {actionNode}\n </span>\n );\n }\n\n return (\n <div\n className={itemClassName}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocusCapture={handleFocusCapture}\n onBlurCapture={handleBlurCapture}\n ref={itemRef}\n role=\"listitem\"\n >\n {mainNode}\n {actionsNode}\n </div>\n );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type JSX,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n label: ReactNode;\n href?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isActive?: boolean;\n disabled?: boolean;\n onClick?: () => void;\n collapsed?: boolean;\n nested?: boolean;\n ariaLabel?: string;\n className?: string;\n actionSlot?: ReactNode;\n dragHandleSlot?: ReactNode;\n dragHandleLabel?: string;\n dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n isDragging?: boolean;\n actionsVisibility?: 'auto' | 'always';\n};\n\nexport const SidebarNavItem = ({\n label,\n href,\n icon,\n badge,\n isActive = false,\n disabled = false,\n onClick,\n collapsed = false,\n nested = false,\n ariaLabel,\n className,\n actionSlot,\n dragHandleSlot,\n dragHandleLabel,\n dragHandleProps,\n isDragging = false,\n actionsVisibility = 'auto',\n}: SidebarNavItemProps): JSX.Element => {\n const itemRef = useRef<HTMLDivElement | null>(null);\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isHoverIntent, setIsHoverIntent] = useState(false);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n const itemClassNames: (string | null | undefined)[] = [styles.item];\n if (collapsed) {\n itemClassNames.push(styles.itemCollapsed);\n }\n if (nested && !collapsed) {\n itemClassNames.push(styles.itemNested);\n }\n if (isActive) {\n itemClassNames.push(styles.itemActive);\n }\n if (disabled) {\n itemClassNames.push(styles.itemDisabled);\n }\n if (isDragging) {\n itemClassNames.push(styles.itemDragging);\n }\n if (className != null) {\n itemClassNames.push(className);\n }\n const itemClassName = cx(...itemClassNames);\n\n let resolvedAriaLabel: string | undefined = ariaLabel;\n if (resolvedAriaLabel == null && typeof label === 'string') {\n resolvedAriaLabel = label;\n }\n\n let collapsedAriaLabel: string | undefined;\n let collapsedTitle: string | undefined;\n if (collapsed) {\n collapsedAriaLabel = resolvedAriaLabel;\n collapsedTitle = resolvedAriaLabel;\n }\n\n let ariaCurrent: 'page' | undefined;\n if (isActive) {\n ariaCurrent = 'page';\n }\n\n let iconNode: JSX.Element | null = null;\n if (icon != null) {\n iconNode = (\n <span\n className={cx(styles.icon, {\n [styles.iconNested]: nested && !collapsed,\n })}\n >\n {icon}\n </span>\n );\n }\n\n let labelExtraClass: string | null = null;\n if (collapsed) {\n labelExtraClass = styles.labelCollapsed;\n }\n const labelClassName = cx(styles.label, labelExtraClass);\n\n let badgeNode: JSX.Element | null = null;\n if (badge != null) {\n let badgeExtraClass: string | null = null;\n if (collapsed) {\n badgeExtraClass = styles.badgeCollapsed;\n }\n badgeNode = (\n <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n );\n }\n\n const content = (\n <>\n {iconNode}\n <span className={labelClassName}>{label}</span>\n {badgeNode}\n </>\n );\n\n const handleClick = (): void => {\n if (onClick != null) {\n onClick();\n }\n };\n\n const shouldRenderActions =\n !collapsed &&\n !disabled &&\n !isDragging &&\n (actionSlot != null || dragHandleSlot != null);\n\n const clearHoverTimeout = useCallback((): void => {\n if (hoverTimeoutRef.current != null) {\n clearTimeout(hoverTimeoutRef.current);\n hoverTimeoutRef.current = null;\n }\n }, []);\n\n useEffect(() => {\n if (!shouldRenderActions) {\n setIsHoverIntent(false);\n setIsFocusWithin(false);\n clearHoverTimeout();\n }\n\n return () => {\n clearHoverTimeout();\n };\n }, [clearHoverTimeout, shouldRenderActions]);\n\n const handleMouseEnter = (): void => {\n if (!shouldRenderActions) {\n return;\n }\n clearHoverTimeout();\n hoverTimeoutRef.current = setTimeout(() => {\n setIsHoverIntent(true);\n }, 150);\n };\n\n const handleMouseLeave = (): void => {\n clearHoverTimeout();\n setIsHoverIntent(false);\n };\n\n const handleFocusCapture = (): void => {\n if (!shouldRenderActions) {\n return;\n }\n setIsFocusWithin(true);\n };\n\n const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n if (!shouldRenderActions) {\n setIsFocusWithin(false);\n return;\n }\n const nextTarget = event.relatedTarget as Node | null;\n if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n return;\n }\n setIsFocusWithin(false);\n };\n\n let mainNode: JSX.Element;\n if (disabled) {\n mainNode = (\n <span\n className={styles.link}\n aria-disabled=\"true\"\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n >\n {content}\n </span>\n );\n } else if (href != null) {\n mainNode = (\n <RouterLink\n to={href}\n className={styles.link}\n aria-current={ariaCurrent}\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n onClick={handleClick}\n >\n {content}\n </RouterLink>\n );\n } else {\n mainNode = (\n <button\n type=\"button\"\n className={styles.link}\n onClick={handleClick}\n aria-current={ariaCurrent}\n aria-label={collapsedAriaLabel}\n title={collapsedTitle}\n >\n {content}\n </button>\n );\n }\n\n const isActionsVisible =\n shouldRenderActions &&\n (actionsVisibility === 'always' || isHoverIntent || isFocusWithin);\n let actionsVisibilityClass: string | undefined;\n if (isActionsVisible) {\n actionsVisibilityClass = styles.actionsVisible;\n }\n const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n let dragHandleNode: JSX.Element | null = null;\n if (dragHandleSlot != null && !collapsed) {\n dragHandleNode = (\n <button\n {...dragHandleProps}\n type=\"button\"\n className={cx(styles.dragHandle, dragHandleProps?.className)}\n aria-label={dragHandleLabel}\n title={dragHandleLabel}\n >\n {dragHandleSlot}\n </button>\n );\n }\n\n let actionNode: JSX.Element | null = null;\n if (actionSlot != null && !collapsed) {\n actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n }\n\n let actionsNode: JSX.Element | null = null;\n if (shouldRenderActions) {\n actionsNode = (\n <span className={actionsClassName}>\n {dragHandleNode}\n {actionNode}\n </span>\n );\n }\n\n return (\n <div\n className={itemClassName}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocusCapture={handleFocusCapture}\n onBlurCapture={handleBlurCapture}\n ref={itemRef}\n role=\"listitem\"\n >\n {mainNode}\n {actionsNode}\n </div>\n );\n};\n\nexport default SidebarNavItem;\n"],"mappings":";;;;;;AAmBA,IAAM,IAAa,GAsBN,KAAkB,EAC7B,OAAA,GACA,SACA,MAAA,GACA,OAAA,GACA,cAAW,IACX,cAAW,IACX,aACA,eAAY,IACZ,YAAS,IACT,eACA,cACA,YAAA,GACA,mBACA,oBACA,oBACA,gBAAa,IACb,wBAAoB,aACkB;CACtC,IAAM,IAAU,EAA8B,KAAK,EAC7C,IAAkB,EAA6C,KAAK,EACpE,CAAC,GAAe,KAAoB,EAAS,GAAM,EACnD,CAAC,GAAe,KAAoB,EAAS,GAAM,EAEnD,IAAgD,CAAC,EAAY;CAgBnE,AAfI,KACF,EAAe,KAAK,GAAqB,EAEvC,KAAU,CAAC,KACb,EAAe,KAAK,GAAkB,EAEpC,KACF,EAAe,KAAK,GAAkB,EAEpC,KACF,EAAe,KAAK,GAAoB,EAEtC,KACF,EAAe,KAAK,GAAoB,EAEtC,KAAa,QACf,EAAe,KAAK,EAAU;CAEhC,IAAM,IAAgB,EAAG,GAAG,EAAe,EAEvC,IAAwC;CAC5C,AAAI,KAAqB,QAAQ,OAAO,KAAU,aAChD,IAAoB;CAGtB,IAAI,GACA;CACJ,AAAI,MACF,IAAqB,GACrB,IAAiB;CAGnB,IAAI;CACJ,AAAI,MACF,IAAc;CAGhB,IAAI,IAA+B;CACnC,AAAI,KAAQ,SACV,IACE,kBAAC,QAAD;EACE,WAAW,EAAG,GAAa,GACxB,IAAoB,KAAU,CAAC,GACjC,CAAC;YAED;EACI,CAAA;CAIX,IAAI,IAAiC;CACrC,AAAI,MACF,IAAkB;CAEpB,IAAM,KAAiB,EAAG,IAAc,EAAgB,EAEpD,IAAgC;CACpC,IAAI,KAAS,MAAM;EACjB,IAAI,IAAiC;EAIrC,AAHI,MACF,IAAkB,IAEpB,IACE,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAc,EAAgB;aAAG;GAAa,CAAA;;CAItE,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EACD,kBAAC,QAAD;GAAM,WAAW;aAAiB;GAAa,CAAA;EAC9C;EACA,EAAA,CAAA,EAGC,UAA0B;EAC9B,AAAI,MACO;IAIP,IACJ,CAAC,KACD,CAAC,KACD,CAAC,MACA,KAAc,QAAQ,KAAkB,OAErC,IAAoB,SAAwB;EAChD,AAAI,EAAgB,WAAW,SAC7B,aAAa,EAAgB,QAAQ,EACrC,EAAgB,UAAU;IAE3B,EAAE,CAAC;CAEN,UACO,MACH,EAAiB,GAAM,EACvB,EAAiB,GAAM,EACvB,GAAmB,SAGR;EACX,GAAmB;KAEpB,CAAC,GAAmB,EAAoB,CAAC;CAE5C,IAAM,WAA+B;EAC9B,MAGL,GAAmB,EACnB,EAAgB,UAAU,iBAAiB;GACzC,EAAiB,GAAK;KACrB,IAAI;IAGH,WAA+B;EAEnC,AADA,GAAmB,EACnB,EAAiB,GAAM;IAGnB,WAAiC;EAChC,KAGL,EAAiB,GAAK;IAGlB,MAAqB,MAA4C;EACrE,IAAI,CAAC,GAAqB;GACxB,EAAiB,GAAM;GACvB;;EAEF,IAAM,IAAa,EAAM;EACrB,KAAc,QAAQ,EAAQ,SAAS,SAAS,EAAW,IAG/D,EAAiB,GAAM;IAGrB;CACJ,AAYE,IAZE,IAEA,kBAAC,QAAD;EACE,WAAW;EACX,iBAAc;EACd,cAAY;EACZ,OAAO;YAEN;EACI,CAAA,GAEA,KAAQ,OAef,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,SAAS;EACT,gBAAc;EACd,cAAY;EACZ,OAAO;YAEN;EACM,CAAA,GAtBT,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,gBAAc;EACd,cAAY;EACZ,OAAO;EACP,SAAS;YAER;EACU,CAAA;CAiBjB,IAAM,KACJ,MACC,OAAsB,YAAY,KAAiB,IAClD;CACJ,AAAI,OACF,IAAyB;CAE3B,IAAM,IAAmB,EAAG,IAAgB,EAAuB,EAE/D,IAAqC;CACzC,AAAI,KAAkB,QAAQ,CAAC,MAC7B,IACE,kBAAC,UAAD;EACE,GAAI;EACJ,MAAK;EACL,WAAW,EAAG,GAAmB,GAAiB,UAAU;EAC5D,cAAY;EACZ,OAAO;YAEN;EACM,CAAA;CAIb,IAAI,IAAiC;CACrC,AAAI,KAAc,QAAQ,CAAC,MACzB,IAAa,kBAAC,QAAD;EAAM,WAAW;YAAoB;EAAkB,CAAA;CAGtE,IAAI,IAAkC;CAUtC,OATI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACG,GACA,EACI;MAKT,kBAAC,OAAD;EACE,WAAW;EACX,cAAc;EACd,cAAc;EACd,gBAAgB;EAChB,eAAe;EACf,KAAK;EACL,MAAK;YAPP,CASG,GACA,EACG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"backofficeTabs.css.d.ts","sourceRoot":"","sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,WAAW;;;
|
|
1
|
+
{"version":3,"file":"backofficeTabs.css.d.ts","sourceRoot":"","sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,WAAW;;;CAoBvB,CAAC;AAcF,eAAO,MAAM,UAAU;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAWzB,CAAC;AAEF,eAAO,MAAM,GAAG,QAgBd,CAAC"}
|
|
@@ -16,7 +16,8 @@ export type SidebarNavItemProps = {
|
|
|
16
16
|
dragHandleLabel?: string;
|
|
17
17
|
dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;
|
|
18
18
|
isDragging?: boolean;
|
|
19
|
+
actionsVisibility?: 'auto' | 'always';
|
|
19
20
|
};
|
|
20
|
-
export declare const SidebarNavItem: ({ label, href, icon, badge, isActive, disabled, onClick, collapsed, nested, ariaLabel, className, actionSlot, dragHandleSlot, dragHandleLabel, dragHandleProps, isDragging, }: SidebarNavItemProps) => JSX.Element;
|
|
21
|
+
export declare const SidebarNavItem: ({ label, href, icon, badge, isActive, disabled, onClick, collapsed, nested, ariaLabel, className, actionSlot, dragHandleSlot, dragHandleLabel, dragHandleProps, isDragging, actionsVisibility, }: SidebarNavItemProps) => JSX.Element;
|
|
21
22
|
export default SidebarNavItem;
|
|
22
23
|
//# sourceMappingURL=SidebarNavItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarNavItem.d.ts","sourceRoot":"","sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,oBAAoB,EAGzB,KAAK,GAAG,EACR,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SidebarNavItem.d.ts","sourceRoot":"","sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,oBAAoB,EAGzB,KAAK,GAAG,EACR,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,kMAkB5B,mBAAmB,KAAG,GAAG,CAAC,OAgP5B,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumile/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.134",
|
|
4
4
|
"description": "Shared React UI primitives and theme for Kronex applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"tslib": "^2.8.1"
|
|
166
166
|
},
|
|
167
167
|
"devDependencies": {
|
|
168
|
-
"@plumile/router": "^0.1.
|
|
168
|
+
"@plumile/router": "^0.1.134",
|
|
169
169
|
"@types/react": "19.2.14",
|
|
170
170
|
"@types/react-dom": "19.2.3",
|
|
171
171
|
"i18next": "26.1.0",
|