Merge pull request #805 from securityscorecard/next

🚀 Next release (July 20th)
securityscorecard · Jul 20, 2023 · 5471b92 · 5471b92
2 parents 9b7234e + bb0590b
commit 5471b92
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 22 deletions.
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
+import { includes } from 'ramda';
 
 import { Inline, Stack } from '../layout';
 import { HexGrade } from '../HexGrade';
@@ -72,7 +73,7 @@ CustomTitleElement.args = {
 };
 
 export const AcordionWithExternalManagement: Story<AccordionProps> = () => {
-  const [openItems, setOpenItems] = useState<string[]>([]);
+  const [openItems, setOpenItems] = useState<(string | number)[]>([]);
   const handleOnClick = (id: string) => {
     if (!openItems.includes(id)) {
       const newItems = [id];
@@ -91,16 +92,23 @@ export const AcordionWithExternalManagement: Story<AccordionProps> = () => {
     <Inline gap="xl">
       <Stack gap="sm" justify="flex-start">
         <Button variant="text" onClick={() => handleOnClick('first')}>
-          First section
+          {includes('first', openItems) && '->'} First section
         </Button>
         <Button variant="text" onClick={() => handleOnClick('second')}>
-          Second section
+          {includes('second', openItems) && '->'} Second section
         </Button>
         <Button variant="text" onClick={() => handleOnClick('third')}>
-          Third section
+          {includes('third', openItems) && '->'} Third section
         </Button>
       </Stack>
-      <Accordion items={localItems} openItems={openItems} />
+      <Accordion
+        isCollapsedOnOpen={false}
+        items={localItems}
+        openItems={openItems}
+        onChange={(ids) => {
+          setOpenItems(ids);
+        }}
+      />
     </Inline>
   );
 };

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -30,29 +30,37 @@ function filterState(
   if (isCollapsedOnOpen) {
     return [item];
   }
+
   return [...state, item];
 }
 
 const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   (
-    { isCollapsedOnOpen = true, items, openItems, className, ...props },
+    {
+      isCollapsedOnOpen = true,
+      items,
+      openItems,
+      className,
+      onChange,
+      ...props
+    },
     ref,
   ) => {
     const [openIds, setOpenIds] = useState(pickOpen(items));
 
-    useEffect(
-      () =>
-        openItems?.forEach((item: AccordionItemId) =>
-          setOpenIds((state) => filterState(state, item, isCollapsedOnOpen)),
-        ),
-      [openItems, isCollapsedOnOpen],
-    );
+    useEffect(() => {
+      if (openItems !== undefined) {
+        setOpenIds(isCollapsedOnOpen ? [openItems[0]] : openItems);
+      }
+    }, [openItems, isCollapsedOnOpen]);
 
     const handleClick = useCallback(
       (id: AccordionItemId) => {
-        setOpenIds((state) => filterState(state, id, isCollapsedOnOpen));
+        const nextState = filterState(openIds, id, isCollapsedOnOpen);
+        setOpenIds(nextState);
+        onChange?.(nextState);
       },
-      [setOpenIds, isCollapsedOnOpen],
+      [openIds, setOpenIds, onChange, isCollapsedOnOpen],
     );
 
     return (
@@ -78,6 +86,7 @@ Accordion.propTypes = {
   isCollapsedOnOpen: PropTypes.bool,
   className: PropTypes.string,
   openItems: PropTypes.arrayOf(AccordionItemIdPropType),
+  onChange: PropTypes.func,
 };
 
 export default Accordion;
diff --git a/src/components/Accordion/Accordion.types.ts b/src/components/Accordion/Accordion.types.ts
@@ -22,7 +22,8 @@ export interface AccordionProps {
   isCollapsedOnOpen?: boolean;
   items: AccordionItem[];
   className?: string;
-  openItems: AccordionItemId[];
+  openItems?: AccordionItemId[];
+  onChange?: (openIds: AccordionItemId[]) => void;
 }
 
 export const AccordionItemIdPropType = PropTypes.oneOfType([

diff --git a/src/components/Datatable/Datatable.tsx b/src/components/Datatable/Datatable.tsx
@@ -197,6 +197,7 @@ Datatable.propTypes = {
   controlsConfig: PropTypes.exact({
     onControlToggle: PropTypes.func,
     onCancelLoading: PropTypes.func,
+    onColumnVisibilityChange: PropTypes.func,
     hasSearch: PropTypes.bool,
     searchConfig: PropTypes.exact({
       placeholder: PropTypes.string,

diff --git a/src/components/Datatable/mocks/controls.ts b/src/components/Datatable/mocks/controls.ts
@@ -15,4 +15,5 @@ export const controlsConfig = {
     onSearch: action('onSearch'),
     onClear: action('onClear'),
   },
+  onColumnVisibilityChange: action('columnVisibilityChange'),
 };
diff --git a/src/components/forms/MultiValueInput/MultiValueInput.stories.tsx b/src/components/forms/MultiValueInput/MultiValueInput.stories.tsx
@@ -26,6 +26,15 @@ Playground.args = {
   onValueRemove: action('OnValueRemove'),
   onValuesChange: action('OnValuesChange'),
   onInputChange: action('OnInputChange'),
+  onPaste: (e) => {
+    const pastedValue = (e.clipboardData || window.clipboardData).getData(
+      'text',
+    );
+    return pastedValue
+      .split(';')
+      .filter((i) => i !== '3')
+      .join(';');
+  },
 };
 
 export const Filled = MultiValueInputTemplate.bind({});

diff --git a/src/components/forms/MultiValueInput/MultiValueInput.tsx b/src/components/forms/MultiValueInput/MultiValueInput.tsx
@@ -142,6 +142,7 @@ const MultiValueInput: React.FC<MultiValueInputProps> = ({
   onValueRemove = noop,
   onValuesChange = noop,
   onInputChange = noop,
+  onPaste = noop,
   placeholder,
   pattern,
   id,
@@ -174,10 +175,9 @@ const MultiValueInput: React.FC<MultiValueInputProps> = ({
         split(';'),
         map(trim),
         filter(isNonEmptyString),
-        uniq,
       )(newValue);
       const newValues = [...values, ...parsedValues];
-      setValues(newValues);
+      setValues(uniq(newValues));
       onValueAdd(parsedValues, newValues);
       onValuesChange(newValues);
     } else {
@@ -233,10 +233,13 @@ const MultiValueInput: React.FC<MultiValueInputProps> = ({
     e,
   ) => {
     e.preventDefault();
-    const pastedValue = (e.clipboardData || window.clipboardData).getData(
-      'text',
-    );
-    addValue(pastedValue);
+    const pastedValue = onPaste(e);
+
+    if (typeof pastedValue === 'string') {
+      addValue(pastedValue);
+    } else {
+      addValue((e.clipboardData || window.clipboardData).getData('text'));
+    }
   };
 
   const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = (
@@ -363,6 +366,7 @@ MultiValueInput.propTypes = {
   onValueRemove: PropTypes.func,
   onValuesChange: PropTypes.func,
   onInputChange: PropTypes.func,
+  onPaste: PropTypes.func,
 };
 
 export default MultiValueInput;
diff --git a/src/components/forms/MultiValueInput/MultiValueInput.types.ts b/src/components/forms/MultiValueInput/MultiValueInput.types.ts
@@ -36,4 +36,5 @@ export interface MultiValueInputProps
   onValueRemove?: (nextValues: MultiValueInputProps['value']) => void;
   onValuesChange?: (nextValues: MultiValueInputProps['value']) => void;
   onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void | string;
 }