@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.
@@ -4,6 +4,8 @@
4
4
  /* empty css */
5
5
  /* empty css */
6
6
  /* empty css */
7
+ /* empty css */
8
+ /* empty css */
7
9
  /* empty css */
8
10
  import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
9
11
  //#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts
@@ -6,8 +6,6 @@
6
6
  /* empty css */
7
7
  /* empty css */
8
8
  /* empty css */
9
- /* empty css */
10
- /* empty css */
11
9
  import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
12
10
  //#region src/admin/theme/adminSurface.css.ts
13
11
  var t = e({
@@ -1,4 +1,5 @@
1
1
  /* empty css */
2
+ /* empty css */
2
3
  /* empty css */
3
4
  //#region src/atomic/molecules/markdown/components/MarkdownDelete.css.ts
4
5
  var e = "_1gyncxq1 _1gyncxq0 txvbqb3g txvbqb3k";
@@ -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 txvbqbynf txvbqbzl0 txvbqb10il txvbqbvuo txvbqbffj txvbqb1g5 txvbqb2e3 txvbqb1933"
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 txvbqbynf txvbqbzl0 txvbqb10jb txvbqbvve txvbqb2f6 txvbqb1g5 txvbqb8oi txvbqbik txvbqb9j"
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: 3,\n paddingX: 0,\n paddingY: 0,\n borderWidth: 0,\n borderStyle: 'none',\n backgroundColor: 'transparent',\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: 0,\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
+ {"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 ne, badgeCollapsed as n, dragHandle as r, icon as i, iconNested as a, item as o, itemActive as s, 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";
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 = [o];
9
- x && F.push(re), S && !x && F.push(oe), y && F.push(s), b && F.push(ie), O && F.push(ae), C != null && F.push(C);
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(i, { [a]: S && !x }),
18
+ className: e(a, { [o]: S && !x }),
19
19
  children: _
20
20
  }));
21
21
  let H = null;
22
22
  x && (H = ce);
23
- let pe = e(se, H), U = null;
23
+ let me = e(se, H), U = null;
24
24
  if (v != null) {
25
25
  let t = null;
26
- x && (t = n), U = /* @__PURE__ */ f("span", {
27
- className: e(ne, t),
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: pe,
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 me = () => {
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
- }, _e = (e) => {
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 Y = K && (j || N), X;
86
- Y && (X = te);
87
- let ve = e(ee, X), Z = null;
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(r, D?.className),
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: ve,
103
+ className: X,
104
104
  children: [Z, Q]
105
105
  })), /* @__PURE__ */ p("div", {
106
106
  className: I,
107
- onMouseEnter: me,
108
- onMouseLeave: he,
109
- onFocusCapture: ge,
110
- onBlurCapture: _e,
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":"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"}
@@ -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;;;CAiBvB,CAAC;AAcF,eAAO,MAAM,UAAU;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAWzB,CAAC;AAEF,eAAO,MAAM,GAAG,QAgBd,CAAC"}
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;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,+KAiB5B,mBAAmB,KAAG,GAAG,CAAC,OA+O5B,CAAC;AAEF,eAAe,cAAc,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.132",
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.132",
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",