@patternfly/react-core 5.1.1-prerelease.12 → 5.1.1-prerelease.13

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.12",
+  "version": "5.1.1-prerelease.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f856af105070fec983e76afa262b37aa99737e63"
+  "gitHead": "ff467eef5db530f0245ba29ca01db1f4a239f274"
 }

package/src/components/Checkbox/examples/Checkbox.md

@@ -6,46 +6,52 @@ cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 
-import './checkbox.css';
-
 ## Examples
 
 ### Controlled
 
 ```ts file='./CheckboxControlled.tsx'
+
 ```
 
 ### Uncontrolled
 
 ```ts file='./CheckboxUncontrolled.tsx'
+
 ```
 
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
+
 ```
 
 ### Checkbox with description
 
 ```ts file='./CheckboxWithDescription.tsx'
+
 ```
 
 ### Checkbox with body
 
 ```ts file='./CheckboxWithBody.tsx'
+
 ```
 
 ### Checkbox with description and body
 
 ```ts file='./CheckboxWithDescriptionBody.tsx'
+
 ```
 
 ### Standalone input
 
 ```ts file='./CheckboxStandaloneInput.tsx'
+
 ```
 
 ### Required input
 
 ```ts file='./CheckboxRequired.tsx'
+
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -49,22 +49,24 @@ export const CheckboxControlled: React.FunctionComponent = () => {
         onChange={handleChange}
         id="controlled-check-1"
         name="check1"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 1"
-        isChecked={isChecked2}
-        onChange={handleChange}
-        id="controlled-check-2"
-        name="check2"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 2"
-        isChecked={isChecked3}
-        onChange={handleChange}
-        id="controlled-check-3"
-        name="check3"
+        body={
+          <>
+            <Checkbox
+              label="Child CheckBox 1"
+              isChecked={isChecked2}
+              onChange={handleChange}
+              id="controlled-check-2"
+              name="check2"
+            />
+            <Checkbox
+              label="Child CheckBox 2"
+              isChecked={isChecked3}
+              onChange={handleChange}
+              id="controlled-check-3"
+              name="check3"
+            />
+          </>
+        }
       />
       <Checkbox
         label="Controlled CheckBox"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -242,6 +242,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
+                    {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton
                     exitDelay={exitDelay}

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -36,7 +36,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
         contentEditable={!isReadOnly}
         {...props}
       >
-        {isCode ? <pre>{children}</pre> : children}
+        {isCode ? <pre dir="ltr">{children}</pre> : children}
       </div>
     );
   }

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
@@ -31,7 +32,9 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-expanded={isExpanded}
     {...props}
   >
-    {isExpanded ? <AngleDownIcon aria-hidden="true" /> : <AngleRightIcon aria-hidden="true" />}
+    <div className={css(styles.clipboardCopyToggleIcon)}>
+      <AngleRightIcon aria-hidden="true" />
+    </div>
   </Button>
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`expanded code content render 1`] = `
     contenteditable="true"
     id="id-1"
   >
-    <pre>
+    <pre
+      dir="ltr"
+    >
       {
     "name": "@patternfly/react-core",
     "version": "1.33.2"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,19 +15,23 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     id="my-id"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 256 512"
-      width="1em"
+    <div
+      class="pf-v5-c-clipboard-copy__toggle-icon"
     >
-      <path
-        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </div>
   </button>
 </DocumentFragment>
 `;

package/src/components/TextInput/TextInput.tsx

@@ -67,8 +67,10 @@ export interface TextInputProps
   'aria-label'?: string;
   /** @hide A reference object to attach to the text input box. */
   innerRef?: React.RefObject<any>;
-  /** Trim text on left */
+  /** @deprecated Use isStartTruncated instead. Trim text at start */
   isLeftTruncated?: boolean;
+  /** Trim text at start */
+  isStartTruncated?: boolean;
   /** Callback function when text input is focused */
   onFocus?: (event?: any) => void;
   /** Callback function when text input is blurred (focus leaves) */
@@ -96,6 +98,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     isExpanded: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
+    isStartTruncated: false,
     onChange: (): any => undefined,
     ouiaSafe: true
   };
@@ -120,7 +123,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   };
 
   componentDidMount() {
-    if (this.props.isLeftTruncated) {
+    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
       const inputRef = this.props.innerRef || this.inputRef;
       this.observer = getResizeObserver(inputRef.current, this.handleResize, true);
       this.handleResize();
@@ -128,7 +131,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   }
 
   componentWillUnmount() {
-    if (this.props.isLeftTruncated) {
+    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
       this.observer();
     }
   }
@@ -149,16 +152,16 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   };
 
   onFocus = (event?: any) => {
-    const { isLeftTruncated, onFocus } = this.props;
-    if (isLeftTruncated) {
+    const { isLeftTruncated, isStartTruncated, onFocus } = this.props;
+    if (isLeftTruncated || isStartTruncated) {
       this.restoreText();
     }
     onFocus && onFocus(event);
   };
 
   onBlur = (event?: any) => {
-    const { isLeftTruncated, onBlur } = this.props;
-    if (isLeftTruncated) {
+    const { isLeftTruncated, isStartTruncated, onBlur } = this.props;
+    if (isLeftTruncated || isStartTruncated) {
       this.handleResize();
     }
     onBlur && onBlur(event);
@@ -177,6 +180,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       onFocus,
       onBlur,
       isLeftTruncated,
+      isStartTruncated,
       isExpanded,
       readOnly,
       readOnlyVariant,

package/src/components/TextInput/__tests__/TextInput.test.tsx

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
+import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
 
 const props = {
   onChange: jest.fn(),
@@ -32,7 +33,7 @@ describe('TextInput', () => {
   });
 
   test('read only text input using isReadOnly', () => {
-    const { asFragment } = render(<TextInput isReadOnly value="read only" aria-label="read only text input" />);
+    const { asFragment } = render(<TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -109,4 +110,18 @@ describe('TextInput', () => {
 
     expect(myMock).not.toHaveBeenCalled();
   });
+
+  test('trimLeft is called when isStartTruncated is true', async () => {
+    const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
+  
+    render(<TextInput isStartTruncated aria-label="start truncated text input" />);
+    expect(trimLeftFn).toHaveBeenCalled();
+  });
+
+  test('trimLeft is called when isLeftTruncated is true', async () => {
+    const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
+  
+    render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
+    expect(trimLeftFn).toHaveBeenCalled();
+  });
 });

package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -99,7 +99,7 @@ exports[`TextInput plain read only text input 1`] = `
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-form-control"
+    class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
       aria-invalid="false"
@@ -107,6 +107,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
       data-ouia-component-id="OUIA-Generated-TextInputBase-4"
       data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
+      readonly=""
       type="text"
       value="read only"
     />

package/src/components/TextInput/examples/TextInput.md

@@ -23,9 +23,9 @@ import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
 ```
 
-### Truncated on Left
+### Truncated at start
 
-```ts file="./TextInputLeftTruncated.tsx"
+```ts file="./TextInputStartTruncated.tsx"
 
 ```
 

package/src/components/TextInput/examples/{TextInputLeftTruncated.tsx → TextInputStartTruncated.tsx}

@@ -1,17 +1,17 @@
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
 
-export const LeftTruncatedTextInput: React.FunctionComponent = () => {
+export const StartTruncatedTextInput: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
   );
   return (
     <TextInput
-      isLeftTruncated
+      isStartTruncated
       value={value}
       type="text"
       onChange={(_event, value) => setValue(value)}
-      aria-label="left-truncated text input example"
+      aria-label="start-truncated text input example"
     />
   );
 };

package/src/demos/DataListDemo.md

@@ -35,7 +35,8 @@ import {
   ToolbarExpandIconWrapper,
   ToolbarContent,
   SearchInput,
-  Tooltip
+  Tooltip,
+  Icon
 } 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';
@@ -123,9 +124,11 @@ class ExpandableDataList extends React.Component {
                     variant="plain"
                     aria-label={this.state.allExpanded ? 'Collapse all rows' : 'Expand all rows'}
                   >
-                    <ToolbarExpandIconWrapper>
-                      <AngleRightIcon />
-                    </ToolbarExpandIconWrapper>
+                    <Icon shouldMirrorRTL>
+                      <ToolbarExpandIconWrapper>
+                        <AngleRightIcon />
+                      </ToolbarExpandIconWrapper>
+                    </Icon>
                   </Button>
                 </Tooltip>
               </ToolbarItem>

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +0,0 @@
-.ws-react-c-checkbox .pf-v5-c-check.nested {
-  padding-left: var(--pf-v5-global--spacer--md);
-}