@jsenv/navi 0.21.3 → 0.21.5

package/dist/jsenv_navi.js

@@ -18830,10 +18830,6 @@ const css$3 = /* css */`
   .navi_text {
     position: relative;
 
-    &[data-has-absolute-child] {
-      display: inline-block;
-    }
-
     /* There is a chrome specific bug that prevents text-transform: capitalize to be applied in nested DOM structure */
     /* The CSS below ensure capitalize is propagated to the bold clones */
     &[data-capitalize] {
@@ -18865,6 +18861,7 @@ const css$3 = /* css */`
     }
 
     &[data-text-overflow] {
+      min-width: 0;
       flex-wrap: wrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -18882,9 +18879,68 @@ const css$3 = /* css */`
         }
       }
     }
+
+    /* When skeleton + overflow ellipsis: skeleton fills available space,
+       no text to clip so disable overflow machinery. */
+    &[data-text-overflow][data-skeleton] {
+      flex-wrap: nowrap;
+      text-overflow: clip;
+      /* overflow:hidden on [data-text-overflow] would clip the absolutely
+         positioned skeleton span — keep it visible */
+      overflow: visible;
+
+      .navi_text_overflow_wrapper {
+        display: contents;
+        .navi_text_overflow_text {
+          display: contents;
+
+          max-width: none;
+          text-overflow: clip;
+          overflow: visible;
+        }
+      }
+    }
+
+    &[data-skeleton] {
+      /* Keep layout space — children are hidden, skeleton overlays absolutely */
+      visibility: hidden;
+
+      .navi_text_skeleton {
+        position: absolute;
+        inset: 0;
+        /* top/bottom inset may not perfectly align with text bounds — acceptable */
+        background: linear-gradient(
+          90deg,
+          #e0e0e0 25%,
+          #f0f0f0 50%,
+          #e0e0e0 75%
+        );
+        background-size: 200% 100%;
+        border-radius: 4px;
+        visibility: visible;
+      }
+
+      &[data-empty] {
+        .navi_text_skeleton {
+          height: 1em;
+        }
+      }
+
+      &[data-loading] {
+        .navi_text_skeleton {
+          animation: navi_text_skeleton_shimmer 1.5s infinite;
+        }
+      }
+    }
   }
 
-  .navi_custom_space {
+  @keyframes navi_text_skeleton_shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
   }
 
   .navi_text_bold_wrapper {
@@ -19041,13 +19097,14 @@ const shouldInjectSpacingBetween = (left, right) => {
 const OverflowPinnedElementContext = createContext(null);
 const Text = props => {
   import.meta.css = [css$3, "@jsenv/navi/src/text/text.jsx"];
-  const {
-    overflowEllipsis,
-    ...rest
-  } = props;
-  if (overflowEllipsis) {
+  if (props.loading || props.skeleton) {
+    return jsx(TextSkeleton, {
+      ...props
+    });
+  }
+  if (props.overflowEllipsis) {
     return jsx(TextOverflow, {
-      ...rest
+      ...props
     });
   }
   if (props.overflowPinned) {
@@ -19064,6 +19121,33 @@ const Text = props => {
     ...props
   });
 };
+const TextSkeleton = ({
+  loading,
+  children,
+  ...props
+}) => {
+  const skeletonSpan = jsx("span", {
+    className: "navi_text_skeleton",
+    "aria-hidden": "true"
+  });
+  // When there are no children we inject an invisible "W" so the element takes
+  // its natural text height (matching current font-size) instead of relying on
+  // min-height which can be off. The W is hidden via CSS visibility:hidden.
+  const hasChildren = children !== null && children !== undefined && children !== false;
+  const innerChildren = hasChildren ? children : jsx("span", {
+    "aria-hidden": "true",
+    children: "W"
+  });
+  return jsx(Text, {
+    "data-skeleton": "",
+    "data-loading": loading ? "" : undefined,
+    "data-empty": !hasChildren ? "" : undefined,
+    ...props,
+    skeleton: undefined,
+    childrenOutsideFlow: skeletonSpan,
+    children: innerChildren
+  });
+};
 const TextOverflow = ({
   noWrap,
   spacing,
@@ -19082,7 +19166,8 @@ const TextOverflow = ({
 
     preLine: rest.as === "p",
     ...rest,
-    "data-text-overflow": true,
+    overflowEllipsis: undefined,
+    "data-text-overflow": "",
     spacing: "pre",
     children: jsxs("span", {
       className: "navi_text_overflow_wrapper",
@@ -19160,7 +19245,6 @@ const TextBasic = ({
       ...boxProps,
       bold: undefined,
       "data-bold": bold ? "" : undefined,
-      "data-has-absolute-child": "",
       children: [jsx("span", {
         className: "navi_text_bold_background",
         "aria-hidden": "true",
@@ -31378,39 +31462,6 @@ const Paragraph = props => {
   });
 };
 
-installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
-  .navi_text_placeholder {
-    display: inline-block;
-    width: 100%;
-    height: 1em;
-    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
-    background-size: 200% 100%;
-    border-radius: 4px;
-
-    &[data-loading] {
-      animation: shimmer 1.2s infinite;
-    }
-  }
-  @keyframes shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
-  }
-`, "@jsenv/navi/src/text/text_placeholder.jsx"];
-const TextPlaceholder = ({
-  loading,
-  ...props
-}) => {
-  return jsx(Box, {
-    ...props,
-    baseClassName: "navi_text_placeholder",
-    "data-loading": loading ? "" : undefined
-  });
-};
-
 const Image = props => {
   return jsx(Box, {
     ...props,
@@ -32054,5 +32105,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, CloseSvg, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, Loading, MessageBox, Meter, Nav, Paragraph, Quantity, QuantityIntl, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextPlaceholder, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createIntl, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, filterTableSelection, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDarkBackgroundAttribute, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState$1 as useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, CloseSvg, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, Loading, MessageBox, Meter, Nav, Paragraph, Quantity, QuantityIntl, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createIntl, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, filterTableSelection, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDarkBackgroundAttribute, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState$1 as useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map