@twilio-paste/in-page-navigation - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

dist/index.d.ts

@@ -1,3 +0,5 @@
-export * from "./InPageNavigation";
-export * from "./InPageNavigationItem";
+export { InPageNavigation } from "./InPageNavigation";
+export type { InPageNavigationProps } from "./InPageNavigation";
+export { InPageNavigationItem } from "./InPageNavigationItem";
+export type { InPageNavigationItemProps } from "./InPageNavigationItem";
 //# sourceMappingURL=index.d.ts.map

dist/index.debug.es.js

@@ -8,3 +8,4 @@ // src/InPageNavigation.tsx
 var InPageNavigationContext = React.createContext({
-  variant: "default"
+  variant: "default",
+  orientation: "horizontal"
 });
@@ -14,5 +15,30 @@
 var InPageNavigation = React2.forwardRef(
-  ({ element = "IN_PAGE_NAVIGATION", variant = "default", marginBottom, children, ...props }, ref) => {
+  ({
+    element = "IN_PAGE_NAVIGATION",
+    variant = "default",
+    orientation = "horizontal",
+    marginBottom,
+    children,
+    ...props
+  }, ref) => {
     const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
-    return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant } }, /* @__PURE__ */ React2.createElement(Box, { ...safelySpreadBoxProps(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant, orientation } }, /* @__PURE__ */ React2.createElement(Box, { ...safelySpreadBoxProps(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
+        Box,
+        {
+          as: "ul",
+          listStyleType: "none",
+          element: `${element}_ITEMS`,
+          display: "flex",
+          flexDirection: "column",
+          margin: "space0",
+          padding: "space0",
+          minWidth: "size20",
+          maxWidth: "size40",
+          rowGap: "space20"
+        },
+        children
+      )));
+    }
+    return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant, orientation } }, /* @__PURE__ */ React2.createElement(Box, { ...safelySpreadBoxProps(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
       Box,
@@ -25,6 +51,6 @@ {
         justifyContent: isFullWidth ? "space-evenly" : "flex-start",
+        columnGap: !isFullWidth ? "space80" : "space0",
+        padding: "space0",
         margin: "space0",
-        marginBottom: marginBottom || "space60",
-        padding: "space0",
-        columnGap: !isFullWidth ? "space80" : "space0"
+        marginBottom: marginBottom || "space60"
       },
@@ -42,11 +68,4 @@ children
 var BASE_STYLES = {
-  borderBottomColor: "transparent",
-  borderBottomStyle: "solid",
-  borderBottomWidth: "borderWidth10",
   color: "colorTextWeak",
   minWidth: "sizeSquare130",
-  paddingBottom: "space40",
-  paddingLeft: "space20",
-  paddingRight: "space20",
-  paddingTop: "space40",
   textAlign: "center",
@@ -60,4 +79,2 @@ fontSize: "fontSize30",
   whiteSpace: "nowrap",
-  display: "block",
-  width: "100%",
   textDecoration: "none",
@@ -74,4 +91,29 @@ _hover: {
 };
+var HORIZONTAL_BASE_STYLES = {
+  ...BASE_STYLES,
+  width: "100%",
+  display: "block",
+  borderBottomColor: "transparent",
+  borderBottomStyle: "solid",
+  borderBottomWidth: "borderWidth10",
+  paddingBottom: "space40",
+  paddingLeft: "space20",
+  paddingRight: "space20",
+  paddingTop: "space40"
+};
+var VERTICAL_BASE_STYLES = {
+  ...BASE_STYLES,
+  width: "auto",
+  display: "inline-block",
+  borderLeftColor: "transparent",
+  borderLeftStyle: "solid",
+  borderLeftWidth: "borderWidth10",
+  paddingBottom: "space30",
+  paddingTop: "space30",
+  paddingLeft: "space50",
+  paddingRight: "space50"
+};
 var CURRENT_PAGE_STYLES = {
   borderBottomColor: "colorBorderPrimary",
+  borderLeftColor: "colorBorderPrimary",
   color: "colorTextLink"
@@ -93,2 +135,3 @@ };
   borderBottomColor: "colorBorderInverseStrong",
+  borderLeftColor: "colorBorderInverseStrong",
   color: "colorTextInverse"
@@ -98,3 +141,3 @@ };
   ({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, ...props }, ref) => {
-    const { variant } = React3.useContext(InPageNavigationContext);
+    const { variant, orientation } = React3.useContext(InPageNavigationContext);
     const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
@@ -109,2 +152,20 @@ const isInverse = variant === "inverse" || variant === "inverse_fullWidth";
     }
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ React3.createElement(Box2, { as: "li", ref, element, minWidth: "size0", marginBottom: "space20", display: "inline-flex" }, /* @__PURE__ */ React3.createElement(
+        Box2,
+        {
+          ...secureExternalLink(href),
+          ...safelySpreadBoxProps2(props),
+          ...VERTICAL_BASE_STYLES,
+          ...isInverse ? INVERSE_STYLES : {},
+          ...currentPageStyles,
+          as: "a",
+          ref,
+          element: `${element}_ANCHOR`,
+          "aria-current": currentPage ? "page" : void 0,
+          href
+        },
+        children
+      ));
+    }
     return /* @__PURE__ */ React3.createElement(
@@ -127,3 +188,3 @@ Box2,
           ...safelySpreadBoxProps2(props),
-          ...BASE_STYLES,
+          ...HORIZONTAL_BASE_STYLES,
           ...isInverse ? INVERSE_STYLES : {},
@@ -130,0 +191,0 @@ ...currentPageStyles,

dist/index.debug.js

@@ -41,3 +41,4 @@ "use strict";
 var InPageNavigationContext = React.createContext({
-  variant: "default"
+  variant: "default",
+  orientation: "horizontal"
 });
@@ -47,5 +48,30 @@
 var InPageNavigation = React2.forwardRef(
-  ({ element = "IN_PAGE_NAVIGATION", variant = "default", marginBottom, children, ...props }, ref) => {
+  ({
+    element = "IN_PAGE_NAVIGATION",
+    variant = "default",
+    orientation = "horizontal",
+    marginBottom,
+    children,
+    ...props
+  }, ref) => {
     const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
-    return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant } }, /* @__PURE__ */ React2.createElement(import_box.Box, { ...(0, import_box.safelySpreadBoxProps)(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant, orientation } }, /* @__PURE__ */ React2.createElement(import_box.Box, { ...(0, import_box.safelySpreadBoxProps)(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
+        import_box.Box,
+        {
+          as: "ul",
+          listStyleType: "none",
+          element: `${element}_ITEMS`,
+          display: "flex",
+          flexDirection: "column",
+          margin: "space0",
+          padding: "space0",
+          minWidth: "size20",
+          maxWidth: "size40",
+          rowGap: "space20"
+        },
+        children
+      )));
+    }
+    return /* @__PURE__ */ React2.createElement(InPageNavigationContext.Provider, { value: { variant, orientation } }, /* @__PURE__ */ React2.createElement(import_box.Box, { ...(0, import_box.safelySpreadBoxProps)(props), as: "nav", ref, element }, /* @__PURE__ */ React2.createElement(
       import_box.Box,
@@ -58,6 +84,6 @@ {
         justifyContent: isFullWidth ? "space-evenly" : "flex-start",
+        columnGap: !isFullWidth ? "space80" : "space0",
+        padding: "space0",
         margin: "space0",
-        marginBottom: marginBottom || "space60",
-        padding: "space0",
-        columnGap: !isFullWidth ? "space80" : "space0"
+        marginBottom: marginBottom || "space60"
       },
@@ -75,11 +101,4 @@ children
 var BASE_STYLES = {
-  borderBottomColor: "transparent",
-  borderBottomStyle: "solid",
-  borderBottomWidth: "borderWidth10",
   color: "colorTextWeak",
   minWidth: "sizeSquare130",
-  paddingBottom: "space40",
-  paddingLeft: "space20",
-  paddingRight: "space20",
-  paddingTop: "space40",
   textAlign: "center",
@@ -93,4 +112,2 @@ fontSize: "fontSize30",
   whiteSpace: "nowrap",
-  display: "block",
-  width: "100%",
   textDecoration: "none",
@@ -107,4 +124,29 @@ _hover: {
 };
+var HORIZONTAL_BASE_STYLES = {
+  ...BASE_STYLES,
+  width: "100%",
+  display: "block",
+  borderBottomColor: "transparent",
+  borderBottomStyle: "solid",
+  borderBottomWidth: "borderWidth10",
+  paddingBottom: "space40",
+  paddingLeft: "space20",
+  paddingRight: "space20",
+  paddingTop: "space40"
+};
+var VERTICAL_BASE_STYLES = {
+  ...BASE_STYLES,
+  width: "auto",
+  display: "inline-block",
+  borderLeftColor: "transparent",
+  borderLeftStyle: "solid",
+  borderLeftWidth: "borderWidth10",
+  paddingBottom: "space30",
+  paddingTop: "space30",
+  paddingLeft: "space50",
+  paddingRight: "space50"
+};
 var CURRENT_PAGE_STYLES = {
   borderBottomColor: "colorBorderPrimary",
+  borderLeftColor: "colorBorderPrimary",
   color: "colorTextLink"
@@ -126,2 +168,3 @@ };
   borderBottomColor: "colorBorderInverseStrong",
+  borderLeftColor: "colorBorderInverseStrong",
   color: "colorTextInverse"
@@ -131,3 +174,3 @@ };
   ({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, ...props }, ref) => {
-    const { variant } = React3.useContext(InPageNavigationContext);
+    const { variant, orientation } = React3.useContext(InPageNavigationContext);
     const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
@@ -142,2 +185,20 @@ const isInverse = variant === "inverse" || variant === "inverse_fullWidth";
     }
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ React3.createElement(import_box2.Box, { as: "li", ref, element, minWidth: "size0", marginBottom: "space20", display: "inline-flex" }, /* @__PURE__ */ React3.createElement(
+        import_box2.Box,
+        {
+          ...(0, import_anchor.secureExternalLink)(href),
+          ...(0, import_box2.safelySpreadBoxProps)(props),
+          ...VERTICAL_BASE_STYLES,
+          ...isInverse ? INVERSE_STYLES : {},
+          ...currentPageStyles,
+          as: "a",
+          ref,
+          element: `${element}_ANCHOR`,
+          "aria-current": currentPage ? "page" : void 0,
+          href
+        },
+        children
+      ));
+    }
     return /* @__PURE__ */ React3.createElement(
@@ -160,3 +221,3 @@ import_box2.Box,
           ...(0, import_box2.safelySpreadBoxProps)(props),
-          ...BASE_STYLES,
+          ...HORIZONTAL_BASE_STYLES,
           ...isInverse ? INVERSE_STYLES : {},
@@ -163,0 +224,0 @@ ...currentPageStyles,

dist/index.es.js

@@ -1,1 +0,1 @@
-import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import*as React2 from"react";import*as React from"react";var InPageNavigationContext=React.createContext({variant:"default"});var InPageNavigation=React2.forwardRef(({element="IN_PAGE_NAVIGATION",variant="default",marginBottom,children,...props},ref)=>{let isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth";return React2.createElement(InPageNavigationContext.Provider,{value:{variant}},React2.createElement(Box,{...safelySpreadBoxProps(props),as:"nav",ref,element},React2.createElement(Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",justifyContent:isFullWidth?"space-evenly":"flex-start",margin:"space0",marginBottom:marginBottom||"space60",padding:"space0",columnGap:isFullWidth?"space0":"space80"},children)))});InPageNavigation.displayName="InPageNavigation";import{secureExternalLink}from"@twilio-paste/anchor";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";import*as React3 from"react";var BASE_STYLES={borderBottomColor:"transparent",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",color:"colorTextWeak",minWidth:"sizeSquare130",paddingBottom:"space40",paddingLeft:"space20",paddingRight:"space20",paddingTop:"space40",textAlign:"center",fontSize:"fontSize30",fontWeight:"fontWeightMedium",overflow:"hidden",position:"relative",textOverflow:"ellipsis",transition:"border-color 100ms ease, color 100ms ease",whiteSpace:"nowrap",display:"block",width:"100%",textDecoration:"none",_hover:{borderBottomColor:"colorBorderPrimaryStronger",color:"colorTextLinkStronger"},_focus:{boxShadow:"shadowFocus",outline:"none",borderRadius:"borderRadius20"}},CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderPrimary",color:"colorTextLink"},INVERSE_STYLES={color:"colorTextInverseWeaker",_focus:{boxShadow:"shadowFocusInverse",outline:"none",borderRadius:"borderRadius20"},_hover:{borderBottomColor:"colorBorderInverse",color:"colorTextInverseWeaker"}},INVERSE_CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderInverseStrong",color:"colorTextInverse"},InPageNavigationItem=React3.forwardRef(({element="IN_PAGE_NAVIGATION_ITEM",currentPage=!1,href,children,...props},ref)=>{let{variant}=React3.useContext(InPageNavigationContext),isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth",isInverse=variant==="inverse"||variant==="inverse_fullWidth",currentPageStyles={};return currentPage&&(isInverse?currentPageStyles=INVERSE_CURRENT_PAGE_STYLES:currentPageStyles=CURRENT_PAGE_STYLES),React3.createElement(Box2,{as:"li",ref,element,display:"flex",flexBasis:isFullWidth?"100%":void 0,flexGrow:isFullWidth?1:void 0,flexShrink:isFullWidth?1:void 0,minWidth:"size0"},React3.createElement(Box2,{...secureExternalLink(href),...safelySpreadBoxProps2(props),...BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children))});InPageNavigationItem.displayName="InPageNavigationItem";export{InPageNavigation,InPageNavigationItem};
+import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import*as React2 from"react";import*as React from"react";var InPageNavigationContext=React.createContext({variant:"default",orientation:"horizontal"});var InPageNavigation=React2.forwardRef(({element="IN_PAGE_NAVIGATION",variant="default",orientation="horizontal",marginBottom,children,...props},ref)=>{let isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth";return orientation==="vertical"?React2.createElement(InPageNavigationContext.Provider,{value:{variant,orientation}},React2.createElement(Box,{...safelySpreadBoxProps(props),as:"nav",ref,element},React2.createElement(Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",flexDirection:"column",margin:"space0",padding:"space0",minWidth:"size20",maxWidth:"size40",rowGap:"space20"},children))):React2.createElement(InPageNavigationContext.Provider,{value:{variant,orientation}},React2.createElement(Box,{...safelySpreadBoxProps(props),as:"nav",ref,element},React2.createElement(Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",justifyContent:isFullWidth?"space-evenly":"flex-start",columnGap:isFullWidth?"space0":"space80",padding:"space0",margin:"space0",marginBottom:marginBottom||"space60"},children)))});InPageNavigation.displayName="InPageNavigation";import{secureExternalLink}from"@twilio-paste/anchor";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";import*as React3 from"react";var BASE_STYLES={color:"colorTextWeak",minWidth:"sizeSquare130",textAlign:"center",fontSize:"fontSize30",fontWeight:"fontWeightMedium",overflow:"hidden",position:"relative",textOverflow:"ellipsis",transition:"border-color 100ms ease, color 100ms ease",whiteSpace:"nowrap",textDecoration:"none",_hover:{borderBottomColor:"colorBorderPrimaryStronger",color:"colorTextLinkStronger"},_focus:{boxShadow:"shadowFocus",outline:"none",borderRadius:"borderRadius20"}},HORIZONTAL_BASE_STYLES={...BASE_STYLES,width:"100%",display:"block",borderBottomColor:"transparent",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",paddingBottom:"space40",paddingLeft:"space20",paddingRight:"space20",paddingTop:"space40"},VERTICAL_BASE_STYLES={...BASE_STYLES,width:"auto",display:"inline-block",borderLeftColor:"transparent",borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",paddingBottom:"space30",paddingTop:"space30",paddingLeft:"space50",paddingRight:"space50"},CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderPrimary",borderLeftColor:"colorBorderPrimary",color:"colorTextLink"},INVERSE_STYLES={color:"colorTextInverseWeaker",_focus:{boxShadow:"shadowFocusInverse",outline:"none",borderRadius:"borderRadius20"},_hover:{borderBottomColor:"colorBorderInverse",color:"colorTextInverseWeaker"}},INVERSE_CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderInverseStrong",borderLeftColor:"colorBorderInverseStrong",color:"colorTextInverse"},InPageNavigationItem=React3.forwardRef(({element="IN_PAGE_NAVIGATION_ITEM",currentPage=!1,href,children,...props},ref)=>{let{variant,orientation}=React3.useContext(InPageNavigationContext),isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth",isInverse=variant==="inverse"||variant==="inverse_fullWidth",currentPageStyles={};return currentPage&&(isInverse?currentPageStyles=INVERSE_CURRENT_PAGE_STYLES:currentPageStyles=CURRENT_PAGE_STYLES),orientation==="vertical"?React3.createElement(Box2,{as:"li",ref,element,minWidth:"size0",marginBottom:"space20",display:"inline-flex"},React3.createElement(Box2,{...secureExternalLink(href),...safelySpreadBoxProps2(props),...VERTICAL_BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children)):React3.createElement(Box2,{as:"li",ref,element,display:"flex",flexBasis:isFullWidth?"100%":void 0,flexGrow:isFullWidth?1:void 0,flexShrink:isFullWidth?1:void 0,minWidth:"size0"},React3.createElement(Box2,{...secureExternalLink(href),...safelySpreadBoxProps2(props),...HORIZONTAL_BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children))});InPageNavigationItem.displayName="InPageNavigationItem";export{InPageNavigation,InPageNavigationItem};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{InPageNavigation:()=>InPageNavigation,InPageNavigationItem:()=>InPageNavigationItem});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),React2=__toESM(require("react"));var React=__toESM(require("react")),InPageNavigationContext=React.createContext({variant:"default"});var InPageNavigation=React2.forwardRef(({element="IN_PAGE_NAVIGATION",variant="default",marginBottom,children,...props},ref)=>{let isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth";return React2.createElement(InPageNavigationContext.Provider,{value:{variant}},React2.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),as:"nav",ref,element},React2.createElement(import_box.Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",justifyContent:isFullWidth?"space-evenly":"flex-start",margin:"space0",marginBottom:marginBottom||"space60",padding:"space0",columnGap:isFullWidth?"space0":"space80"},children)))});InPageNavigation.displayName="InPageNavigation";var import_anchor=require("@twilio-paste/anchor"),import_box2=require("@twilio-paste/box"),React3=__toESM(require("react"));var BASE_STYLES={borderBottomColor:"transparent",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",color:"colorTextWeak",minWidth:"sizeSquare130",paddingBottom:"space40",paddingLeft:"space20",paddingRight:"space20",paddingTop:"space40",textAlign:"center",fontSize:"fontSize30",fontWeight:"fontWeightMedium",overflow:"hidden",position:"relative",textOverflow:"ellipsis",transition:"border-color 100ms ease, color 100ms ease",whiteSpace:"nowrap",display:"block",width:"100%",textDecoration:"none",_hover:{borderBottomColor:"colorBorderPrimaryStronger",color:"colorTextLinkStronger"},_focus:{boxShadow:"shadowFocus",outline:"none",borderRadius:"borderRadius20"}},CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderPrimary",color:"colorTextLink"},INVERSE_STYLES={color:"colorTextInverseWeaker",_focus:{boxShadow:"shadowFocusInverse",outline:"none",borderRadius:"borderRadius20"},_hover:{borderBottomColor:"colorBorderInverse",color:"colorTextInverseWeaker"}},INVERSE_CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderInverseStrong",color:"colorTextInverse"},InPageNavigationItem=React3.forwardRef(({element="IN_PAGE_NAVIGATION_ITEM",currentPage=!1,href,children,...props},ref)=>{let{variant}=React3.useContext(InPageNavigationContext),isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth",isInverse=variant==="inverse"||variant==="inverse_fullWidth",currentPageStyles={};return currentPage&&(isInverse?currentPageStyles=INVERSE_CURRENT_PAGE_STYLES:currentPageStyles=CURRENT_PAGE_STYLES),React3.createElement(import_box2.Box,{as:"li",ref,element,display:"flex",flexBasis:isFullWidth?"100%":void 0,flexGrow:isFullWidth?1:void 0,flexShrink:isFullWidth?1:void 0,minWidth:"size0"},React3.createElement(import_box2.Box,{...(0,import_anchor.secureExternalLink)(href),...(0,import_box2.safelySpreadBoxProps)(props),...BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children))});InPageNavigationItem.displayName="InPageNavigationItem";
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{InPageNavigation:()=>InPageNavigation,InPageNavigationItem:()=>InPageNavigationItem});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),React2=__toESM(require("react"));var React=__toESM(require("react")),InPageNavigationContext=React.createContext({variant:"default",orientation:"horizontal"});var InPageNavigation=React2.forwardRef(({element="IN_PAGE_NAVIGATION",variant="default",orientation="horizontal",marginBottom,children,...props},ref)=>{let isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth";return orientation==="vertical"?React2.createElement(InPageNavigationContext.Provider,{value:{variant,orientation}},React2.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),as:"nav",ref,element},React2.createElement(import_box.Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",flexDirection:"column",margin:"space0",padding:"space0",minWidth:"size20",maxWidth:"size40",rowGap:"space20"},children))):React2.createElement(InPageNavigationContext.Provider,{value:{variant,orientation}},React2.createElement(import_box.Box,{...(0,import_box.safelySpreadBoxProps)(props),as:"nav",ref,element},React2.createElement(import_box.Box,{as:"ul",listStyleType:"none",element:`${element}_ITEMS`,display:"flex",justifyContent:isFullWidth?"space-evenly":"flex-start",columnGap:isFullWidth?"space0":"space80",padding:"space0",margin:"space0",marginBottom:marginBottom||"space60"},children)))});InPageNavigation.displayName="InPageNavigation";var import_anchor=require("@twilio-paste/anchor"),import_box2=require("@twilio-paste/box"),React3=__toESM(require("react"));var BASE_STYLES={color:"colorTextWeak",minWidth:"sizeSquare130",textAlign:"center",fontSize:"fontSize30",fontWeight:"fontWeightMedium",overflow:"hidden",position:"relative",textOverflow:"ellipsis",transition:"border-color 100ms ease, color 100ms ease",whiteSpace:"nowrap",textDecoration:"none",_hover:{borderBottomColor:"colorBorderPrimaryStronger",color:"colorTextLinkStronger"},_focus:{boxShadow:"shadowFocus",outline:"none",borderRadius:"borderRadius20"}},HORIZONTAL_BASE_STYLES={...BASE_STYLES,width:"100%",display:"block",borderBottomColor:"transparent",borderBottomStyle:"solid",borderBottomWidth:"borderWidth10",paddingBottom:"space40",paddingLeft:"space20",paddingRight:"space20",paddingTop:"space40"},VERTICAL_BASE_STYLES={...BASE_STYLES,width:"auto",display:"inline-block",borderLeftColor:"transparent",borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",paddingBottom:"space30",paddingTop:"space30",paddingLeft:"space50",paddingRight:"space50"},CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderPrimary",borderLeftColor:"colorBorderPrimary",color:"colorTextLink"},INVERSE_STYLES={color:"colorTextInverseWeaker",_focus:{boxShadow:"shadowFocusInverse",outline:"none",borderRadius:"borderRadius20"},_hover:{borderBottomColor:"colorBorderInverse",color:"colorTextInverseWeaker"}},INVERSE_CURRENT_PAGE_STYLES={borderBottomColor:"colorBorderInverseStrong",borderLeftColor:"colorBorderInverseStrong",color:"colorTextInverse"},InPageNavigationItem=React3.forwardRef(({element="IN_PAGE_NAVIGATION_ITEM",currentPage=!1,href,children,...props},ref)=>{let{variant,orientation}=React3.useContext(InPageNavigationContext),isFullWidth=variant==="fullWidth"||variant==="inverse_fullWidth",isInverse=variant==="inverse"||variant==="inverse_fullWidth",currentPageStyles={};return currentPage&&(isInverse?currentPageStyles=INVERSE_CURRENT_PAGE_STYLES:currentPageStyles=CURRENT_PAGE_STYLES),orientation==="vertical"?React3.createElement(import_box2.Box,{as:"li",ref,element,minWidth:"size0",marginBottom:"space20",display:"inline-flex"},React3.createElement(import_box2.Box,{...(0,import_anchor.secureExternalLink)(href),...(0,import_box2.safelySpreadBoxProps)(props),...VERTICAL_BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children)):React3.createElement(import_box2.Box,{as:"li",ref,element,display:"flex",flexBasis:isFullWidth?"100%":void 0,flexGrow:isFullWidth?1:void 0,flexShrink:isFullWidth?1:void 0,minWidth:"size0"},React3.createElement(import_box2.Box,{...(0,import_anchor.secureExternalLink)(href),...(0,import_box2.safelySpreadBoxProps)(props),...HORIZONTAL_BASE_STYLES,...isInverse?INVERSE_STYLES:{},...currentPageStyles,as:"a",ref,element:`${element}_ANCHOR`,"aria-current":currentPage?"page":void 0,href},children))});InPageNavigationItem.displayName="InPageNavigationItem";

dist/InPageNavigation.d.ts

 import type { BoxProps } from "@twilio-paste/box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
-import type { Variants } from "./types";
-export interface InPageNavigationProps extends Omit<React.ComponentPropsWithRef<"div">, "children"> {
+import type { Orientation, Variants } from "./types";
+export interface InPageNavigationProps extends Omit<HTMLPasteProps<"div">, "children"> {
     children?: React.ReactNode;
+    /**
+     * Overrides the default element name to apply unique styles with the Customization Provider
+     *
+     * @default 'IN_PAGE_NAVIGATION'
+     * @type {BoxProps['element']}
+     * @memberof InPageNavigationProps
+     */
     element?: BoxProps["element"];
+    /**
+     * Allows removal of bottom margin by setting `space0`
+     *
+     * @memberof InPageNavigationProps
+     */
     marginBottom?: "space0";
+    /**
+     * Unique label for the InPageNavigation
+     *
+     * @type {string}
+     * @memberof InPageNavigationProps
+     */
     "aria-label": string;
+    /**
+     * InPageNavigation variant
+     *
+     * @type {Variants}
+     * @memberof InPageNavigationProps
+     */
     variant?: Variants;
+    orientation?: Orientation;
 }
-declare const InPageNavigation: React.ForwardRefExoticComponent<Omit<InPageNavigationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const InPageNavigation: React.ForwardRefExoticComponent<InPageNavigationProps & React.RefAttributes<HTMLDivElement>>;
 export { InPageNavigation };
 //# sourceMappingURL=InPageNavigation.d.ts.map

dist/InPageNavigationContext.d.ts

@@ -5,2 +5,3 @@ import * as React from "react";
     variant?: Variants;
+    orientation?: "horizontal" | "vertical";
 }
@@ -7,0 +8,0 @@ declare const InPageNavigationContext: React.Context<InPageNavigationContextValue>;

dist/InPageNavigationItem.d.ts

@@ -5,5 +5,25 @@ import type { BoxProps } from "@twilio-paste/box";
 export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
+    /**
+     * Sets the InPageNavigationItem as the current page and adds `aria-current="page"`
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof InPageNavigationItemProps
+     */
     currentPage?: boolean;
     children: NonNullable<React.ReactNode>;
+    /**
+     * A URL to route to.
+     *
+     * @type {string}
+     * @memberof InPageNavigationItemProps
+     */
     href: string;
+    /**
+     * Overrides the default element name to apply unique styles with the Customization Provider
+     *
+     * @default 'IN_PAGE_NAVIGATION_ITEM'
+     * @type {BoxProps['element']}
+     * @memberof InPageNavigationItemProps
+     */
     element?: BoxProps["element"];
@@ -10,0 +30,0 @@ }

dist/types.d.ts

 export type Variants = "fullWidth" | "default" | "inverse" | "inverse_fullWidth";
+export type Orientation = "horizontal" | "vertical";
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@twilio-paste/in-page-navigation",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "category": "navigation",
@@ -23,2 +23,3 @@ "status": "production",
     "build:js": "NODE_ENV=development node build.js",
+    "build:typedocs": "tsx ../../../../tools/build/generate-type-docs",
     "clean": "rm -rf ./dist",
@@ -62,4 +63,5 @@ "tsc": "tsc"
     "react-dom": "^18.0.0",
+    "tsx": "^3.12.10",
     "typescript": "^4.9.4"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114195

increased by0.69%

Lines of code

537

increased by51.27%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes