@jsenv/navi 0.26.0 → 0.26.2

package/dist/jsenv_navi.js

@@ -6287,6 +6287,7 @@ const FLOW_PROPS = {
   flex: () => {},
   grid: () => {},
   gridTemplateColumns: PASS_THROUGH,
+  display: PASS_THROUGH, // in case people write "display: none" (even if hidden prop is recommended)
   row: () => {},
   column: () => {},
 };
@@ -6835,9 +6836,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);
@@ -8223,6 +8224,19 @@ import.meta.css = [/* css */`
       grid-auto-flow: unset;
     }
   }
+  /*
+
+  It's very common to declare a display on component as follow
+  .component_class { display: component_display; }
+
+  This kill the default behavior of [hidden] attribute and we need to explicitly handle it with:
+  .component_class[hidden] { display: none; }
+
+  To avoid this extra work and potential mistakes we force the default behavior of [hidden] attribute.
+  */
+  [hidden] {
+    display: none !important;
+  }
 `, "@jsenv/navi/src/box/box.jsx"];
 const PSEUDO_CLASSES_DEFAULT = [];
 const PSEUDO_ELEMENTS_DEFAULT = [];
@@ -20948,6 +20962,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",
@@ -20980,7 +21001,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
@@ -22768,7 +22795,9 @@ const ButtonDispatcher = props => {
   });
 };
 const ButtonUI = props => {
+  import.meta.css = [css$x, "@jsenv/navi/src/field/button.jsx"];
   const {
+    ref,
     readOnly,
     disabled,
     loading,
@@ -22785,13 +22814,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;
@@ -22825,6 +22851,7 @@ const ButtonUI = props => {
   return jsxs(Box, {
     "data-readonly-silent": innerLoading ? "" : undefined,
     ...remainingProps,
+    ref: ref,
     autFocus: undefined // See use_auto_focus.js
     ,
 
@@ -22832,7 +22859,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
@@ -27212,9 +27238,6 @@ const css$l = /* css */`
       cursor: not-allowed;
       pointer-events: none;
     }
-    &[hidden] {
-      display: none;
-    }
   }
 
   .navi_list_container {
@@ -27290,9 +27313,6 @@ const css$l = /* css */`
       text-align: center;
       user-select: none;
     }
-    &[hidden] {
-      display: none;
-    }
   }
   [navi-virtual-filler="bottom"] {
     /* for some reason preact ends up puttin this element before the list items in some scenarios
@@ -30974,7 +30994,7 @@ installImportMetaCssBuild(import.meta);const css$f = /* css */`
 
       &[hidden] {
         /* We keep placeholder in the dom in case it dictates the select width, this way select wont shrink once a value is selected */
-        display: inline-block;
+        display: inline-block !important;
         height: 0;
         padding-block: 0;
         visibility: hidden;