diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index a5f121bd315..2fc43ba90d4 100644 --- a/packages/react-charts/package.json +++ b/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": [ diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index 335ac261932..5842fab0dee 100644 --- a/packages/react-code-editor/package.json +++ b/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": { diff --git a/packages/react-core/package.json b/packages/react-core/package.json index cbac01279da..38c9273e5eb 100644 --- a/packages/react-core/package.json +++ b/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": [ diff --git a/packages/react-core/src/components/DualListSelector/index.ts b/packages/react-core/src/components/DualListSelector/index.ts index d2b6deb96ff..73837532076 100644 --- a/packages/react-core/src/components/DualListSelector/index.ts +++ b/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'; diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md index 9099b7a64fb..878f398a21e 100644 --- a/packages/react-core/src/demos/AlertGroup.md +++ b/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 diff --git a/packages/react-core/src/demos/BackToTop.md b/packages/react-core/src/demos/BackToTop.md index f1b362c9d00..8636959daaf 100644 --- a/packages/react-core/src/demos/BackToTop.md +++ b/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" + ``` diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md index f933f6ff7db..3f9f750f22f 100644 --- a/packages/react-core/src/demos/Banner.md +++ b/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 {

- + {Array.from({ length: 30 }).map((_value, 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,7 +115,7 @@ class BannerDemo extends React.Component { -

Main title

+

Main title

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
@@ -122,7 +123,7 @@ class BannerDemo extends React.Component {

- + {Array.from({ length: 30 }).map((_value, index) => ( diff --git a/packages/react-core/src/demos/CardView/CardView.md b/packages/react-core/src/demos/CardView/CardView.md index 42d0121f6cc..e4bde287879 100644 --- a/packages/react-core/src/demos/CardView/CardView.md +++ b/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 + ``` diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx index 2ebb1370775..41f7a497c71 100644 --- a/packages/react-core/src/demos/CardView/examples/CardView.tsx +++ b/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 = () => { diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx index 3e08e1656fe..a943a8fa423 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx +++ b/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); diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx index 1452fa1837c..b5747ad3c5b 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx +++ b/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'; diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index 371720dfbce..6d653f4818e 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +++ b/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'; diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx index 229aa2e6b8c..58b2310cfc2 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx +++ b/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'; diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index e44a1ac57a4..ecd183e3f16 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/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 -``` \ No newline at end of file + +``` diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 5d7c75ec2a6..0b7565d976c 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/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 + ``` diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 6e5c7d8d246..aaf88ae296e 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/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 = () => ( diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx index 186468edcd2..a0b78521ba6 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx +++ b/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 = () => { diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index 9a84154de56..cba84e20ad0 100644 --- a/packages/react-core/src/demos/JumpLinks.md +++ b/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 ( - - + <PageSection aria-labelledby="main-title"> + <Title headingLevel="h1" size="2xl" id="main-title"> Main title { onChange={(_event, check) => setIsVertical(check)} /> - + - + { expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }} isExpanded > - {headings.map(i => ( + {headings.map((i) => ( {`Heading ${i}`} @@ -113,9 +111,9 @@ ScrollspyH2 = () => { - + - {headings.map(i => ( + {headings.map((i) => (

{`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" + ``` diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index 8e9ff804270..e564a126dd3 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -12,52 +12,61 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; -import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; -import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; +import { DashboardBreadcrumb } from '@patternfly/react-core'; +import { DashboardHeader } from '@patternfly/react-core'; ## Demos ### Default nav ```js file='./examples/Nav/NavDefault.tsx' isFullscreen + ``` ### Grouped nav ```js file='./examples/Nav/NavGrouped.tsx' isFullscreen + ``` ### Expandable nav ```js file='./examples/Nav/NavExpandable.tsx' isFullscreen + ``` ### Horizontal nav ```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen + ``` ### Horizontal subnav ```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen + ``` ### Horizontal nav with horizontal subnav ```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen + ``` ### Manual nav ```js file='./examples/Nav/NavManual.tsx' isFullscreen + ``` ### Flyout nav ```js file='./examples/Nav/NavFlyout.tsx' isFullscreen + ``` ### Drilldown nav ```js isFullscreen file="./examples/Nav/NavDrilldown.tsx" + ``` diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index a3040769493..5ffff49121e 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -25,13 +25,14 @@ 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 { 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 ### Primary-detail full page ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen + ``` ### Primary-detail content padding @@ -43,16 +44,19 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Primary-detail card view ```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen + ``` ### Primary-detail simple list in card ```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen + ``` ### Primary-detail data list in card ```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen + ``` ### Primary-detail inline modifier diff --git a/packages/react-core/src/demos/Skeleton.md b/packages/react-core/src/demos/Skeleton.md index bd2a63db01f..0019d60f8e0 100644 --- a/packages/react-core/src/demos/Skeleton.md +++ b/packages/react-core/src/demos/Skeleton.md @@ -2,7 +2,8 @@ id: Skeleton section: components --- -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -10,4 +11,4 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ```ts file='./examples/Skeleton/SkeletonCard.tsx' isFullscreen -``` \ No newline at end of file +``` diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index aae416129a4..2d58617c0a5 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -15,7 +15,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import display from '@patternfly/react-styles/css/utilities/Display/display'; import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -46,7 +46,7 @@ import { import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; TabsOpenDemo = () => { const [activeTabKey, setActiveTabKey] = useState(0); @@ -159,7 +159,7 @@ TabsOpenDemo = () => { return ( {tabsBreadcrumb} - + { - + Details} tabContentId={`tabContent${0}`} /> YAML} tabContentId={`tabContent${1}`} /> @@ -187,7 +187,7 @@ TabsOpenDemo = () => { Terminal} tabContentId={`tabContent${4}`} /> - + @@ -236,7 +236,7 @@ import { import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; TabsOpenWithSecondaryTabsDemo = () => { const [activeTabKey, setActiveTabKey] = useState(0); @@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => { return ( {tabsBreadcrumb} - + { - + Details} tabContentId={`tabContent${0}`} /> YAML} tabContentId={`tabContent${1}`} /> @@ -383,7 +383,7 @@ TabsOpenWithSecondaryTabsDemo = () => { Terminal} tabContentId={`tabContent${4}`} /> - + ); -export const DashboardWrapper: React.FC = ({ +export const DashboardWrapper: FC = ({ children, mainContainerId, banner, diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js index fd66ba337b9..280db850032 100644 --- a/packages/react-docs/patternfly-docs/pages/icons.js +++ b/packages/react-docs/patternfly-docs/pages/icons.js @@ -2,7 +2,7 @@ import React from 'react'; import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid'; -import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md'; import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm'; diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js index c12f6f6159e..bf4e993718c 100644 --- a/packages/react-docs/patternfly-docs/pages/index.js +++ b/packages/react-docs/patternfly-docs/pages/index.js @@ -1,6 +1,6 @@ // eslint-disable-next-line import React from 'react'; -import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { Title } from '@patternfly/react-core/dist/esm/components/Title'; // https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ diff --git a/packages/react-drag-drop/package.json b/packages/react-drag-drop/package.json index f51d21eaf15..5ce79de7c3a 100644 --- a/packages/react-drag-drop/package.json +++ b/packages/react-drag-drop/package.json @@ -2,9 +2,23 @@ "name": "@patternfly/react-drag-drop", "version": "6.3.0-prerelease.33", "description": "PatternFly drag and drop solution", + "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/*" + }, "sideEffects": false, "publishConfig": { "access": "public" diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx index 68bf81048d2..b838de46a10 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx @@ -25,7 +25,7 @@ import { Draggable } from './Draggable'; import { DraggableDataListItem } from './DraggableDataListItem'; import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem'; import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop'; -import { DataList } from '@patternfly/react-core/dist/esm/components/DataList/DataList'; +import { DataList } from '@patternfly/react-core/dist/esm/components/DataList'; import { canUseDOM } from '@patternfly/react-core/dist/esm/helpers/util'; export type DragDropContainerDragStartEvent = DragStartEvent; diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx index ae0afa365b5..a4bbd42353f 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx @@ -4,8 +4,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DataList/data-list'; import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop'; import { DragButton } from './DragButton'; -import { DataListItemRow } from '@patternfly/react-core/dist/esm/components/DataList/DataListItemRow'; -import { DataListControl } from '@patternfly/react-core/dist/esm/components/DataList/DataListControl'; +import { DataListItemRow, DataListControl } from '@patternfly/react-core/dist/esm/components/DataList'; export interface DraggableDataListItemObject { id?: string; diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx index 734ca7b28e1..23225b16853 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx @@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector'; import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop'; import { DragButton } from './DragButton'; -import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector/DualListSelectorContext'; +import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector'; export interface DraggableDualListSelectorListItemProps extends React.HTMLProps { /** Content rendered inside DragDrop */ diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 68a501addb1..50d95410b6e 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -6,6 +6,49 @@ "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", "sideEffects": false, + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js", + "types": "./dist/esm/index.d.ts" + }, + "./createIcon": { + "import": "./dist/esm/createIcon.js", + "require": "./dist/js/createIcon.js", + "types": "./dist/esm/createIcon.d.ts" + }, + "./icons": { + "import": "./dist/esm/icons/index.js", + "require": "./dist/js/icons/index.js", + "types": "./dist/esm/icons/index.d.ts" + }, + "./icons/*": { + "import": "./dist/esm/icons/*.js", + "require": "./dist/js/icons/*.js", + "types": "./dist/esm/icons/*.d.ts" + }, + "./dist/esm/createIcon": { + "import": "./dist/esm/createIcon.js", + "types": "./dist/esm/createIcon.d.ts" + }, + "./dist/js/createIcon": { + "require": "./dist/js/createIcon.js", + "types": "./dist/js/createIcon.d.ts" + }, + "./dist/esm/icons": { + "import": "./dist/esm/icons/index.js", + "types": "./dist/esm/icons/index.d.ts" + }, + "./dist/js/icons": { + "require": "./dist/js/icons/index.js", + "types": "./dist/js/icons/index.d.ts" + }, + "./dist/esm/icons/*": "./dist/esm/icons/*.js", + "./dist/js/icons/*": "./dist/js/icons/*.js", + "./dist/esm/*": "./dist/esm/*.js", + "./dist/js/*": "./dist/js/*.js", + "./dist/*": "./dist/*" + }, "publishConfig": { "access": "public", "tag": "prerelease" diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts index 7fb22e8335d..f12339d5eac 100644 --- a/packages/react-icons/src/index.ts +++ b/packages/react-icons/src/index.ts @@ -1 +1,2 @@ export * from './icons/index'; +export * from './createIcon'; diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx index a22193c65bb..2a20464922c 100755 --- a/packages/react-integration/demo-app-ts/src/App.tsx +++ b/packages/react-integration/demo-app-ts/src/App.tsx @@ -1,26 +1,28 @@ import { Component, createElement } from 'react'; import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; -import { Avatar } from '@patternfly/react-core/dist/esm/components/Avatar'; -import { Brand } from '@patternfly/react-core/dist/esm/components/Brand'; import { + Avatar, + Brand, Masthead, MastheadLogo, MastheadBrand, MastheadContent, MastheadMain, - MastheadToggle -} from '@patternfly/react-core/dist/esm/components/Masthead'; -import { Nav, NavList, NavItem } from '@patternfly/react-core/dist/esm/components/Nav'; -import { + MastheadToggle, + Nav, + NavList, + NavItem, Page, PageSection, PageSidebar, PageSidebarBody, - PageToggleButton -} from '@patternfly/react-core/dist/esm/components/Page'; -import { Radio } from '@patternfly/react-core/dist/esm/components/Radio'; -import { SkipToContent } from '@patternfly/react-core/dist/esm/components/SkipToContent'; -import { Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core/dist/esm/components/Toolbar'; + PageToggleButton, + Radio, + SkipToContent, + Toolbar, + ToolbarGroup, + ToolbarItem +} from '@patternfly/react-core'; import imgBrand from './assets/images/imgBrand.svg'; import imgAvatar from './assets/images/imgAvatar.svg'; import Demos from './Demos'; diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 7b5f4585961..69f41135b9f 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -8,6 +8,78 @@ "*.css", "*.scss" ], + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js", + "types": "./dist/esm/index.d.ts" + }, + "./package.json": "./package.json", + "./src/*": "./src/*", + "./css/*.css": "./css/*.css", + "./css/*.mjs": "./css/*.mjs", + "./css/*.js": "./css/*.js", + "./css/*.d.ts": "./css/*.d.ts", + "./css/*": { + "import": "./css/*.mjs", + "require": "./css/*.js", + "types": "./css/*.d.ts" + }, + "./css/components/*.css": "./css/components/*.css", + "./css/components/*.mjs": "./css/components/*.mjs", + "./css/components/*.js": "./css/components/*.js", + "./css/components/*.d.ts": "./css/components/*.d.ts", + "./css/components/*": { + "import": "./css/components/*.mjs", + "require": "./css/components/*.js", + "types": "./css/components/*.d.ts" + }, + "./css/layouts/*.css": "./css/layouts/*.css", + "./css/layouts/*.mjs": "./css/layouts/*.mjs", + "./css/layouts/*.js": "./css/layouts/*.js", + "./css/layouts/*.d.ts": "./css/layouts/*.d.ts", + "./css/layouts/*": { + "import": "./css/layouts/*.mjs", + "require": "./css/layouts/*.js", + "types": "./css/layouts/*.d.ts" + }, + "./css/utilities/*.css": "./css/utilities/*.css", + "./css/utilities/*.mjs": "./css/utilities/*.mjs", + "./css/utilities/*.js": "./css/utilities/*.js", + "./css/utilities/*.d.ts": "./css/utilities/*.d.ts", + "./css/utilities/*": { + "import": "./css/utilities/*.mjs", + "require": "./css/utilities/*.js", + "types": "./css/utilities/*.d.ts" + }, + "./css/assets/*.css": "./css/assets/*.css", + "./css/assets/*.mjs": "./css/assets/*.mjs", + "./css/assets/*.js": "./css/assets/*.js", + "./css/assets/*.d.ts": "./css/assets/*.d.ts", + "./css/assets/*": { + "import": "./css/assets/*.mjs", + "require": "./css/assets/*.js", + "types": "./css/assets/*.d.ts" + }, + "./css/docs/*.css": "./css/docs/*.css", + "./css/docs/*.mjs": "./css/docs/*.mjs", + "./css/docs/*.js": "./css/docs/*.js", + "./css/docs/*.d.ts": "./css/docs/*.d.ts", + "./css/docs/*": { + "import": "./css/docs/*.mjs", + "require": "./css/docs/*.js", + "types": "./css/docs/*.d.ts" + }, + "./dist/esm/*": { + "import": "./dist/esm/*.js", + "types": "./dist/esm/*.d.ts" + }, + "./dist/js/*": { + "require": "./dist/js/*.js", + "types": "./dist/js/*.d.ts" + }, + "./dist/*": "./dist/*" + }, "description": "CSS-in-JS class maps and utilities for PatternFly.", "author": "Red Hat", "publishConfig": { diff --git a/packages/react-table/package.json b/packages/react-table/package.json index 0bf0aa027f8..f90837696bb 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -2,8 +2,26 @@ "name": "@patternfly/react-table", "version": "6.3.0-prerelease.33", "description": "This library provides a set of React table components for use with the PatternFly 4", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", + "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", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "types": "dist/esm/index.d.ts", "typesVersions": { "*": { diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index c58e49dae1d..dbc5e10d7b5 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -149,7 +149,7 @@ export interface ISortBy { defaultDirection?: 'asc' | 'desc'; } -export interface IAction extends Omit, Pick { +export interface IAction extends Omit { /** Flag indicating an item on actions menu is a separator, rather than an action */ isSeparator?: boolean; /** Key of actions menu item */ @@ -166,10 +166,12 @@ export interface IAction extends Omit, P isOutsideDropdown?: boolean; /** Flag indicating whether the actions dropdown should close after an item is clicked. */ shouldCloseOnClick?: boolean; + /** Button variant for the action item */ + variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'; } -export interface ISeparator extends IAction { - isSeparator: boolean; +export interface ISeparator extends Omit { + isSeparator: true; } export type IActions = (IAction | ISeparator)[]; diff --git a/packages/react-table/src/components/Table/Td.tsx b/packages/react-table/src/components/Table/Td.tsx index 8116ebb6cfe..9482946adb4 100644 --- a/packages/react-table/src/components/Table/Td.tsx +++ b/packages/react-table/src/components/Table/Td.tsx @@ -19,7 +19,7 @@ import { draggable } from './utils/decorators/draggable'; import { treeRow } from './utils'; import { mergeProps } from './base/merge-props'; import { IVisibility } from './utils/decorators/classNames'; -import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip'; +import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; import { IFormatterValueType, IExtra } from './TableTypes'; import { TdActionsType, diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx deleted file mode 100644 index 1798c9cbb99..00000000000 --- a/packages/react-table/src/demos/DashboardHeader.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import { useState } from 'react'; -import { - Avatar, - Button, - ButtonVariant, - Divider, - Dropdown, - DropdownGroup, - DropdownItem, - DropdownList, - Masthead, - MastheadMain, - MastheadToggle, - MastheadBrand, - MastheadLogo, - MastheadContent, - MenuToggle, - NotificationBadge, - NotificationBadgeVariant, - Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, - PageToggleButton -} from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg'; - -interface DashboardHeaderProps { - /** Render custom notification badge */ - notificationBadge?: React.ReactNode; -} - -export const DashboardHeader: React.FC = ({ notificationBadge }) => { - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); - - const patternflyLogo = ( - - PatternFly - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - - const kebabDropdownItems = ( - <> - - Settings - - - Help - - - ); - - const userDropdownItems = ( - <> - My profile - User management - Logout - - ); - - const onDropdownToggle = () => { - setIsDropdownOpen(!isDropdownOpen); - }; - - const onDropdownSelect = () => { - setIsDropdownOpen(false); - }; - - const onKebabDropdownToggle = () => { - setIsKebabDropdownOpen(!isKebabDropdownOpen); - }; - - const onKebabDropdownSelect = () => { - setIsKebabDropdownOpen(false); - }; - - const onFullKebabToggle = () => { - setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen); - }; - - const onFullKebabSelect = () => { - setIsFullKebabDropdownOpen(false); - }; - - return ( - - - - - - - {patternflyLogo} - - - - - - - {notificationBadge ?? ( - - {}} - /> - - )} - - -