@stenajs-webui/core 23.1.0 → 23.3.0

package/dist/components/events/BlockKeyboardEvents.d.ts

@@ -2,8 +2,14 @@ import * as React from "react";
 import { BoxProps } from "../layout/box/Box";
 export interface BlockKeyboardEventsProps extends BoxProps {
     /**
-     * Key or keys that will be blocked. If not set, all keys are blocked.
+     * Key or keys that will be blocked from bubbling to parents.
+     * If not set, all keys are blocked from bubbling.
      */
     blockedKeys?: string | Array<string>;
+    /**
+     * Whether to also block mouse events from bubbling.
+     * Default: false
+     */
+    blockMouse?: boolean;
 }
 export declare const BlockKeyboardEvents: React.FC<BlockKeyboardEventsProps>;

package/dist/index.es.js

@@ -1,12 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._separatorLine_nzfcz_1{display:flex;border:0;margin:0;flex:none}._visuallyHidden_1gevf_1{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._text_1iisw_1{--swui-text-color: var(--swui-text-primary-color);--swui-text-color-caption: var(--lhds-color-ui-600);--swui-text-color-overline: var(--lhds-color-ui-600);--swui-text-font-family: var(--swui-font-primary);--swui-text-font-weight: var(--swui-font-weight-text);--current-color: var(--swui-text-color);--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium);--current-font-weight: var(--swui-text-font-weight);--current-letter-spacing: var(--swui-text-letter-spacing);font-size:var(--current-font-size);line-height:var(--current-line-height);color:var(--current-color);letter-spacing:var(--current-letter-spacing);font-family:var(--swui-text-font-family);font-weight:var(--current-font-weight)}._text_1iisw_1._bold_1iisw_27{--current-font-weight: var(--swui-font-weight-text-bold)}._text_1iisw_1._caption_1iisw_31{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small);--current-color: var(--swui-text-color-caption);--current-letter-spacing: 0;font-style:italic}._text_1iisw_1._overline_1iisw_39{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller);--current-color: var(--swui-text-color-overline);--current-font-weight: var(--swui-font-weight-text-bold);--current-letter-spacing: .1rem;text-transform:uppercase}._text_1iisw_1._large_1iisw_48{--current-font-size: var(--swui-font-size-large);--current-line-height: var(--swui-line-height-large)}._text_1iisw_1._medium_1iisw_53{--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium)}._text_1iisw_1._small_1iisw_58{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small)}._text_1iisw_1._smaller_1iisw_63{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller)}._heading_1cnsg_1{font-size:2rem;color:var(--swui-text-primary-color);letter-spacing:0;margin:0;line-height:var(--swui-line-height);font-family:var(--swui-font-primary);font-weight:var(--swui-font-weight-text-bold)}._heading_1cnsg_1._h1_1cnsg_10{font-size:2.8rem}._heading_1cnsg_1._h2_1cnsg_14{font-size:2.4rem}._heading_1cnsg_1._h3_1cnsg_18{font-size:2rem}._heading_1cnsg_1._h4_1cnsg_22{font-size:1.8rem}._heading_1cnsg_1._h5_1cnsg_26{font-size:1.6rem}._heading_1cnsg_1._h6_1cnsg_30{font-size:1.4rem}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
 import { cssColor as N } from "@stenajs-webui/theme";
 import { jsx as c, Fragment as T, jsxs as U } from "react/jsx-runtime";
-import V, { forwardRef as f, useState as h, useCallback as m, useLayoutEffect as F, useRef as g, createContext as j, useEffect as p, useMemo as S, useContext as q, isValidElement as B, Fragment as W } from "react";
+import V, { forwardRef as f, useState as h, useCallback as m, useLayoutEffect as F, useRef as g, createContext as B, useEffect as p, useMemo as S, useContext as j, isValidElement as q, Fragment as W } from "react";
 import E from "@emotion/styled";
 import { system as X, background as G, border as Y, borderRight as K, borderLeft as Z, borderTop as J, borderBottom as Q, borderColor as ee, borderRadius as te, borderStyle as re, borderWidth as ne, boxShadow as ue, flexbox as oe, overflow as se, position as ie, layout as ae, zIndex as ce, left as le, right as de, top as pe, bottom as me } from "styled-system";
 import { memoize as he, pickBy as P, debounce as fe } from "lodash-es";
 import O from "classnames";
-const ge = "_separatorLine_nzfcz_1", ve = {
+const ge = "_separatorLine_nzfcz_1", ye = {
   separatorLine: ge
 }, lt = f(
   ({
@@ -17,7 +17,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   }, u) => /* @__PURE__ */ c(
     "hr",
     {
-      className: ve.separatorLine,
+      className: ye.separatorLine,
       "aria-hidden": !0,
       color: e,
       style: {
@@ -28,7 +28,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
       ref: u
     }
   )
-), ye = E.button`
+), ve = E.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -64,11 +64,11 @@ const ge = "_separatorLine_nzfcz_1", ve = {
     children: i,
     background: l = "transparent",
     hoverBackground: d,
-    focusBackground: v,
+    focusBackground: y,
     type: k = "button",
     ..._
-  }, H) => /* @__PURE__ */ c(
-    ye,
+  }, D) => /* @__PURE__ */ c(
+    ve,
     {
       opacityOnHover: s,
       title: n,
@@ -78,10 +78,10 @@ const ge = "_separatorLine_nzfcz_1", ve = {
       onDoubleClick: r,
       disableFocusHighlight: e,
       pointer: !!(t || r) && !o,
-      ref: H,
+      ref: D,
       background: l,
       hoverBackground: d,
-      focusBackground: v,
+      focusBackground: y,
       type: k,
       ..._,
       children: i
@@ -721,12 +721,12 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   function({ num: t = 1, ...r }, n) {
     return /* @__PURE__ */ c(b, { spacing: t, ref: n, ...r });
   }
-), Le = E.div`
+), Ae = E.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`, vt = ({
+`, yt = ({
   half: e = !1,
   horizontal: t = !1,
   num: r = 1,
@@ -734,7 +734,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
 }) => {
   const u = r * (e ? 0.5 : 1);
   return /* @__PURE__ */ c(
-    Le,
+    Ae,
     {
       style: {
         "--current-size": u,
@@ -743,7 +743,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
       }
     }
   );
-}, yt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ c(T, { children: r(e) }) : /* @__PURE__ */ c(T, { children: e }), D = j({
+}, vt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ c(T, { children: r(e) }) : /* @__PURE__ */ c(T, { children: e }), H = B({
   isFontLarge: !1,
   fontSizeRatio: 1
 }), R = 12, bt = ({ children: e }) => {
@@ -763,7 +763,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
     () => ({ isFontLarge: r, fontSizeRatio: u }),
     [u, r]
   );
-  return /* @__PURE__ */ U(D.Provider, { value: s, children: [
+  return /* @__PURE__ */ U(H.Provider, { value: s, children: [
     /* @__PURE__ */ c(
       "div",
       {
@@ -783,26 +783,26 @@ const ge = "_separatorLine_nzfcz_1", ve = {
     e
   ] });
 }, wt = () => {
-  const e = q(D);
+  const e = j(H);
   return e || {
     isFontLarge: !1,
     fontSizeRatio: 1
   };
-}, Ae = "_visuallyHidden_1gevf_1", Me = {
-  visuallyHidden: Ae
+}, Le = "_visuallyHidden_1gevf_1", Me = {
+  visuallyHidden: Le
 }, ze = (e) => P(e, Fe), xt = (e) => P(e, Pe), Fe = (e, t) => t.startsWith("data-") || t.startsWith("aria-"), Pe = (e, t) => t.startsWith("aria-"), kt = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ c("span", { className: Me.visuallyHidden, ...ze(t), children: e }), Oe = "_text_1iisw_1", De = "_standard_1iisw_24", He = "_bold_1iisw_27", Ne = "_caption_1iisw_31", Ue = "_overline_1iisw_39", Ve = "_large_1iisw_48", je = "_medium_1iisw_53", qe = "_small_1iisw_58", Be = "_smaller_1iisw_63", $ = {
+}) => /* @__PURE__ */ c("span", { className: Me.visuallyHidden, ...ze(t), children: e }), Oe = "_text_1iisw_1", He = "_standard_1iisw_24", De = "_bold_1iisw_27", Ne = "_caption_1iisw_31", Ue = "_overline_1iisw_39", Ve = "_large_1iisw_48", Be = "_medium_1iisw_53", je = "_small_1iisw_58", qe = "_smaller_1iisw_63", $ = {
   text: Oe,
-  standard: De,
-  bold: He,
+  standard: He,
+  bold: De,
   caption: Ne,
   overline: Ue,
   large: Ve,
-  medium: je,
-  small: qe,
-  smaller: Be
+  medium: Be,
+  small: je,
+  smaller: qe
 }, w = f(
   ({
     children: e,
@@ -816,7 +816,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
     textAlign: i = "left",
     overflow: l,
     textOverflow: d,
-    style: v,
+    style: y,
     ...k
   }, _) => /* @__PURE__ */ c(
     "span",
@@ -831,13 +831,13 @@ const ge = "_separatorLine_nzfcz_1", ve = {
         textAlign: i,
         overflow: l,
         textOverflow: d,
-        ...v
+        ...y
       },
       ...k,
       children: e
     }
   )
-), _t = w, $t = (e) => /* @__PURE__ */ c(w, { size: "small", ...e }), St = (e) => /* @__PURE__ */ c(w, { size: "smaller", ...e }), Et = (e) => /* @__PURE__ */ c(w, { size: "medium", ...e }), Ct = (e) => /* @__PURE__ */ c(w, { size: "large", ...e }), We = "_heading_1cnsg_1", Xe = "_h1_1cnsg_10", Ge = "_h2_1cnsg_14", Ye = "_h3_1cnsg_18", Ke = "_h4_1cnsg_22", Ze = "_h5_1cnsg_26", Je = "_h6_1cnsg_30", L = {
+), _t = w, $t = (e) => /* @__PURE__ */ c(w, { size: "small", ...e }), St = (e) => /* @__PURE__ */ c(w, { size: "smaller", ...e }), Et = (e) => /* @__PURE__ */ c(w, { size: "medium", ...e }), Ct = (e) => /* @__PURE__ */ c(w, { size: "large", ...e }), We = "_heading_1cnsg_1", Xe = "_h1_1cnsg_10", Ge = "_h2_1cnsg_14", Ye = "_h3_1cnsg_18", Ke = "_h4_1cnsg_22", Ze = "_h5_1cnsg_26", Je = "_h6_1cnsg_30", A = {
   heading: We,
   h1: Xe,
   h2: Ge,
@@ -859,7 +859,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   }, l) => /* @__PURE__ */ c(
     a ?? e,
     {
-      className: O(L.heading, L[e], t),
+      className: O(A.heading, A[e], t),
       style: { color: r, whiteSpace: n, wordBreak: u, ...o },
       ref: l,
       ...i,
@@ -868,24 +868,28 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   )
 ), Tt = (e) => /* @__PURE__ */ c(Qe, { variant: "h2", ...e }), It = ({
   blockedKeys: e,
-  ...t
+  blockMouse: t = !1,
+  ...r
 }) => {
-  const r = m(
-    (u) => {
-      (e == null || e.includes(u.key)) && (u.stopPropagation(), u.preventDefault());
+  const n = m(
+    (o) => {
+      (e == null || (Array.isArray(e) ? e.includes(o.key) : e === o.key)) && o.stopPropagation();
     },
     [e]
-  ), n = m((u) => {
-    u.stopPropagation(), u.preventDefault();
-  }, []);
+  ), u = m(
+    (o) => {
+      t && o.stopPropagation();
+    },
+    [t]
+  );
   return /* @__PURE__ */ c(
     b,
     {
-      ...t,
-      onKeyDown: r,
-      onKeyUp: r,
-      onMouseDown: n,
-      onMouseUp: n
+      ...r,
+      onKeyDown: n,
+      onKeyUp: n,
+      onMouseDown: u,
+      onMouseUp: u
     }
   );
 }, et = (e, t) => e === t, Rt = (e, t, r = et) => {
@@ -897,14 +901,14 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   ), u = m(
     (i) => {
       t(
-        i.reduce((l, d) => l.some((v) => r(v, d)) ? l : [...l, d], e)
+        i.reduce((l, d) => l.some((y) => r(y, d)) ? l : [...l, d], e)
       );
     },
     [e, t, r]
   ), o = m(
     (i) => {
       const l = e.findIndex((d) => r(d, i));
-      l >= 0 && t(e.filter((d, v) => v !== l));
+      l >= 0 && t(e.filter((d, y) => y !== l));
     },
     [e, t, r]
   ), s = m(
@@ -934,7 +938,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
     r((s) => !s);
   }, [r]);
   return [t, n, u, o];
-}, Lt = (e, t) => {
+}, At = (e, t) => {
   const [r, n] = h(e);
   return p(() => {
     const u = setTimeout(() => {
@@ -944,7 +948,7 @@ const ge = "_separatorLine_nzfcz_1", ve = {
       clearTimeout(u);
     };
   }, [e, t]), r;
-}, At = (e, t) => {
+}, Lt = (e, t) => {
   const [r, n] = h(e);
   return p(() => {
     e && n(!0);
@@ -957,10 +961,10 @@ const ge = "_separatorLine_nzfcz_1", ve = {
   }, [e, t]), r;
 };
 let tt = 0;
-const A = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
-  const [t, r] = h(() => A(e));
-  return p(() => r(A(e)), [e]), t;
-}, y = (e, t, r) => {
+const L = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
+  const [t, r] = h(() => L(e));
+  return p(() => r(L(e)), [e]), t;
+}, v = (e, t, r) => {
   const n = g(null);
   p(() => {
     n.current = r;
@@ -981,7 +985,7 @@ const A = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
   const [t, r, n] = C(!1);
   p(() => {
     document.activeElement === e.current ? r() : n();
-  }, [e, n, r]), y(e, "focus", r), y(e, "blur", n);
+  }, [e, n, r]), v(e, "focus", r), v(e, "blur", n);
   const u = m(() => {
     e.current && e.current.focus();
   }, [e]), o = m(() => {
@@ -1001,11 +1005,11 @@ const A = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
   return t.current = e, t;
 }, Ot = (e) => {
   const [t, r, n] = C(!1);
-  return y(e, "mouseover", r), y(e, "mouseout", n), t;
-}, Dt = (e) => {
+  return v(e, "mouseover", r), v(e, "mouseout", n), t;
+}, Ht = (e) => {
   const [t, r, n] = C(!1);
-  return y(e, "mouseenter", r), y(e, "mouseleave", n), t;
-}, Ht = (e, t) => {
+  return v(e, "mouseenter", r), v(e, "mouseleave", n), t;
+}, Dt = (e, t) => {
   const r = g(() => {
   });
   p(() => {
@@ -1056,12 +1060,12 @@ const A = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
   return p(() => (e.current && a.observe(e.current), () => {
     a.disconnect();
   }), [a, e]), r;
-}, jt = (e) => {
+}, Bt = (e) => {
   const t = g(null);
   return p(() => {
     e && (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, qt = (e, t, r = !0) => {
+}, jt = (e, t, r = !0) => {
   const [n, u] = h(e), o = g(null), s = m(
     (a, i = t) => {
       u(a), r && clearTimeout(o.current), o.current = setTimeout(() => u(e), i);
@@ -1071,7 +1075,7 @@ const A = (e) => `webui-${e ? e + "-" : ""}${++tt}`, Mt = (e) => {
   return p(() => () => {
     clearTimeout(o.current);
   }, []), [n, s];
-}, Bt = () => S(() => /* @__PURE__ */ new Date(), []), Wt = (e) => (t, r) => e(t).localeCompare(e(r)), Xt = (e) => (t, r) => e(t) - e(r), Gt = (e) => {
+}, qt = () => S(() => /* @__PURE__ */ new Date(), []), Wt = (e) => (t, r) => e(t).localeCompare(e(r)), Xt = (e) => (t, r) => e(t) - e(r), Gt = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
 }, Yt = (e, t) => t, Kt = (e) => Object.keys(e).filter((t) => e[t]), Zt = (e) => {
   try {
@@ -1091,12 +1095,12 @@ function Qt(e, t) {
     throw new Error("Invariant error: " + t);
 }
 const er = (e) => {
-  if (!B(e) || e.type !== W) return !1;
+  if (!q(e) || e.type !== W) return !1;
   const r = e.props.children;
   return Array.isArray(r) ? r.every(z) : z(r);
 }, z = (e) => e == null || e === !1;
 export {
-  D as AccessibleFontSizeContext,
+  H as AccessibleFontSizeContext,
   bt as AccessibleFontSizeProvider,
   It as BlockKeyboardEvents,
   b as Box,
@@ -1106,14 +1110,14 @@ export {
   Qe as Heading,
   ft as Indent,
   Ct as LargeText,
-  yt as Nest,
+  vt as Nest,
   mt as ResizeAwareBox,
   ht as Row,
   kt as ScreenReaderOnlyText,
   lt as SeparatorLine,
   $t as SmallText,
   St as SmallerText,
-  vt as Space,
+  yt as Space,
   gt as Spacing,
   Et as StandardText,
   w as Text,
@@ -1134,22 +1138,22 @@ export {
   wt as useAccessibleFontSizeContext,
   Rt as useArraySet,
   C as useBoolean,
-  Lt as useDebounce,
-  At as useDelayedFalse,
+  At as useDebounce,
+  Lt as useDelayedFalse,
   Mt as useDomId,
   Re as useElementDimensions,
   zt as useElementFocus,
   Ft as useEventCallback,
-  y as useEventListener,
-  jt as useForwardedRef,
+  v as useEventListener,
+  Bt as useForwardedRef,
   Pt as useLatest,
-  Dt as useMouseIsEntered,
+  Ht as useMouseIsEntered,
   Ot as useMouseIsOver,
-  Ht as useMultiOnClickOutside,
+  Dt as useMultiOnClickOutside,
   Nt as useOnClickOutside,
   Ut as useOnNoMouseMovement,
   Vt as useOnScreen,
-  qt as useTimeoutState,
-  Bt as useToday
+  jt as useTimeoutState,
+  qt as useToday
 };
 //# sourceMappingURL=index.es.js.map