@jsenv/navi 0.26.1 → 0.26.3

package/dist/jsenv_navi.js

@@ -6650,14 +6650,7 @@ const CONTENT_PROPS = {
     };
   },
   spacing: (value, { boxFlow }) => {
-    if (
-      boxFlow === "flex-x" ||
-      boxFlow === "flex-y" ||
-      boxFlow === "inline-flex-x" ||
-      boxFlow === "inline-flex-y" ||
-      boxFlow === "grid" ||
-      boxFlow === "inline-grid"
-    ) {
+    if (isSpacingHandledByFlow(boxFlow)) {
       return {
         gap: resolveSpacingSize(value, "gap"),
       };
@@ -6691,6 +6684,18 @@ const CONTENT_PROPS = {
     return undefined;
   },
 };
+const flowSpacingHandlerSet = new Set([
+  "flex-x",
+  "flex-y",
+  "inline-flex-x",
+  "inline-flex-y",
+  "grid",
+  "inline-grid",
+]);
+const isSpacingHandledByFlow = (boxFlow) => {
+  return flowSpacingHandlerSet.has(boxFlow);
+};
+
 const All_PROPS = {
   ...FLOW_PROPS,
   ...OUTER_SPACING_PROPS,
@@ -6836,9 +6841,9 @@ const TYPO_SIZE_MAP = {
   xxl: "var(--navi-typo-xxl)",
 };
 Object.assign(TYPO_SIZE_MAP, negativeEntries(TYPO_SIZE_MAP));
-const sizeSpacingScaleKeys = new Set(Object.keys(SIZE_MAP));
-const isSizeSpacingScaleKey = (key) => {
-  return sizeSpacingScaleKeys.has(key);
+const sizeSpacingKeySet = new Set(Object.keys(SIZE_MAP));
+const isSizeSpacingKey = (key) => {
+  return sizeSpacingKeySet.has(key);
 };
 const resolveSpacingSize = (size, property = "padding") => {
   return stringifyStyle(SIZE_MAP[size] || size, property);
@@ -8286,6 +8291,8 @@ const Box = props => {
   const ref = props.ref || defaultRef;
   const TagName = as;
   const defaultDisplay = getDefaultDisplay(TagName);
+  // Read the parent flow early so we can use it when display="inherit" is requested.
+  const parentBoxFlow = useContext(BoxFlowContext);
   let {
     inline,
     block,
@@ -8353,6 +8360,12 @@ const Box = props => {
   } else {
     boxFlow = defaultDisplay;
   }
+  // When display="inherit" is passed, adopt the parent's flow instead of computing one.
+  // This lets a child Box mirror its parent's flex/grid/block layout without repeating
+  // the same layout props, and is used e.g. by Button's inner content element.
+  if (rest.display === "inherit") {
+    boxFlow = parentBoxFlow;
+  }
   const boxFlowIsDefault = boxFlow === defaultDisplay;
   const remainingPropKeySet = new Set(Object.keys(rest));
   // some props not destructured but that are neither
@@ -8362,7 +8375,6 @@ const Box = props => {
   const selfForwardedProps = {};
   const childForwardedProps = {};
   {
-    const parentBoxFlow = useContext(BoxFlowContext);
     const styleDeps = [
     // Layout and alignment props
     parentBoxFlow, boxFlow,
@@ -20962,6 +20974,13 @@ const CustomWidthSpace = ({
   useRealSpaceChar
 }) => {
   if (useRealSpaceChar) {
+    // Two-span trick: we want a real space character in the DOM so that
+    // copy-pasting the text produces an actual space, but we also want
+    // full control over the visual width of that gap.
+    // - First span: contains the real space but rendered at font-size:0 so it
+    //   takes up zero visual space.
+    // - Second span: a zero-width joiner (​) with padding-left set to
+    //   the desired gap size. This is the only visible part.
     return jsxs("span", {
       children: [jsx("span", {
         style: "font-size: 0",
@@ -20994,7 +21013,13 @@ const applySpacingOnTextChildren = (children, spacing, defaultSpace) => {
   if (spacing === REGULAR_SPACE || spacing === FAKE_SPACE) {
     separator = defaultSpace;
   } else if (typeof spacing === "string") {
-    if (isSizeSpacingScaleKey(spacing) || hasCSSSizeUnit(spacing) || spacing.startsWith("var(")) {
+    if (isSizeSpacingKey(spacing)) {
+      const value = resolveSpacingSize(spacing);
+      separator = jsx(CustomWidthSpace, {
+        value: value,
+        useRealSpaceChar: useRealSpaceChar
+      });
+    } else if (hasCSSSizeUnit(spacing) || spacing.startsWith("var(")) {
       separator = jsx(CustomWidthSpace, {
         value: spacing,
         useRealSpaceChar: useRealSpaceChar
@@ -21164,6 +21189,7 @@ const TextUI = props => {
     childrenOutsideFlow,
     ...rest
   } = props;
+  const parentBoxFlow = useContext(BoxFlowContext);
   const defaultSpace = preventSpaceUnderlines ? FAKE_SPACE : REGULAR_SPACE;
   const resolvedSpacing = spacing ?? defaultSpace;
   const boxProps = {
@@ -21173,7 +21199,7 @@ const TextUI = props => {
     ref,
     "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
   };
-  const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid;
+  const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid || isSpacingHandledByFlow(parentBoxFlow);
   if (shouldPreserveSpacing) {
     boxProps.spacing = resolvedSpacing;
   } else {
@@ -22782,7 +22808,9 @@ const ButtonDispatcher = props => {
   });
 };
 const ButtonUI = props => {
+  import.meta.css = [css$x, "@jsenv/navi/src/field/button.jsx"];
   const {
+    ref,
     readOnly,
     disabled,
     loading,
@@ -22799,13 +22827,10 @@ const ButtonUI = props => {
     children,
     ...rest
   } = props;
-  import.meta.css = [css$x, "@jsenv/navi/src/field/button.jsx"];
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
   const contextReadOnly = useContext(ReadOnlyContext);
   const contextDisabled = useContext(DisabledContext);
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
   useAutoFocus(ref, autoFocus);
   const remainingProps = useConstraints(ref, rest);
   const innerLoading = loading || contextLoading && contextLoadingElement === ref.current;
@@ -22830,6 +22855,7 @@ const ButtonUI = props => {
   const renderButtonContent = buttonProps => {
     return jsxs(Text, {
       ...buttonProps,
+      display: "inherit",
       spacing: spacing,
       className: "navi_button_content",
       children: [children, jsx(ButtonShadow, {})]
@@ -22839,6 +22865,7 @@ const ButtonUI = props => {
   return jsxs(Box, {
     "data-readonly-silent": innerLoading ? "" : undefined,
     ...remainingProps,
+    ref: ref,
     autFocus: undefined // See use_auto_focus.js
     ,
 
@@ -22846,7 +22873,6 @@ const ButtonUI = props => {
     href: href,
     target: innerTarget,
     rel: innerRel,
-    ref: ref,
     onContextMenu: e => {
       if (as === "a") {
         // For link we keep context menu to allow "open in new tab" and other browser features