@patternfly/react-core 4.237.11 → 4.239.0

package/src/next/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core/next';
+import { MenuToggle, Divider } from '@patternfly/react-core';
+
+export const DropdownWithGroups: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      innerRef={menuRef}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      onOpenChange={isOpen => setIsOpen(isOpen)}
+      toggle={toggleRef => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          Dropdown
+        </MenuToggle>
+      )}
+    >
+      <DropdownGroup>
+        <DropdownList>
+          <DropdownItem itemId={0} key="link">
+            Link
+          </DropdownItem>
+          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+            Action
+          </DropdownItem>
+        </DropdownList>
+      </DropdownGroup>
+      <Divider />
+      <DropdownGroup label="Group 2" labelHeadingLevel="h3">
+        <DropdownList>
+          <DropdownItem itemId={2} key="group2 link">
+            Group 2 link
+          </DropdownItem>
+          <DropdownItem itemId={3} key="group2 action" to="#default-link4">
+            group 2 action
+          </DropdownItem>
+        </DropdownList>
+      </DropdownGroup>
+      <Divider />
+      <DropdownGroup label="Group 3" labelHeadingLevel="h3">
+        <DropdownList>
+          <DropdownItem itemId={4} key="group3 link">
+            Group 3 link
+          </DropdownItem>
+          <DropdownItem itemId={5} key="group3 action">
+            Group 3 action
+          </DropdownItem>
+        </DropdownList>
+      </DropdownGroup>
+    </Dropdown>
+  );
+};

package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
+import { Divider, MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const DropdownWithKebab: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      innerRef={menuRef}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      minWidth="150px"
+      onOpenChange={isOpen => setIsOpen(isOpen)}
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          aria-label="kebab dropdown toggle"
+          variant="plain"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="link">
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+          Action
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled link">
+          Disabled link
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
+          Disabled action
+        </DropdownItem>
+        <Divider key="separator" />,
+        <DropdownItem itemId={4} key="separated link">
+          Separated link
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated action">
+          Separated action
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};

package/src/next/components/Dropdown/index.ts

@@ -0,0 +1,4 @@
+export * from './Dropdown';
+export * from './DropdownGroup';
+export * from './DropdownItem';
+export * from './DropdownList';

package/src/next/components/index.ts

@@ -1 +1,2 @@
 export * from './Wizard';
+export * from './Dropdown';