feat(package): dual module support

packages/react-charts/package.json

@@ -2,9 +2,27 @@
   "name": "@patternfly/react-charts",
   "version": "8.3.0-prerelease.21",
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
+  "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    "./echarts": {
+      "import": "./dist/esm/echarts/index.js",
+      "require": "./dist/js/echarts/index.js"
+    },
+    "./victory": {
+      "import": "./dist/esm/victory/index.js",
+      "require": "./dist/js/victory/index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "import": "./dist/esm/*",
+      "require": "./dist/js/*"
+    },
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
   "typesVersions": {
     "*": {
       "echarts": [

packages/react-code-editor/package.json

@@ -2,9 +2,23 @@
   "name": "@patternfly/react-code-editor",
   "version": "6.3.0-prerelease.33",
   "description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
+  "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/js/index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "import": "./dist/esm/*",
+      "require": "./dist/js/*"
+    },
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
   "patternfly:src": "src/",
   "sideEffects": false,
   "publishConfig": {

packages/react-core/package.json

@@ -2,9 +2,47 @@
   "name": "@patternfly/react-core",
   "version": "6.3.0-prerelease.33",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
+  "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/js/index.js"
+    },
+    "./deprecated": {
+      "import": "./dist/esm/deprecated/index.js",
+      "require": "./dist/js/deprecated/index.js"
+    },
+    "./package.json": "./package.json",
+    "./components/*": {
+      "import": "./dist/esm/components/*/index.js", 
+      "require": "./dist/js/components/*/index.js"
+    },
+    "./helpers": {
+      "import": "./dist/esm/helpers/index.js",
+      "require": "./dist/js/helpers/index.js"  
+    },
+    "./helpers/*": {
+      "import": "./dist/esm/helpers/*.js",
+      "require": "./dist/js/helpers/*.js"  
+    },
+    "./dist/esm/components/*": "./dist/esm/components/*/index.js",
+    "./dist/js/components/*": "./dist/js/components/*/index.js",
+    "./dist/esm/layouts/*": "./dist/esm/layouts/*/index.js",
+    "./dist/js/layouts/*": "./dist/js/layouts/*/index.js",
+    "./dist/esm/helpers": "./dist/esm/helpers/index.js",
+    "./dist/js/helpers": "./dist/js/helpers/index.js",
+    "./dist/esm/*": "./dist/esm/*.js",
+    "./dist/js/*": "./dist/js/*.js",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./*": {
+      "import": "./dist/esm/*",
+      "require": "./dist/js/*"
+    }
+  },
   "typesVersions": {
     "*": {
       "next": [

packages/react-core/src/components/DualListSelector/index.ts

@@ -5,3 +5,4 @@ export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
+export * from './DualListSelectorContext';

packages/react-core/src/demos/AlertGroup.md

@@ -6,8 +6,8 @@ section: components
 import { useEffect, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
+import { DashboardWrapper } from '@patternfly/react-core';
+import { DashboardHeader } from '@patternfly/react-core';
 
 ## Demos
 

packages/react-core/src/demos/BackToTop.md

@@ -2,8 +2,9 @@
 id: Back to top
 section: components
 ---
+
 import { useState } from 'react';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 ## Demos
 
@@ -12,4 +13,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 Note that `tabIndex={0}` is added to the scrolling `PageSection` of the page to allow keyboard users the ability to focus and scroll.
 
 ```js isFullscreen file="./examples/BackToTop/BackToTopNameDemo.tsx"
+
 ```

packages/react-core/src/demos/Banner.md

@@ -2,10 +2,11 @@
 id: Banner
 section: components
 ---
+
 import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 ## Demos
 
@@ -15,7 +16,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import { Fragment } from 'react';
 import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
 
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 
@@ -48,7 +49,7 @@ class BannerDemo extends React.Component {
               </p>
             </Content>
           </PageSection>
-          <PageSection aria-label='Cards gallery'>
+          <PageSection aria-label="Cards gallery">
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
@@ -81,7 +82,7 @@ import {
   PageSection,
   Content
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 
@@ -114,15 +115,15 @@ class BannerDemo extends React.Component {
             <DashboardWrapper breadcrumb={null}>
               <PageSection aria-labelledby="main-title">
                 <Content>
-                  <h1 id='main-title'>Main title</h1>
+                  <h1 id="main-title">Main title</h1>
                   <p>
                     Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
                     <br />
                     of it’s relative line height of 1.5.
                   </p>
                 </Content>
               </PageSection>
-              <PageSection aria-label='Cards gallery'>
+              <PageSection aria-label="Cards gallery">
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>

packages/react-core/src/demos/CardView/CardView.md

@@ -19,7 +19,7 @@ import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 ## Demos
 
@@ -28,4 +28,5 @@ This demonstrates how you can assemble a full page view that contains a grid of
 ### Card view
 
 ```js file="./examples/CardView.tsx" isFullscreen
+
 ```

packages/react-core/src/demos/CardView/examples/CardView.tsx

@@ -47,7 +47,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const CardViewBasic: React.FunctionComponent = () => {

packages/react-core/src/demos/DataList/examples/DataListActionable.tsx

@@ -17,7 +17,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 export const DataListActionable: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);

packages/react-core/src/demos/DataList/examples/DataListBasic.tsx

@@ -21,7 +21,7 @@ import {
   ToolbarContent
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';

packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -26,7 +26,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';

packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx

@@ -23,7 +23,7 @@ import {
   PaginationVariant
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';

packages/react-core/src/demos/DataListDemo.md

@@ -16,7 +16,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ## Demos
@@ -30,14 +30,17 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 ### Expandable control in toolbar
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+
 ```
 
 ### Actionable
 
 ```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+
 ```
 
 ### Static bottom pagination
 
 ```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
-```
+
+```

packages/react-core/src/demos/DescriptionList/DescriptionList.md

@@ -6,16 +6,18 @@ section: components
 import { useRef, useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 ## Demos
 
 ### Basic
 
 ```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+
 ```
 
 ### In drawer
 
 ```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
+
 ```

packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -14,7 +14,7 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
   <DashboardWrapper>

packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -17,7 +17,7 @@ import {
   Button,
   Title
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListInDrawer: React.FunctionComponent = () => {

packages/react-core/src/demos/JumpLinks.md

@@ -6,7 +6,7 @@ section: components
 import { useContext, useEffect, useRef, useState } from 'react';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 
 ## Demos
 
@@ -37,7 +37,7 @@ import {
   Content,
   getResizeObserver
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 ScrollspyH2 = () => {
@@ -59,8 +59,6 @@ ScrollspyH2 = () => {
       const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
       jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
     }
-
-
   }, [isVertical]);
 
   getResizeObserver(
@@ -79,8 +77,8 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection aria-labelledby='main-title'>
-        <Title headingLevel="h1" size="2xl" id='main-title'>
+      <PageSection aria-labelledby="main-title">
+        <Title headingLevel="h1" size="2xl" id="main-title">
           Main title
         </Title>
         <Switch
@@ -90,10 +88,10 @@ ScrollspyH2 = () => {
           onChange={(_event, check) => setIsVertical(check)}
         />
       </PageSection>
-      <PageSection padding={{ default: 'noPadding' }} >
+      <PageSection padding={{ default: 'noPadding' }}>
         <Sidebar hasGutter orientation={!isVertical && 'stack'}>
           <SidebarPanel variant="sticky">
-            <PageSection aria-label='Jump links navigation'>
+            <PageSection aria-label="Jump links navigation">
               <JumpLinks
                 isVertical={isVertical}
                 isCentered={!isVertical}
@@ -103,7 +101,7 @@ ScrollspyH2 = () => {
                 expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
                 isExpanded
               >
-                {headings.map(i => (
+                {headings.map((i) => (
                   <JumpLinksItem key={i} href={`#heading-${i}`}>
                     {`Heading ${i}`}
                     <JumpLinksList></JumpLinksList>
@@ -113,9 +111,9 @@ ScrollspyH2 = () => {
             </PageSection>
           </SidebarPanel>
           <SidebarContent hasNoBackground>
-            <PageSection aria-label='Main content'>
+            <PageSection aria-label="Main content">
               <Content>
-                {headings.map(i => (
+                {headings.map((i) => (
                   <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
                     <h2 id={`heading-${i}`} tabIndex={-1}>
                       {`Heading ${i}`}
@@ -158,4 +156,5 @@ This demo shows how jump links can be used in combination with a drawer.
 This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
 
 ```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
+
 ```