@eccenca/gui-elements 23.0.0-rc.6 → 23.0.0

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from "react";
-import CodeMirror from "codemirror";
+import CodeMirror, {Position} from "codemirror";
 import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection, ContextOverlay} from "./../../";
 import {Classes as BlueprintClassNames} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -111,6 +111,13 @@ export interface IProps {
     validationRequestDelay?: number
 }
 
+// Meta data regarding a request
+interface RequestMetaData {
+    requestId: string | undefined
+}
+
+type HorizontalShiftCallbackFunction = (shift: number) => any
+
 /** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
  * This is comparable to a one line code editor. */
 const AutoSuggestion = ({
@@ -132,20 +139,22 @@ const AutoSuggestion = ({
                             autoCompletionRequestDelay = 1000,
                             validationRequestDelay = 200
                         }: IProps) => {
-    const [value, setValue] = React.useState(initialValue);
-    const [cursorPosition, setCursorPosition] = React.useState(0);
-    const [horizontalShift, setHorizontalShift] = React.useState<number>(0);
+    const value = React.useRef<string>(initialValue)
+    const cursorPosition = React.useRef(0);
+    const horizontalShiftSubscriber = React.useRef<HorizontalShiftCallbackFunction | undefined>(undefined)
     const [shouldShowDropdown, setShouldShowDropdown] = React.useState(false);
     const [suggestions, setSuggestions] = React.useState<ISuggestionWithReplacementInfo[]>([]);
     const [suggestionsPending, setSuggestionsPending] = React.useState(false);
+    const suggestionRequestData = React.useRef<RequestMetaData>({requestId: undefined})
     const [pathValidationPending, setPathValidationPending] = React.useState(false)
+    const validationRequestData = React.useRef<RequestMetaData>({requestId: undefined})
     const [, setErrorMarkers] = React.useState<CodeMirror.TextMarker[]>([]);
     const [validationResponse, setValidationResponse] = useState<IValidationResult | undefined>(undefined)
     const [suggestionResponse, setSuggestionResponse] = useState<IPartialAutoCompleteResult | undefined>(undefined)
     // The element that should be used for replacement highlighting
     const [highlightedElement, setHighlightedElement] = useState<ISuggestionWithReplacementInfo | undefined>(undefined)
     const [editorInstance, setEditorInstance] = React.useState<CodeMirror.Editor>();
-    const [isFocused, setIsFocused] = React.useState(false);
+    const isFocused = React.useRef(false);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
     const [editorState] = React.useState<{
         index: number,
@@ -155,7 +164,7 @@ const AutoSuggestion = ({
     }>({index: 0, suggestions: [], dropdownShown: false})
     /** This is for the AutoSuggestionList component in order to re-render. */
     const [focusedIndex, setFocusedIndex] = React.useState(0)
-    const [selectedTextRanges, setSelectedTextRanges] = useState<IRange[]>([])
+    const selectedTextRanges = React.useRef<IRange[]>([])
 
     const pathIsValid = validationResponse?.valid ?? true;
 
@@ -170,8 +179,10 @@ const AutoSuggestion = ({
     }, [editorInstance, editorState])
 
     React.useEffect(() => {
-        setValue(initialValue)
-    }, [initialValue])
+        if(initialValue != null) {
+            editorInstance?.setValue(initialValue)
+        }
+    }, [initialValue, editorInstance])
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown
@@ -181,7 +192,7 @@ const AutoSuggestion = ({
     useEffect(() => {
         if (highlightedElement && editorInstance) {
             const { from, length } = highlightedElement;
-            if(length > 0 && selectedTextRanges.length === 0) {
+            if(length > 0 && selectedTextRanges.current.length === 0) {
                 const to = from + length;
                 const marker = editorInstance.markText(
                     {line: 0, ch: from},
@@ -216,7 +227,8 @@ const AutoSuggestion = ({
                 return []
             })
         }
-        onInputChecked && onInputChecked(!!validationResponse?.valid)
+        const isValid = validationResponse?.valid === undefined || validationResponse.valid
+        onInputChecked && onInputChecked(isValid)
     }, [validationResponse?.valid, validationResponse?.parseError, editorInstance, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -245,9 +257,10 @@ const AutoSuggestion = ({
     }, [suggestionResponse, editorState]);
 
     const asyncCheckInput = useMemo(() => async (inputString: string) => {
-        if(!checkInput) {
+        if(!checkInput || inputString !== value.current || validationRequestData.current.requestId === inputString) {
             return
         }
+        validationRequestData.current.requestId = inputString
         setPathValidationPending(true)
         try {
             const result: IValidationResult | undefined = await checkInput(inputString)
@@ -266,10 +279,17 @@ const AutoSuggestion = ({
     )
 
     const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
+        const requestId = `${inputString} ${cursorPosition}`
+        if(requestId === suggestionRequestData.current.requestId) {
+            return
+        }
+        suggestionRequestData.current.requestId = requestId
         setSuggestionsPending(true)
         try {
             const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
-            setSuggestionResponse(result)
+            if(value.current === inputString) {
+                setSuggestionResponse(result)
+            }
         } catch(e) {
             setSuggestionResponse(undefined)
             // TODO: Error handling
@@ -283,29 +303,24 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     )
 
-    React.useEffect(() => {
-        if (isFocused) {
-            setShouldShowDropdown(true);
-            handleEditorInputChange(value, cursorPosition)
-            return handleEditorInputChange.cancel
-        }
-        return;
-    }, [cursorPosition, value, isFocused, handleEditorInputChange]);
-
-    // Trigger input validation
-    useEffect(() => {
-        checkValuePathValidity(value)
-        return checkValuePathValidity.cancel
-    }, [value, checkValuePathValidity])
-
     const handleChange = (val: string) => {
-        setValue(val);
+        value.current = val
+        checkValuePathValidity.cancel()
+        checkValuePathValidity(value.current)
         onChange(val)
     };
 
-    const handleCursorChange = (pos: any, coords: any, scrollinfo: any) => {
-        setCursorPosition(pos.ch);
-        setHorizontalShift(Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)));
+    const handleCursorChange = (pos: Position, coords: any, scrollinfo: any) => {
+        cursorPosition.current = pos.ch;
+        // cursor change is fired after onChange, so we put the auto-complete logic here
+        if (isFocused.current) {
+            setShouldShowDropdown(true);
+            handleEditorInputChange.cancel()
+            handleEditorInputChange(value.current, cursorPosition.current)
+        }
+        horizontalShiftSubscriber.current && horizontalShiftSubscriber.current(
+            Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0))
+        )
     };
 
     const handleInputEditorKeyPress = (event: KeyboardEvent) => {
@@ -333,15 +348,26 @@ const AutoSuggestion = ({
     };
 
     const handleInputEditorClear = () => {
-        handleChange("");
-        setValue("")
+        editorInstance?.setValue("")
+        cursorPosition.current = 0
+        handleChange("")
         editorInstance?.focus();
     };
 
     const handleInputFocus = (focusState: boolean) => {
         onFocusChange && onFocusChange(focusState)
-        setIsFocused(focusState)
         focusState ? setShouldShowDropdown(true) : closeDropDown()
+        if(!isFocused.current && focusState) {
+            // Just got focus
+            // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused
+            setSuggestions([])
+            suggestionRequestData.current.requestId = undefined
+            isFocused.current = focusState
+            handleEditorInputChange.cancel()
+            handleEditorInputChange(value.current, cursorPosition.current)
+        } else {
+            isFocused.current = focusState
+        }
     };
 
     //keyboard handlers
@@ -390,7 +416,15 @@ const AutoSuggestion = ({
         setHighlightedElement(item)
     }, [])
 
-    const hasError = !!value && !pathIsValid && !pathValidationPending;
+    const onSelection = React.useMemo(() => (ranges: IRange[]) => {
+        selectedTextRanges.current = ranges
+    }, [])
+
+    const subscribeToHorizontalShift = React.useMemo(() => (callback: HorizontalShiftCallbackFunction) => {
+        horizontalShiftSubscriber.current = callback
+    }, [])
+
+    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div id={id} className={`${eccgui}-autosuggestion`}>
             <div className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${BlueprintClassNames.FILL} ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}>
@@ -404,7 +438,7 @@ const AutoSuggestion = ({
                     content={(
                         <AutoSuggestionList
                             id={id+"__dropdown"}
-                            left={horizontalShift}
+                            registerForHorizontalShift={subscribeToHorizontalShift}
                             loading={suggestionsPending}
                             options={suggestions}
                             isOpen={!suggestionsPending && shouldShowDropdown}
@@ -419,16 +453,16 @@ const AutoSuggestion = ({
                         setEditorInstance={setEditorInstance}
                         onChange={handleChange}
                         onCursorChange={handleCursorChange}
-                        initialValue={value}
+                        initialValue={initialValue}
                         onFocusChange={handleInputFocus}
                         onKeyDown={handleInputEditorKeyPress}
                         enableTab={useTabForCompletions}
                         placeholder={placeholder}
-                        onSelection={setSelectedTextRanges}
+                        onSelection={onSelection}
                         showScrollBar={showScrollBar}
                     />
                 </ContextOverlay>
-                {!!value && (
+                {!!value.current && (
                     <span className={BlueprintClassNames.INPUT_ACTION}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -24,13 +24,16 @@ export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement
     isOpen: boolean;
     // If the drop down should show a loading state
     loading?: boolean;
-    left?: number;
+    // Register for changes in horizontal shift
+    registerForHorizontalShift?: (callback: HorizontalShiftCallbackFunction) => any
     // The item from the drop down that is active
     currentlyFocusedIndex: number;
     // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
     itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
 }
 
+type HorizontalShiftCallbackFunction = (shift: number) => any
+
 const ListItem = ({ item }: any, ref: any) => {
     const listItem = (
         <OverviewItem densityHigh={true}>
@@ -76,7 +79,7 @@ export const AutoSuggestionList = ({
     options,
     loading,
     onItemSelectionChange,
-    left,
+    registerForHorizontalShift,
     currentlyFocusedIndex,
     itemToHighlight,
     style,
@@ -85,6 +88,7 @@ export const AutoSuggestionList = ({
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
     >(undefined);
+    const [left, setLeft] = React.useState(0)
     // Refs of list items
     const [refs] = React.useState<React.RefObject<Element>[]>([])
     const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -95,6 +99,15 @@ export const AutoSuggestionList = ({
         return refs[index];
     };
 
+    React.useEffect(() => {
+        if(registerForHorizontalShift) {
+            const callback = (shift: number) => {
+                setTimeout(() => setLeft(shift), 1)
+            }
+            registerForHorizontalShift(callback)
+        }
+    }, [registerForHorizontalShift])
+
     React.useEffect(() => {
         const listIndexNode = refs[currentlyFocusedIndex];
         if (dropdownRef?.current && listIndexNode?.current) {

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -1,10 +1,10 @@
 import "codemirror/addon/display/placeholder.js"
 import "codemirror/mode/sparql/sparql.js";
 import React from "react";
-import { Controlled as ControlledEditor } from "react-codemirror2";
-import { Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {UnControlled as UnControlledEditor} from "react-codemirror2";
+import {Classes as BlueprintClassNames} from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 export interface IEditorProps {
   // Is called with the editor instance that allows access via the CodeMirror API
@@ -51,9 +51,9 @@ const SingleLineCodeEditor = ({
                               }: IEditorProps) => {
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
-            <ControlledEditor
-        editorDidMount={(editor) => {
-          editor.on("beforeChange", (_, change) => {
+            <UnControlledEditor
+        editorDidMount={(editor: any) => {
+          editor.on("beforeChange", (_: any, change: any) => {
             // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
             const newText = change.text.join("").replace(/\n/g, "");
             //failing unexpectedly during undo and redo
@@ -89,10 +89,18 @@ const SingleLineCodeEditor = ({
               editor.getScrollInfo()
           );
         }}
-        onBeforeChange={(_editor, _data, value) => {
-          const trimmedValue = value.replace(/\n/g, "");
-          onChange(trimmedValue);
+        onBeforeChange={(_editor, _data, value, next) => {
+            // Remove entered new lines
+            const trimmedValue = value.replace(/[\r\n]/g, "");
+            if (trimmedValue !== value) {
+                _editor.setValue(trimmedValue)
+            }
+            next()
         }}
+        onChange={(_editor, _data, value) => {
+            onChange(value);
+        }
+        }
         onKeyDown={(_, event) => onKeyDown(event)}
       />
     </div>

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom'
-import {fireEvent, render} from '@testing-library/react'
+import {fireEvent, render, waitFor} from '@testing-library/react'
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {AutoSuggestionList, IDropdownProps} from '../AutoSuggestionList'
 
@@ -10,7 +10,6 @@ describe("Dropdown list", () => {
         props  = {
             currentlyFocusedIndex: 0,
             loading: false,
-            left:0,
             isOpen: false,
             options: [],
             itemToHighlight: () => {},
@@ -62,18 +61,21 @@ describe("Dropdown list", () => {
        expect(dropdownItems.length).toBe(2)
     })
 
-    it("should move horizontally for every cursor movement", () => {
+    it("should move horizontally for every cursor movement", async () => {
+       const offset = 10
        props = {
            ...props,
            options: mockOptions,
            loading: false,
            isOpen: true,
-           left: 10
+           registerForHorizontalShift: (callback => callback(offset)),
        }
        const {container} = render(<AutoSuggestionList {...props} />)
-       const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
-       const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
-       expect(leftOffset).toBe(props.left)
+       await waitFor(() => {
+           const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
+           const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
+           expect(leftOffset).toBe(offset)
+       })
     })
 
     it("should have one active item at a time", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -143,6 +143,12 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
 
     /** If an error occurs during the auto-completion request, the error details will be prefixed with this string. */
     requestErrorPrefix?: string
+
+    /** Creates a backdrop when the popover is shown that captures outside clicks in order to close the popover.
+     * This is needed if other components on the same page are swallowing events, e.g. the react-flow canvas.
+     * hasBackDrop should then be set to true in these cases otherwise the popover won't close when clicking those other components.
+     **/
+    hasBackDrop?: boolean
 }
 
 AutoCompleteField.defaultProps = {
@@ -181,6 +187,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         resetQueryToValue,
         itemValueString,
         requestErrorPrefix = "",
+        hasBackDrop = false,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -188,7 +195,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [listLoading, setListLoading] = useState<boolean>(false);
 
     const [query, setQuery] = useState<string>("");
-    const [hasFocus, setHasFocus] = useState<boolean>(false);
+    // If the input field has focus
+    const [inputHasFocus, setInputHasFocus] = useState<boolean>(false);
     const [highlightingEnabled, setHighlightingEnabled] = useState<boolean>(true);
     const [requestError, setRequestError] = useState<string | undefined>(undefined)
 
@@ -226,7 +234,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && !readOnly && hasFocus) {
+        if (!disabled && !readOnly && inputHasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -239,18 +247,18 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return;
     },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [hasFocus, query]
+        [inputHasFocus, query]
     );
 
     const fieldWidthLimits = elementWidth(fieldRef);
 
     // We need to fire some actions when the auto-complete widget gets or loses focus
     const handleOnFocusIn = () => {
-        setHasFocus(true);
+        setInputHasFocus(true);
     };
 
     const handleOnFocusOut = () => {
-        setHasFocus(false);
+        setInputHasFocus(false);
     };
 
     // On popover close reset query to selected item
@@ -384,6 +392,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onClosed: onPopoverClose,
         ...otherProps.contextOverlayProps,
         ...preventOverlayOnReadonly,
+        // Needed to capture clicks outside of the popover, e.g. in order to close it.
+        hasBackdrop: hasBackDrop
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.
@@ -409,7 +419,10 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 className={`${eccgui}-autocompletefield__input`}
                 disabled={disabled}
                 // Need to display error messages in list
-                items={requestError ? [requestError as T] : filtered}
+                items={requestError ?
+                    [requestError as T] :
+                    filtered
+                }
                 initialContent={onlyDropdownWithQuery ? null : undefined}
                 inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : () => ""}
                 itemRenderer={requestError ? requestErrorRenderer : optionRenderer}

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -17,7 +17,7 @@ export const createNewItemRendererFactory = (
         let textElement = itemTextRenderer(query, modifiers.styleWidth)
         if(typeof textElement === "string") {
             textElement = <OverflowText style={modifiers.styleWidth}>
-                {`Create option '${query}'`}
+                {textElement.trim() !== "" ? textElement : `Create option '${query}'`}
             </OverflowText>
         }
         return (

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -6,7 +6,7 @@ import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter"
 import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
 
 const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
-    title: "Components/AutoCompleteField",
+    title: "Forms/AutoCompleteField",
     component: AutoCompleteField,
     argTypes: {
     },

package/src/components/Button/Button.stories.tsx

@@ -1,125 +1,19 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Button from "./Button";
-import Icon from "../Icon/Icon";
-import Spacing from "../Separation/Spacing";
+import { Button, Icon, Spacing} from "../../../index";
 
 export default {
     title: "Components/Button",
     component: Button,
     argTypes: {
-        active: {
-            description: "Button will display in an active state.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        disabled: {
-            description: "Whether this action is non-interactive and the button is not usable.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        minimal: {
-            description: "Whether this button should use minimal styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        outlined: {
-            description: "Whether this button should use outlined styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        text: {
-            description: "Action text. Can be any single React renderable. Can be used as alternative to include `children` elements.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "React.ReactNode" },
-            }
-        },
-        type: {
-            description: "HTML type attribute of button. Note that this prop has no effect on buttons with `href` property set.",
-            control: "text",
-            table: {
-                defaultValue: { summary: "button" },
-                type: { summary: "button | reset | submit" },
-            }
-        },
-        loading: {
-            description: "Button is displayed disabled and contains a spinner instead of its contents.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        fill: {
-            description: "Whether this button should expand to fill its container.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        large: {
-            description: "Whether this button should use large styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        small: {
-            description: "Whether this button should use small styles",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
         icon: {
-            description: "Left aligned icon, can be a canonical icon name or an `Icon` element.",
             control: { disable: true, },
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "Icon | string" },
-            }
         },
         rightIcon: {
-            description: "Right aligned icon, can be a canonical icon name or an `Icon` element.",
             control: { disable: true, },
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "Icon | string" },
-            }
         },
         onClick: {
-            description: "Click event handler.",
             action: "clicked",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "(event: MouseEvent<HTMLElement>) => void" },
-            }
         },
     },
 } as ComponentMeta<typeof Button>;

package/src/components/Button/Button.tsx

@@ -13,7 +13,7 @@ import {ValidIconName} from "../Icon/canonicalIconNames";
 
 export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
     /**
     * Always use this when the button triggers an affirmative action, e.g. confirm a process.
     * The button is displayed with primary color scheme.
@@ -100,7 +100,7 @@ function Button({
       break;
   }
 
-  let ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+  let ButtonType: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
   const button = (
     <ButtonType

package/src/components/Card/stories/Card.stories.tsx

@@ -8,8 +8,8 @@ import {
     CardTitle,
     CardOptions,
     CardActions,
-} from "../";
-import Divider from "../../Separation/Divider";
+    Divider,
+} from "../../../../index";
 
 import { Default as CardHeaderExample } from "./CardHeader.stories";
 import { Default as CardContentExample } from "./CardContent.stories";
@@ -29,28 +29,9 @@ export default {
     argTypes: {
         elevation: {
             control: { type: "number", min: 0, max: 4 },
-            description: "Intensity of the drop shadow beneath the card. At elevation 0, no drop shadow is applied.",
-            table: {
-                type: { summary: "number: 0 to 5" },
-                defaultValue: { summary: 1 },
-            }
-        },
-        interactive: {
-            control: "boolean",
-            description: "Card responds to user interactions, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer. Is set automatically to `true` if an `onClick` handler is available.",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
         },
         onClick: {
             ...helpersArgTypes.handlerOnClick,
-            description: "Callback invoked when the card is clicked.",
-            defaultValue: null,
-            table: {
-                type: { summary: "(e: MouseEvent<HTMLDivElement>) => void" },
-                defaultValue: { summary: undefined },
-            }
         },
         children: {
             control: "none",