@patternfly/react-core 4.198.15 → 4.198.16

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.198.16 (2022-03-04)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.198.15 (2022-03-04)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -15953,78 +15953,6 @@ ul.pf-c-list {
   text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
 }
 
-.pf-c-radio {
-  --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
-  --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
-  --pf-c-radio__label--Color: var(--pf-global--Color--100);
-  --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
-  --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
-  --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
-  --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
-  --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-radio__description--Color: var(--pf-global--Color--200);
-  --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-c-radio--GridGap);
-  align-items: start;
-  justify-items: start;
-}
-
-.pf-c-radio.pf-m-standalone {
-  --pf-c-radio--GridGap: 0;
-  --pf-c-radio__input--Height: auto;
-  --pf-c-radio__input--MarginTop: 0;
-  display: inline-grid;
-  line-height: 1;
-}
-
-.pf-c-radio__label {
-  font-size: var(--pf-c-radio__label--FontSize);
-  font-weight: var(--pf-c-radio__label--FontWeight);
-  line-height: var(--pf-c-radio__label--LineHeight);
-  color: var(--pf-c-radio__label--Color);
-}
-
-.pf-c-radio__input {
-  height: var(--pf-c-radio__input--Height);
-  margin-top: var(--pf-c-radio__input--MarginTop);
-}
-
-.pf-c-radio__input:first-child {
-  margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
-}
-
-.pf-c-radio__input:last-child {
-  margin-right: var(--pf-c-radio__input--last-child--MarginRight);
-}
-
-.pf-c-radio__description {
-  grid-column: 2;
-  font-size: var(--pf-c-radio__description--FontSize);
-  color: var(--pf-c-radio__description--Color);
-}
-
-.pf-c-radio__body {
-  grid-column: 2;
-  margin-top: var(--pf-c-radio__body--MarginTop);
-}
-
-label.pf-c-radio, .pf-c-radio__label,
-.pf-c-radio__input {
-  cursor: pointer;
-}
-
-.pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
-.pf-c-radio__input:disabled,
-.pf-c-radio__input.pf-m-disabled {
-  --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
-  cursor: not-allowed;
-}
-
 .pf-c-search-input {
   --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -16216,6 +16144,78 @@ label.pf-c-radio, .pf-c-radio__label,
   flex-grow: 1;
 }
 
+.pf-c-radio {
+  --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
+  --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-radio__label--Color: var(--pf-global--Color--100);
+  --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
+  --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
+  --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
+  --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
+  --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-radio__description--Color: var(--pf-global--Color--200);
+  --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: var(--pf-c-radio--GridGap);
+  align-items: start;
+  justify-items: start;
+}
+
+.pf-c-radio.pf-m-standalone {
+  --pf-c-radio--GridGap: 0;
+  --pf-c-radio__input--Height: auto;
+  --pf-c-radio__input--MarginTop: 0;
+  display: inline-grid;
+  line-height: 1;
+}
+
+.pf-c-radio__label {
+  font-size: var(--pf-c-radio__label--FontSize);
+  font-weight: var(--pf-c-radio__label--FontWeight);
+  line-height: var(--pf-c-radio__label--LineHeight);
+  color: var(--pf-c-radio__label--Color);
+}
+
+.pf-c-radio__input {
+  height: var(--pf-c-radio__input--Height);
+  margin-top: var(--pf-c-radio__input--MarginTop);
+}
+
+.pf-c-radio__input:first-child {
+  margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
+}
+
+.pf-c-radio__input:last-child {
+  margin-right: var(--pf-c-radio__input--last-child--MarginRight);
+}
+
+.pf-c-radio__description {
+  grid-column: 2;
+  font-size: var(--pf-c-radio__description--FontSize);
+  color: var(--pf-c-radio__description--Color);
+}
+
+.pf-c-radio__body {
+  grid-column: 2;
+  margin-top: var(--pf-c-radio__body--MarginTop);
+}
+
+label.pf-c-radio, .pf-c-radio__label,
+.pf-c-radio__input {
+  cursor: pointer;
+}
+
+.pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
+.pf-c-radio__input:disabled,
+.pf-c-radio__input.pf-m-disabled {
+  --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
+  cursor: not-allowed;
+}
+
 .pf-c-select {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.15",
+  "version": "4.198.16",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.49.15",
-    "@patternfly/react-styles": "^4.48.15",
-    "@patternfly/react-tokens": "^4.50.15",
+    "@patternfly/react-icons": "^4.49.16",
+    "@patternfly/react-styles": "^4.48.16",
+    "@patternfly/react-tokens": "^4.50.16",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "16259ba437f75ad2818da8ff55a1994340971e26"
+  "gitHead": "752c9d1a3638f356f2e68f670e79356f03ebea8e"
 }

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -28,31 +28,26 @@ Composable menus currently require consumer keyboard handling and use of our und
 ### Composable simple dropdown
 
 ```ts file="./examples/ComposableSimpleDropdown.tsx"
-
 ```
 
 ### Composable actions menu
 
 ```ts file="./examples/ComposableActionsMenu.tsx"
-
 ```
 
 ### Composable simple select
 
 ```ts file="./examples/ComposableSimpleSelect.tsx"
-
 ```
 
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
-
 ```
 
 ### Composable tree view menu
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
-
 ```
 
 ### Composable flyout
@@ -60,29 +55,29 @@ Composable menus currently require consumer keyboard handling and use of our und
 The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
 
 ```ts isBeta file="./examples/ComposableFlyout.tsx"
-
 ```
 
 ### Composable application launcher
 
 ```ts file="./examples/ComposableApplicationLauncher.tsx"
-
 ```
 
 ### Composable context selector
 
 ```ts file="./examples/ComposableContextSelector.tsx"
-
 ```
 
 ### Composable options menu variants
 
 ```ts file="./examples/ComposableOptionsMenuVariants.tsx"
-
 ```
 
 ### Composable dropdown variants
 
 ```ts file="./examples/ComposableDropdwnVariants.tsx"
+```
+
+### Composable date select
 
+```ts file="./examples/ComposableDateSelect.tsx"
 ```

package/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+
+export const ComposableSimpleDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+  const [selected, setSelected] = React.useState<number>(0);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsOpen(!isOpen);
+        toggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const monthStrings = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+
+  const date = new Date();
+
+  const toggleText = {
+    0: 'Today ',
+    1: 'Yesterday ',
+    2: 'Last 7 days ',
+    3: 'Last 14 days '
+  };
+
+  const dateText = {
+    0: <small className="pf-u-color-200">({dateString(date)})</small>,
+    1: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
+      </small>
+    ),
+    2: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
+      </small>
+    ),
+    3: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
+      </small>
+    )
+  };
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+      {dateText[selected]}
+    </MenuToggle>
+  );
+  const menu = (
+    // eslint-disable-next-line no-console
+    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Today</MenuItem>
+          <MenuItem itemId={1}>Yesterday</MenuItem>
+          <MenuItem itemId={2}>Last 7 days</MenuItem>
+          <MenuItem itemId={3}>Last 14 days</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+};