@patternfly/react-core 4.272.0 → 4.273.0

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderContinuous: React.FunctionComponent = () => {
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
+  const [value, setValue] = React.useState(50);
+  const [valueCustom, setValueCustom] = React.useState(50);
+
+  return (
+    <>
+      <Checkbox
+        id="thumb-has-tooltip"
+        label="hasTooltipOverThumb"
+        isChecked={hasTooltipOverThumb}
+        onChange={setHasTooltipOverThumb}
+        style={{ marginBottom: 20 }}
+      />
+      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Slider
+        onChange={setValueCustom}
+        value={valueCustom}
+        areCustomStepsContinuous
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        customSteps={[
+          { value: 0, label: '0%' },
+          { value: 100, label: '100%' }
+        ]}
+      />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderDisabled.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    const step = steps.find(step => step.value === value);
+    return step ? step.label : 0;
+  };
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
+      <Slider isDisabled value={value} onChange={setValue} customSteps={steps} />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderDiscrete.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDiscrete: React.FunctionComponent = () => {
+  const initialValues = {
+    value1: 50,
+    value2: 50,
+    value3: 25,
+    value4: 50,
+    value5: 50,
+    value6: 3,
+    value7: 25
+  };
+
+  const [numValue, setNumValue] = React.useState(initialValues);
+
+  const handleChange = (value: number, name: string) => {
+    setNumValue({ ...numValue, [name]: value });
+  };
+
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const stepsDiscreteWithMax = [
+    { value: 0, label: 'A' },
+    { value: 1, label: 'B' },
+    { value: 2, label: 'C' },
+    { value: 3, label: 'D' },
+    { value: 4, label: 'E' },
+    { value: 5, label: 'F' }
+  ];
+
+  const stepsDiscreteNoLinearWithMaxMin = [
+    { value: 12, label: '12' },
+    { value: 15, label: '15' },
+    { value: 25, label: '25' },
+    { value: 54, label: '54' },
+    { value: 67, label: '67' },
+    { value: 86, label: '86' }
+  ];
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
+      <Slider
+        value={initialValues.value1}
+        onChange={(value: number) => handleChange(value, 'value1')}
+        customSteps={steps}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>
+      <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+      <Slider
+        value={initialValues.value2}
+        onChange={(value: number) => handleChange(value, 'value2')}
+        max={200}
+        step={50}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+      <Slider
+        value={initialValues.value3}
+        onChange={(value: number) => handleChange(value, 'value3')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+        showBoundaries={false}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+      <Slider
+        value={initialValues.value4}
+        onChange={(value: number) => handleChange(value, 'value4')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
+      <Slider
+        value={initialValues.value5}
+        onChange={(value: number) => handleChange(value, 'value5')}
+        min={-25}
+        max={75}
+        step={10}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>
+      <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+      <Slider
+        value={initialValues.value6}
+        showTicks
+        max={5}
+        customSteps={stepsDiscreteWithMax}
+        onChange={(value: number) => handleChange(value, 'value6')}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
+      <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+      <Slider
+        value={initialValues.value7}
+        showTicks
+        customSteps={stepsDiscreteNoLinearWithMaxMin}
+        onChange={(value: number) => handleChange(value, 'value7')}
+        min={12}
+        max={86}
+      />
+      <br />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderThumbValueInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderThumbValueInput: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const [inputValue, setInputValue] = React.useState(50);
+
+  const onChange = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Number(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setValue(newValue);
+    setInputValue(newValue);
+  };
+
+  return (
+    <Slider
+      value={value}
+      isInputVisible
+      inputValue={inputValue}
+      inputLabel="%"
+      inputPosition="aboveThumb"
+      onChange={onChange}
+    />
+  );
+};

package/src/components/Slider/examples/SliderValueInput.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderValueInput: React.FunctionComponent = () => {
+  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
+  const [valuePercent, setValuePercent] = React.useState(50);
+  const [inputValuePercent, setInputValuePercent] = React.useState(50);
+  const [valueContinuous, setValueContinuous] = React.useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+
+  const stepsDiscrete = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+  const stepsPercent = [
+    { value: 0, label: '0%' },
+    { value: 25, label: '25%', isLabelHidden: true },
+    { value: 50, label: '50%' },
+    { value: 75, label: '75%', isLabelHidden: true },
+    { value: 100, label: '100%' }
+  ];
+
+  const onChangeDiscrete = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsDiscrete.find(step => step.value === value);
+      newInputValue = step ? step.label : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label);
+      if (inputValue > maxValue) {
+        newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsDiscrete[0].label);
+        if (inputValue < minValue) {
+          newValue = Number(stepsDiscrete[0].value);
+          newInputValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
+            newValue = stepsDiscrete[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2;
+            if (midpoint > inputValue) {
+              newValue = stepsDiscrete[stepIndex - 1].value;
+              newInputValue = Number(stepsDiscrete[stepIndex - 1].label);
+            } else {
+              newValue = stepsDiscrete[stepIndex].value;
+              newInputValue = Number(stepsDiscrete[stepIndex].label);
+            }
+          }
+        }
+      }
+    }
+
+    setInputValueDiscrete(newInputValue);
+    setValueDiscrete(newValue);
+  };
+
+  const onChangePercent = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsPercent.find(step => step.value === value);
+      newInputValue = step ? step.label.slice(0, -1) : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsPercent[stepsPercent.length - 1].label.slice(0, -1));
+      if (inputValue > maxValue) {
+        newValue = Number(stepsPercent[stepsPercent.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsPercent[0].label.slice(0, -1));
+        if (inputValue < minValue) {
+          newValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
+          if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
+            newValue = stepsPercent[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint =
+              (Number(stepsPercent[stepIndex].label.slice(0, -1)) +
+                Number(stepsPercent[stepIndex - 1].label.slice(0, -1))) /
+              2;
+            if (midpoint > inputValue) {
+              newValue = stepsPercent[stepIndex - 1].value;
+              newInputValue = Number(stepsPercent[stepIndex - 1].label.slice(0, -1));
+            } else {
+              newValue = stepsPercent[stepIndex].value;
+              newInputValue = Number(stepsPercent[stepIndex].label.slice(0, -1));
+            }
+          }
+        }
+      }
+    }
+
+    setInputValuePercent(newInputValue);
+    setValuePercent(newValue);
+  };
+
+  const onChangeContinuous = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Math.floor(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setInputValueContinuous(newValue);
+    setValueContinuous(newValue);
+  };
+
+  return (
+    <>
+      <Slider
+        value={valueDiscrete}
+        isInputVisible
+        inputValue={inputValueDiscrete}
+        customSteps={stepsDiscrete}
+        onChange={onChangeDiscrete}
+      />
+      <br />
+      <Slider
+        value={valuePercent}
+        isInputVisible
+        inputValue={inputValuePercent}
+        inputLabel="%"
+        onChange={onChangePercent}
+        customSteps={stepsPercent}
+      />
+      <br />
+      <Slider
+        value={valueContinuous}
+        isInputVisible
+        inputValue={inputValueContinuous}
+        inputLabel="%"
+        onChange={onChangeContinuous}
+      />
+    </>
+  );
+};

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -83,7 +83,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Component toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -88,7 +88,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Consumer toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -110,7 +110,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="With filters example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

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

@@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>

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

@@ -164,7 +164,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
             value={searchInputValue}
             type="search"
             placeholder="Search"
-            onChange={onSearchInputChange}
+            onChange={(_event, value) => onSearchInputChange(value)}
             onKeyPress={onEnterPressed}
             aria-labelledby="pf-context-selector-search-button-id-1"
           />

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -263,7 +263,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -246,7 +246,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

package/src/demos/SearchInput/SearchInput.md

@@ -305,7 +305,7 @@ AdvancedComposableSearchInput = () => {
   
   
   // This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.
-  const onSubmit = (value, event) => {
+  const onSubmit = (event, value) => {
     event.preventDefault();
     
     if (isValidDate(new Date(date)) && dateWithin) {
@@ -364,7 +364,7 @@ AdvancedComposableSearchInput = () => {
   const searchInput = (
     <SearchInput
       value={value}
-      onChange={onChange}
+      onChange={(_event, value) => onChange(value)}
       onToggleAdvancedSearch={(e, isOpen) => {
         e.stopPropagation();
         setIsAdvancedSearchOpen(isOpen)

package/src/demos/Toolbar.md

@@ -207,7 +207,7 @@ class ConsoleLogViewerToolbar extends React.Component {
       window.alert('Clear Logs!');
     };
 
-    this.onSearchChange = (value, event) => {
+    this.onSearchChange = (event, value) => {
       this.setState({
         searchValue: value,
         searchResultsCount: 3