refactor(misc): change imports from '@patternfly/react-core' to direct imports (V5) (#11375)

adamviktora · web-flow · commit 067ed1d5f03a · 2025-01-14T08:50:07.000-05:00
* refactor(misc): change imports from '@patternfly/react-core' to direct imports

- this change reduces size of CSS that is imported

* test(CheckboxSelect): update snapshot
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -2,21 +2,19 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+import { Button, ButtonVariant } from '@patternfly/react-core/dist/esm/components/Button';
 import {
-  Button,
-  ButtonVariant,
   EmptyState,
-  EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateActions,
-  EmptyStateVariant,
+  EmptyStateBody,
   EmptyStateFooter,
-  getResizeObserver,
-  Popover,
-  PopoverProps,
-  TooltipPosition,
-  EmptyStateHeader
-} from '@patternfly/react-core';
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant
+} from '@patternfly/react-core/dist/esm/components/EmptyState';
+import { Popover, PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
+import { TooltipPosition } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { getResizeObserver } from '@patternfly/react-core/dist/esm/helpers/resizeObserver';
 import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, ButtonProps, Tooltip } from '@patternfly/react-core';
+import { Button, ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { CodeEditorContext } from './CodeEditorUtils';
 
 /** Allows customizing the code editor controls by passing this sub-component into the
diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js
@@ -1,5 +1,8 @@
 import React from 'react';
-import { Tooltip, Text, Grid, GridItem, PageSection } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
+import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
+import { Text } from '@patternfly/react-core/dist/esm/components/Text';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md';
 import labelFontSize from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
 import * as IconsModule from '@patternfly/react-icons/dist/esm';
diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Title, PageSection } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
+import { Title } from '@patternfly/react-core/dist/esm/components/Title';
 
 // https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
 const centerStyle = {
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DragDropContainer.tsx
@@ -25,7 +25,8 @@ 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, canUseDOM } from '@patternfly/react-core';
+import { DataList } from '@patternfly/react-core/dist/esm/components/DataList/DataList';
+import { canUseDOM } from '@patternfly/react-core/dist/esm/helpers/util';
 
 export type DragDropContainerDragStartEvent = DragStartEvent;
 export type DragDropContainerDragOverEvent = DragOverEvent;
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DraggableDataListItem.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DraggableDataListItem.tsx
@@ -5,7 +5,8 @@ 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, DataListControl } from '@patternfly/react-core';
+import { DataListItemRow } from '@patternfly/react-core/dist/esm/components/DataList/DataListItemRow';
+import { DataListControl } from '@patternfly/react-core/dist/esm/components/DataList/DataListControl';
 
 export interface DraggableDataListItemObject {
   id?: string;
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -1,24 +1,17 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
-import {
-  Page,
-  Nav,
-  NavList,
-  NavItem,
-  PageSection,
-  SkipToContent,
-  PageSidebar,
-  PageSidebarBody,
-  Avatar,
-  Brand,
-  Radio
-} from '@patternfly/react-core';
+import { Avatar } from '@patternfly/react-core/dist/esm/components/Avatar';
+import { Brand } from '@patternfly/react-core/dist/esm/components/Brand';
+import { Nav, NavList, NavItem } from '@patternfly/react-core/dist/esm/components/Nav';
+import { Page, PageSection, PageSidebar, PageSidebarBody } 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 {
   PageHeader,
   PageHeaderTools,
   PageHeaderToolsItem,
   PageHeaderToolsGroup
-} from '@patternfly/react-core/deprecated';
+} from '@patternfly/react-core/dist/esm/deprecated/components/PageHeader';
 import imgBrand from './assets/images/imgBrand.svg';
 import imgAvatar from './assets/images/imgAvatar.svg';
 import Demos from './Demos';
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
@@ -5,7 +5,8 @@ import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-
 import { css } from '@patternfly/react-styles';
 import { toCamel } from './utils';
 import { IVisibility } from './utils/decorators/classNames';
-import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core';
+import { handleArrows, setTabIndex } from '@patternfly/react-core/dist/esm/helpers/KeyboardHandler';
+import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
diff --git a/packages/react-table/src/deprecated/components/Table/Table.tsx b/packages/react-table/src/deprecated/components/Table/Table.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
+import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
diff --git a/packages/react-templates/src/components/Select/CheckboxSelect.tsx b/packages/react-templates/src/components/Select/CheckboxSelect.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
+import { Badge } from '@patternfly/react-core/dist/esm/components/Badge';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
-  Badge,
-  MenuToggle,
-  MenuToggleElement,
-  MenuToggleProps,
   Select,
   SelectList,
   SelectOption,
   SelectOptionProps,
   SelectProps
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/dist/esm/components/Select';
 
 export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
diff --git a/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx b/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
+import { Chip, ChipGroup } from '@patternfly/react-core/dist/esm/components/Chip';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
   Select,
-  SelectOption,
   SelectList,
+  SelectOption,
   SelectOptionProps,
-  MenuToggle,
-  MenuToggleElement,
+  SelectProps
+} from '@patternfly/react-core/dist/esm/components/Select';
+import {
   TextInputGroup,
   TextInputGroupMain,
-  TextInputGroupUtilities,
-  Button,
-  MenuToggleProps,
-  SelectProps,
-  ChipGroup,
-  Chip
-} from '@patternfly/react-core';
+  TextInputGroupUtilities
+} from '@patternfly/react-core/dist/esm/components/TextInputGroup';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface MultiTypeaheadSelectOption extends Omit<SelectOptionProps, 'content'> {
diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
   Select,
-  SelectOption,
   SelectList,
+  SelectOption,
   SelectOptionProps,
-  MenuToggle,
-  MenuToggleElement,
+  SelectProps
+} from '@patternfly/react-core/dist/esm/components/Select';
+import {
   TextInputGroup,
   TextInputGroupMain,
-  TextInputGroupUtilities,
-  Button,
-  MenuToggleProps,
-  SelectProps
-} from '@patternfly/react-core';
+  TextInputGroupUtilities
+} from '@patternfly/react-core/dist/esm/components/TextInputGroup';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content' | 'isSelected'> {
diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="generated-id"
+            for="pf-random-id-0"
             tabindex="-1"
           >
             <span
@@ -121,7 +121,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-1"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="generated-id"
+                    id="pf-random-id-0"
                     type="checkbox"
                   />
                 </span>
@@ -140,7 +140,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="generated-id"
+            for="pf-random-id-1"
             tabindex="-1"
           >
             <span
@@ -159,7 +159,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-2"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="generated-id"
+                    id="pf-random-id-1"
                     type="checkbox"
                   />
                 </span>
@@ -178,7 +178,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="generated-id"
+            for="pf-random-id-2"
             tabindex="-1"
           >
             <span
@@ -197,7 +197,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-3"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="generated-id"
+                    id="pf-random-id-2"
                     type="checkbox"
                   />
                 </span>
