@patternfly/react-core 6.0.0-prerelease.2 → 6.0.0-prerelease.20

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":"6.0.0-prerelease.1","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":"6.0.0-prerelease.19","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":"6.0.0-prerelease.1","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":"6.0.0-prerelease.19","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":"6.0.0-prerelease.1","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":"6.0.0-prerelease.19","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.2",
+  "version": "6.0.0-prerelease.20",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-prerelease.1",
-    "@patternfly/react-styles": "^6.0.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.1",
-    "focus-trap": "7.5.4",
+    "@patternfly/react-icons": "^6.0.0-prerelease.6",
+    "@patternfly/react-styles": "^6.0.0-prerelease.5",
+    "@patternfly/react-tokens": "^6.0.0-prerelease.6",
+    "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.6.2"
+    "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.226",
+    "@patternfly/patternfly": "6.0.0-prerelease.13",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5e93011e6e0cb02edad1e3ec517da35523b97110"
+  "gitHead": "5decd6a8bf9632288abdbc98d3cac1902303c04e"
 }

package/src/components/AboutModal/examples/AboutModal.md

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-v5-c-about-modal-box
+cssPrefix: pf-v6-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from '../../assets/PF-IconLogo.svg';

package/src/components/Accordion/examples/Accordion.md

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-v5-c-accordion
+cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
@@ -32,4 +32,4 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 ### Toggle icon at start
 
 ```ts file="./AccordionToggleIconAtStart.tsx"
-```
+```

package/src/components/ActionList/examples/ActionList.md

@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-v5-c-action-list
+cssPrefix: pf-v6-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 

package/src/components/Alert/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: ['pf-v5-c-alert', 'pf-v5-c-alert-group']
+cssPrefix: ['pf-v6-c-alert', 'pf-v6-c-alert-group']
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---

package/src/components/Avatar/examples/Avatar.md

@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-v5-c-avatar
+cssPrefix: pf-v6-c-avatar
 propComponents: ['Avatar']
 ---
 

package/src/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-v5-c-back-to-top
+cssPrefix: pf-v6-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

package/src/components/Backdrop/examples/Backdrop.md

@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-v5-c-backdrop
+cssPrefix: pf-v6-c-backdrop
 propComponents: ['Backdrop']
 ---
 

package/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-v5-c-background-image
+cssPrefix: pf-v6-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

package/src/components/Badge/examples/Badge.md

@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-v5-c-badge
+cssPrefix: pf-v6-c-badge
 propComponents: ['Badge']
 ---
 

package/src/components/Banner/examples/Banner.md

@@ -1,7 +1,7 @@
 ---
 id: Banner
 section: components
-cssPrefix: pf-v5-c-banner
+cssPrefix: pf-v6-c-banner
 propComponents: ['Banner']
 ---
 

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-v5-c-breadcrumb
+cssPrefix: pf-v6-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

package/src/components/Button/examples/Button.md

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-v5-c-button
+cssPrefix: pf-v6-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-calendar-month
+cssPrefix: pf-v6-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

package/src/components/Card/CardHeader.tsx

@@ -54,6 +54,8 @@ export interface CardHeaderSelectableActionsObject {
    * the isSelected prop on the card component instead.
    */
   isChecked?: boolean;
+  /** Flag indicating the action is hidden */
+  isHidden?: boolean;
 }
 
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -133,7 +135,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
         const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
         const getSelectableProps = () => ({
-          className: 'pf-m-standalone',
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -150,7 +153,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         const getClickableProps = () => {
           const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
           const baseProps = {
-            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
             id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,

package/src/components/Card/examples/Card.md

@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-v5-c-card
+cssPrefix: pf-v6-c-card
 propComponents:
   [
     'Card',
@@ -19,6 +19,7 @@ ouia: true
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ## Examples
 
@@ -178,3 +179,25 @@ Dividers can be placed between sections of the card.
 ```ts file='./CardWithDividers.tsx'
 
 ```
+
+## Cards as tiles
+
+Sets of selectable cards can be used as tiles, which are static options that users can select.
+
+They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object.
+
+### Single selectable tiles
+
+To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTile.tsx'
+
+```
+
+### Multi selectable tiles
+
+To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTileMulti.tsx'
+
+```

package/src/components/Card/examples/CardTile.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTile: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
+  const id1 = 'tile-1';
+  const id2 = 'tile-2';
+  const id3 = 'tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="tile-example-1" isSelectable isSelected={isChecked === id1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'tile-example-1',
+            name: id1,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-2" isSelectable isSelected={isChecked === id2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'tile-example-2',
+            name: id2,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'tile-example-3',
+            name: id3,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

package/src/components/Card/examples/CardTileMulti.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTileMulti: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
+  const id1 = 'multi-tile-1';
+  const id2 = 'multi-tile-2';
+  const id3 = 'multi-tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
+
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="multi-tile-example-1" isSelectable isSelected={isChecked1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'multi-tile-example-1',
+            name: id1,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-2" isSelectable isSelected={isChecked2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'multi-tile-example-2',
+            name: id2,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-3" isSelectable isDisabled isSelected={isChecked3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'multi-tile-example-3',
+            name: id3,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

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

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-check
+cssPrefix: pf-v6-c-check
 propComponents: ['Checkbox']
 ---
 

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-v5-c-copyclipboard
+cssPrefix: pf-v6-c-clipboard-copy
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-v5-c-code-block
+cssPrefix: pf-v6-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/Content/Content.tsx

@@ -53,6 +53,8 @@ export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlainList?: boolean;
   /** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */
   isVisitedLink?: boolean;
+  /** Flag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.  */
+  isEditorial?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id. */
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -89,6 +91,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
   isVisitedLink = false,
   ouiaId,
   ouiaSafe = true,
+  isEditorial = false,
   ...props
 }: ContentProps) => {
   const wrappingComponent = component ?? 'div';
@@ -106,6 +109,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
         componentStyles[wrappingComponent],
         isList && isPlainList && styles.modifiers.plain,
         isVisitedLink && styles.modifiers.visited,
+        isEditorial && styles.modifiers.editorial,
         className
       )}
     >

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

@@ -264,6 +264,30 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
+test(`Renders without class name ${styles.modifiers.editorial} by default`, () => {
+  render(<Content>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true`, () => {
+  render(<Content isEditorial>Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true and component is specified`, () => {
+  render(
+    <Content component="h1" isEditorial>
+      Test
+    </Content>
+  );
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders without class name ${styles.modifiers.editorial} when isEditorial = false`, () => {
+  render(<Content isEditorial={false}>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Content ouiaId="ouia-id">Test</Content>);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Content/examples/Content.md

@@ -62,3 +62,11 @@ HTML elements wrapped by `<Content>` are styled by the content component.
 ```ts file="./ContentVisited.tsx"
 
 ```
+
+### Editorial content
+
+Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use `isEditorial`.
+
+```ts file="./ContentEditorial.tsx"
+
+```

package/src/components/Content/examples/ContentEditorial.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+export const ContentEditorial: React.FunctionComponent = () => (
+  <>
+    <Content component={ContentVariants.h1} isEditorial>
+      Example of editorial content via components
+    </Content>
+    <Content component={ContentVariants.p} isEditorial>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+      erat vel, interdum mattis neque. Sub works as well!
+    </Content>
+    <br />
+    <Content isEditorial>
+      <h1>Example of editorial content via wrapper</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+        erat vel, interdum mattis neque. Sub works as well!
+      </p>
+    </Content>
+  </>
+);

package/src/components/DataList/DataListAction.tsx

@@ -23,8 +23,6 @@ export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button */
-  isPlainButtonAction?: boolean;
 }
 
 export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
@@ -35,12 +33,10 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-
-  isPlainButtonAction,
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
-    {isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
+    {children}
   </div>
 );
 DataListAction.displayName = 'DataListAction';

package/src/components/DataList/DataListCheck.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+import { Checkbox, CheckboxProps } from '../Checkbox';
 
-export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'checked'> {
+export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
+  /** Id of the DataList checkbox. */
+  id?: string;
   /** Additional classes added to the DataList item checkbox */
   className?: string;
   /** Flag to show if the DataList checkbox selection is valid or invalid */
@@ -32,27 +35,31 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
 }
 
 export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
-  className = '',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {},
+  id,
+  className,
+  onChange,
   isValid = true,
   isDisabled = false,
-  isChecked = false,
-  checked = false,
+  isChecked,
+  checked,
   defaultChecked,
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
+  const uniqueId = React.useId();
+
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <input
-        {...props}
-        type="checkbox"
-        onChange={(event) => onChange(event, event.currentTarget.checked)}
+      <Checkbox
+        id={id ?? `datalist-check-${uniqueId}`}
+        isChecked={isChecked}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
         aria-invalid={!isValid}
-        disabled={isDisabled}
-        {...([true, false].includes(defaultChecked) && { defaultChecked })}
-        {...(![true, false].includes(defaultChecked) && { checked: isChecked || checked })}
+        isDisabled={isDisabled}
+        isLabelWrapped
+        {...props}
       />
     </div>
   );