@jsenv/navi 0.12.0 → 0.12.2

package/dist/jsenv_navi.js

@@ -9381,6 +9381,7 @@ const VISUAL_PROPS = {
   cursor: PASS_THROUGH,
 };
 const CONTENT_PROPS = {
+  contentAlign: applyOnTwoProps("contentAlignX", "contentAlignY"),
   contentAlignX: (value, { layout }) => {
     if (layout === "row" || layout === "inline-row") {
       if (value === "stretch") {
@@ -10717,18 +10718,6 @@ const RectangleLoadingSvg = ({
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_inline_wrapper {
-    position: relative;
-    display: inline-flex;
-    width: fit-content;
-    height: fit-content;
-    flex-direction: inherit;
-    /* min-width: 100%; */
-    /* min-height: 100%; */
-    border-radius: inherit;
-    cursor: inherit;
-  }
-
   .navi_loading_rectangle_wrapper {
     position: absolute;
     top: var(--rectangle-top, 0);
@@ -12521,9 +12510,18 @@ const CharSlot = ({
   });
 };
 const Icon = ({
+  box,
   children,
   ...props
 }) => {
+  if (box) {
+    return jsx(Box, {
+      layoutInline: true,
+      layoutColumn: true,
+      ...props,
+      children: children
+    });
+  }
   return jsx(CharSlot, {
     decorative: true,
     ...props,
@@ -12723,10 +12721,11 @@ const LinkPlain = props => {
     anchorIcon,
     icon,
     contentSpacing = " ",
-    ref = useRef(),
     children,
     ...rest
   } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
   const visited = useIsVisited(href);
   useAutoFocus(ref, autoFocus);
   useConstraints(ref, constraints);
@@ -12917,9 +12916,10 @@ const LinkWithSelection = props => {
   const {
     value = props.href,
     children,
-    ref = useRef(),
     ...rest
   } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
   const {
     selected
   } = useSelectableElement(ref, {
@@ -12981,9 +12981,10 @@ const LinkWithAction = props => {
     onActionEnd,
     children,
     loading,
-    ref = useRef(),
     ...rest
   } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
   const {
     actionPending
   } = useRequestedActionStatus(ref);
@@ -13010,7 +13011,6 @@ const LinkWithAction = props => {
 const RouteLink = ({
   route,
   routeParams,
-  active,
   children,
   ...rest
 }) => {
@@ -13019,11 +13019,13 @@ const RouteLink = ({
   }
   const routeStatus = useRouteStatus(route);
   const url = route.buildUrl(routeParams);
-  const innerActive = active || routeStatus.active;
+  const routeIsActive = routeStatus.active;
   return jsx(Link, {
     ...rest,
     href: url,
-    active: innerActive,
+    pseudoState: {
+      ":-navi-current-link": routeIsActive
+    },
     children: children
   });
 };
@@ -13559,10 +13561,12 @@ const Label = props => {
   const [inputDisabled, setInputDisabled] = useState(false);
   const innerDisabled = disabled || inputDisabled;
   return jsx(Box, {
-    as: "label",
     ...rest,
-    "data-readonly": innerReadOnly ? "" : undefined,
-    "data-disabled": innerDisabled ? "" : undefined,
+    as: "label",
+    basePseudoState: {
+      readOnly: innerReadOnly,
+      disabled: innerDisabled
+    },
     children: jsx(ReportReadOnlyOnLabelContext.Provider, {
       value: setInputReadOnly,
       children: jsx(ReportDisabledOnLabelContext.Provider, {
@@ -20284,20 +20288,18 @@ const Count = ({
 };
 
 const Image = props => {
-  const [remainingProps, innerStyle] = withPropsStyle();
-  return jsx("img", {
-    style: innerStyle,
-    ...remainingProps
+  return jsx(Box, {
+    ...props,
+    as: "img"
   });
 };
 
 const LinkWithIcon = () => {};
 
 const Svg = props => {
-  const [remainingProps, innerStyle] = withPropsStyle();
-  return jsx("svg", {
-    style: innerStyle,
-    ...remainingProps
+  return jsx(Box, {
+    ...props,
+    as: "svg"
   });
 };