@reusable-ui/navbar - npm Package Compare versions

Comparing version 6.7.0 to 6.7.1

dist/styles/config.d.ts

 import { CssKnownProps } from '@cssfn/core';
 export declare const navbars: import("@cssfn/css-config").Refs<{
     listGridArea: CssKnownProps["gridArea"];
-    listFlexDirection: CssKnownProps["flexDirection"];
+    listInlineSize: CssKnownProps["inlineSize"];
+    listBlockSize: CssKnownProps["blockSize"];
     listMarginInline: CssKnownProps["marginInline"];
@@ -33,6 +34,9 @@ listMarginBlock: CssKnownProps["marginBlock"];
     listDisplay: CssKnownProps["display"];
-    listFlexDirectionCollapse: CssKnownProps["flexDirection"];
-    listFlexDirectionExpand: CssKnownProps["flexDirection"];
     listJustifySelf: CssKnownProps["justifySelf"];
     listAlignSelf: CssKnownProps["alignSelf"];
+    listBoxSizing: CssKnownProps["boxSizing"];
+    listInlineSizeCollapse: CssKnownProps["inlineSize"];
+    listBlockSizeCollapse: CssKnownProps["blockSize"];
+    listInlineSizeExpand: CssKnownProps["inlineSize"];
+    listBlockSizeExpand: CssKnownProps["blockSize"];
     listMarginInlineCollapse: CssKnownProps["marginInline"];
@@ -49,10 +53,9 @@ listMarginBlockCollapse: CssKnownProps["marginBlock"];
     menuDisplay: CssKnownProps["display"];
-    menuFlexDirection: CssKnownProps["flexDirection"];
-    menuJustifyContent: CssKnownProps["justifyContent"];
+    menuJustifyItems: CssKnownProps["justifyItems"];
     menuAlignItems: CssKnownProps["alignItems"];
-    menuFlexWrap: CssKnownProps["flexWrap"];
     menuWhiteSpace: CssKnownProps["whiteSpace"];
 }>, navbarValues: import("@cssfn/css-config").Vals<{
     listGridArea: CssKnownProps["gridArea"];
-    listFlexDirection: CssKnownProps["flexDirection"];
+    listInlineSize: CssKnownProps["inlineSize"];
+    listBlockSize: CssKnownProps["blockSize"];
     listMarginInline: CssKnownProps["marginInline"];
@@ -86,6 +89,9 @@ listMarginBlock: CssKnownProps["marginBlock"];
     listDisplay: CssKnownProps["display"];
-    listFlexDirectionCollapse: CssKnownProps["flexDirection"];
-    listFlexDirectionExpand: CssKnownProps["flexDirection"];
     listJustifySelf: CssKnownProps["justifySelf"];
     listAlignSelf: CssKnownProps["alignSelf"];
+    listBoxSizing: CssKnownProps["boxSizing"];
+    listInlineSizeCollapse: CssKnownProps["inlineSize"];
+    listBlockSizeCollapse: CssKnownProps["blockSize"];
+    listInlineSizeExpand: CssKnownProps["inlineSize"];
+    listBlockSizeExpand: CssKnownProps["blockSize"];
     listMarginInlineCollapse: CssKnownProps["marginInline"];
@@ -102,7 +108,5 @@ listMarginBlockCollapse: CssKnownProps["marginBlock"];
     menuDisplay: CssKnownProps["display"];
-    menuFlexDirection: CssKnownProps["flexDirection"];
-    menuJustifyContent: CssKnownProps["justifyContent"];
+    menuJustifyItems: CssKnownProps["justifyItems"];
     menuAlignItems: CssKnownProps["alignItems"];
-    menuFlexWrap: CssKnownProps["flexWrap"];
     menuWhiteSpace: CssKnownProps["whiteSpace"];
 }>, cssNavbarConfig: import("@cssfn/css-config").LiveCssConfigOptions;

dist/styles/config.js

@@ -35,3 +35,3 @@ // cssfn:
         // sizes:
-        boxSizing: 'content-box',
+        boxSizing: 'content-box', // the final size is excluding borders & paddings
         blockSize: 'auto',
@@ -52,7 +52,14 @@ // borders:
         listGridAreaExpand: 'unset',
-        listDisplay: 'flex',
-        listFlexDirectionCollapse: 'column',
-        listFlexDirectionExpand: 'row',
-        listJustifySelf: 'stretch',
-        listAlignSelf: 'stretch',
+        listDisplay: 'grid',
+        listJustifySelf: 'stretch', // full width
+        listAlignSelf: 'stretch', // full height
+        listBoxSizing: 'border-box', // the final size is including borders & paddings
+        listInlineSizeCollapse: [[
+                'calc(100% + (', containers.paddingInline, ' * 2))',
+            ]], // full available width  including negative_margins
+        listBlockSizeCollapse: 'fit-content', // auto height depends on the content
+        listInlineSizeExpand: 'fit-content', // auto width  depends on the content
+        listBlockSizeExpand: [[
+                'calc(100% + (', basics.paddingBlock, ' * 2))',
+            ]], // full available height including negative_margins
         listMarginInlineCollapse: [[
@@ -74,7 +81,5 @@ 'calc(0px - ', containers.paddingInline, ')',
         // menus:
-        menuDisplay: 'flex',
-        menuFlexDirection: 'row',
-        menuJustifyContent: 'center',
+        menuDisplay: 'grid',
+        menuJustifyItems: 'center',
         menuAlignItems: 'center',
-        menuFlexWrap: 'nowrap',
         menuWhiteSpace: 'nowrap',
@@ -85,3 +90,4 @@ };
         listGridArea: bases.listGridAreaCollapse,
-        listFlexDirection: bases.listFlexDirectionCollapse,
+        listInlineSize: bases.listInlineSizeCollapse,
+        listBlockSize: bases.listBlockSizeCollapse,
         listMarginInline: bases.listMarginInlineCollapse,
@@ -88,0 +94,0 @@ listMarginBlock: bases.listMarginBlockCollapse,

dist/styles/styles.js

@@ -23,2 +23,5 @@ // cssfn:
 onContainerStylesChange, usesContainerLayout, usesContainerVariants, } from '@reusable-ui/container'; // a base container UI of Reusable-UI components
+import { 
+// features:
+usesCollapse, } from '@reusable-ui/collapse'; // a generic element with dynamic visibility (show/hide)
 // internals:
@@ -38,2 +41,3 @@ import {
     const { paddingRule, paddingVars } = usesPadding(navbars);
+    const { collapseVars } = usesCollapse();
     return style({
@@ -55,2 +59,9 @@ // layouts:
                 ...usesCssProps(usesPrefixedProps(navbars, 'list')), // apply config's cssProps starting with list***
+                // inlineSize : null, // remove the custom prop definition from config's cssProps, because it's a special prop for `collapseVars.inlineSize`
+                // blockSize  : null, // remove the custom prop definition from config's cssProps, because it's a special prop for `collapseVars.blockSize`
+                // sizes:
+                [collapseVars.inlineSize]: navbars.listInlineSize,
+                [collapseVars.blockSize]: navbars.listBlockSize,
+                inlineSize: collapseVars.inlineSize, // re-write this prop again in order the `list` is swapped out from existance <Collapse mainClass={'' /* empty string */}>
+                blockSize: collapseVars.blockSize,
             }),
@@ -57,0 +68,0 @@ ...descendants(menuElm, {

package.json

 {
   "name": "@reusable-ui/navbar",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "description": "A responsive navigation header. Supports for branding, navigation and more.",
@@ -45,6 +45,7 @@ "keywords": [
     "@reusable-ui/basic": "^6.5.0",
+    "@reusable-ui/collapse": "^6.6.2",
     "@reusable-ui/container": "^6.5.0",
     "@reusable-ui/core": "^6.5.0",
     "@reusable-ui/dimensions": "^6.5.1",
-    "@reusable-ui/responsives": "^6.5.0"
+    "@reusable-ui/responsives": "^6.5.1"
   },
@@ -55,3 +56,3 @@ "peerDependencies": {
   },
-  "gitHead": "6cf3fde6b8204fbdd81002073cc73af9b3af40ce"
+  "gitHead": "a376ca63bb9749f3f7a5b2920c73a1347d97f963"
 }

src/styles/config.ts

@@ -55,3 +55,3 @@ // cssfn:
         // sizes:
-        boxSizing                   : 'content-box'                     as CssKnownProps['boxSizing'       ],
+        boxSizing                   : 'content-box'                     as CssKnownProps['boxSizing'       ], // the final size is excluding borders & paddings
         blockSize                   : 'auto'                            as CssKnownProps['blockSize'       ],
@@ -82,8 +82,16 @@
         
-        listDisplay                 : 'flex'                            as CssKnownProps['display'         ],
-        listFlexDirectionCollapse   : 'column'                          as CssKnownProps['flexDirection'   ],
-        listFlexDirectionExpand     : 'row'                             as CssKnownProps['flexDirection'   ],
-        listJustifySelf             : 'stretch'                         as CssKnownProps['justifySelf'     ],
-        listAlignSelf               : 'stretch'                         as CssKnownProps['alignSelf'       ],
+        listDisplay                 : 'grid'                            as CssKnownProps['display'         ],
+        listJustifySelf             : 'stretch'                         as CssKnownProps['justifySelf'     ], // full width
+        listAlignSelf               : 'stretch'                         as CssKnownProps['alignSelf'       ], // full height
         
+        listBoxSizing               : 'border-box'                      as CssKnownProps['boxSizing'       ], // the final size is including borders & paddings
+        listInlineSizeCollapse      : [[
+            'calc(100% + (', containers.paddingInline, ' * 2))',
+        ]]                                                              as CssKnownProps['inlineSize'      ], // full available width  including negative_margins
+        listBlockSizeCollapse       : 'fit-content'                     as CssKnownProps['blockSize'       ], // auto height depends on the content
+        listInlineSizeExpand        : 'fit-content'                     as CssKnownProps['inlineSize'      ], // auto width  depends on the content
+        listBlockSizeExpand         : [[
+            'calc(100% + (', basics.paddingBlock, ' * 2))',
+        ]]                                                              as CssKnownProps['blockSize'       ], // full available height including negative_margins
+        
         listMarginInlineCollapse    : [[
@@ -109,7 +117,6 @@ 'calc(0px - ', containers.paddingInline, ')',
         // menus:
-        menuDisplay                 : 'flex'                            as CssKnownProps['display'         ],
-        menuFlexDirection           : 'row'                             as CssKnownProps['flexDirection'   ],
-        menuJustifyContent          : 'center'                          as CssKnownProps['justifyContent'  ],
+        menuDisplay                 : 'grid'                            as CssKnownProps['display'         ],
+        menuJustifyItems            : 'center'                          as CssKnownProps['justifyItems'    ],
         menuAlignItems              : 'center'                          as CssKnownProps['alignItems'      ],
-        menuFlexWrap                : 'nowrap'                          as CssKnownProps['flexWrap'        ],
+        
         menuWhiteSpace              : 'nowrap'                          as CssKnownProps['whiteSpace'      ],
@@ -124,3 +131,4 @@ };
         
-        listFlexDirection           : bases.listFlexDirectionCollapse   as CssKnownProps['flexDirection'   ],
+        listInlineSize              : bases.listInlineSizeCollapse      as CssKnownProps['inlineSize'      ],
+        listBlockSize               : bases.listBlockSizeCollapse       as CssKnownProps['blockSize'       ],
         
@@ -127,0 +135,0 @@ listMarginInline            : bases.listMarginInlineCollapse    as CssKnownProps['marginInline'    ],

src/styles/styles.ts

@@ -47,2 +47,6 @@ // cssfn:
 }                           from '@reusable-ui/container'       // a base container UI of Reusable-UI components
+import {
+    // features:
+    usesCollapse,
+}                           from '@reusable-ui/collapse'        // a generic element with dynamic visibility (show/hide)
 
@@ -72,4 +76,5 @@ // internals:
     // features:
-    const {borderRule , borderVars } = usesBorder(navbars);
-    const {paddingRule, paddingVars} = usesPadding(navbars);
+    const {borderRule , borderVars  } = usesBorder(navbars);
+    const {paddingRule, paddingVars } = usesPadding(navbars);
+    const {             collapseVars} = usesCollapse();
     
@@ -94,2 +99,12 @@
                 ...usesCssProps(usesPrefixedProps(navbars, 'list')), // apply config's cssProps starting with list***
+                // inlineSize : null, // remove the custom prop definition from config's cssProps, because it's a special prop for `collapseVars.inlineSize`
+                // blockSize  : null, // remove the custom prop definition from config's cssProps, because it's a special prop for `collapseVars.blockSize`
+                
+                
+                
+                // sizes:
+                [collapseVars.inlineSize] : navbars.listInlineSize,
+                [collapseVars.blockSize ] : navbars.listBlockSize,
+                inlineSize                : collapseVars.inlineSize, // re-write this prop again in order the `list` is swapped out from existance <Collapse mainClass={'' /* empty string */}>
+                blockSize                 : collapseVars.blockSize,
             }),
@@ -96,0 +111,0 @@ ...descendants(menuElm, {

No alert changes

Improved metrics

Total package byte prevSize

63720

5.66%

Lines of code

1365

2.94%

Worsened metrics

Dependency count

10

11.11%

Dependency changes

• + Added

  @reusable-ui/collapse@^6.6.2

• + Added

  @reusable-ui/collapse@6.6.2
  (transitive)

• Updated

  @reusable-ui/responsives@^6.5.1