@seeqdev/qomponents 0.0.60 → 0.0.61

package/dist/ButtonWithDropdown/ButtonWithDropdown.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ButtonWithDropdownProps } from './ButtonWithDropdown.types';
+declare const ButtonWithDropdown: React.FunctionComponent<ButtonWithDropdownProps>;
+export default ButtonWithDropdown;

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllButtonWithDropdownVariants: () => JSX.Element;

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

@@ -0,0 +1,70 @@
+import { TooltipPosition } from '../Tooltip/Tooltip.types';
+interface DropdownSubItems {
+    /** icon class to be used with the dropdown subitems - if available (i.e. 'fc-zoom') */
+    icon?: string;
+    /** label for the dropdown subitems */
+    label: string;
+    /** function called when the dropdown subitem is clicked on */
+    onClick: (e: Event) => void;
+    /** dropdown subitem container classes */
+    itemContainerClasses?: string;
+    /** dropdown subitem label classes */
+    labelClasses?: string;
+    /** is item disabled */
+    disabled?: boolean;
+    /** dropdown container extra class names */
+    containerExtraClassNames?: string;
+    /** test id for the dropdown subitem */
+    labelTestId?: string;
+    /** test id for the dropdown subitem icon */
+    iconTestId?: string;
+    /** displays a divider line under present dropdown item */
+    hasDivider?: boolean;
+    /** test id for the dropdown subitem */
+    testId?: string;
+}
+export interface ButtonWithDropdownProps {
+    /** items for the dropdown content */
+    dropdownItems: DropdownSubItems[];
+    /** icon element to be used as the trigger */
+    triggerIcon: React.ReactNode;
+    /** id of the dropdown trigger */
+    id?: string;
+    /** extra class names to be placed on the dropdown container */
+    extraClassNames?: string;
+    /** id that will be used in the data-testid attribute on the container element */
+    containerTestId?: string;
+    /** the text to be displayed on the triggers's tooltip */
+    tooltipText?: string;
+    /** optional testId applied to the tooltip - useful for testing */
+    tooltipTestId?: string;
+    /** number of milliseconds to wait before showing a tooltip on-hover */
+    tooltipDelay?: number;
+    /** position of the tooltip */
+    tooltipPlacement?: TooltipPosition;
+    /** true if the provided tooltip text should be rendered as HTML */
+    isHtmlTooltip?: boolean;
+    /** is the button disabled */
+    disabled?: boolean;
+    /** function called when the trigger is clicked on, i.e. for tracking (does not open the popover) */
+    onClick?: (e: MouseEvent) => void;
+    /** alignment of the content of the popover */
+    align?: 'start' | 'center' | 'end';
+    /** number offset from the aligned position */
+    alignOffset?: number;
+    /** the placement of the popover */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** number offset from the placement position */
+    placementOffset?: number;
+    /** set to display arrow or not */
+    hasArrow?: boolean;
+    /** is popover open */
+    isOpen?: boolean;
+    /** function called to open and close popover */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** should popover close when the content is clicked? */
+    isCloseOnContentClick?: boolean;
+    /** focus should be kept within dropdown */
+    keepFocusInsideDropdown?: boolean;
+}
+export {};

package/dist/ButtonWithDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ButtonWithDropdown';

package/dist/ButtonWithPopover/ButtonWithPopover.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ButtonWithPopoverProps } from './ButtonWithPopover.types';
+declare const ButtonWithPopover: React.FunctionComponent<ButtonWithPopoverProps>;
+export default ButtonWithPopover;

package/dist/ButtonWithPopover/ButtonWithPopover.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllButtonWithPopoverVariants: () => JSX.Element;

package/dist/ButtonWithPopover/ButtonWithPopover.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TooltipPosition } from '../Tooltip/Tooltip.types';
+export interface ButtonWithPopoverProps {
+    /** icon class to be used with the toolbar (i.e. 'fc-zoom') */
+    trigger: React.ReactNode;
+    /** items for the popover content */
+    children: React.ReactNode;
+    id?: string;
+    /** extra class names to be placed on the Popover container component */
+    extraClassNames?: string;
+    /** id that will be used in the data-testid attribute on the container element */
+    containerTestId?: string;
+    /** the text to be displayed on the icon's tooltip */
+    tooltipText?: string;
+    /** optional testId applied to the tooltip - useful for testing */
+    tooltipTestId?: string;
+    /** number of milliseconds to wait before showing a tooltip on-hover */
+    tooltipDelay?: number;
+    /** position of the tooltip */
+    tooltipPlacement?: TooltipPosition;
+    /** true if the provided tooltip text should be rendered as HTML */
+    isHtmlTooltip?: boolean;
+    disabled?: boolean;
+    /** function called when the toolbar is clicked on, i.e. for tracking (does not open the popover) */
+    onClick?: (isOpen: boolean) => void;
+    /** called when popup is hidden */
+    onHide?: () => void;
+    /** alignment of the content of the popover */
+    align?: 'start' | 'center' | 'end';
+    /** number offset from the aligned position */
+    alignOffset?: number;
+    /** the placement of the popover */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** number offset from the placement position */
+    placementOffset?: number;
+    /** is popover open */
+    isOpen?: boolean;
+    /** function called to open and close popover */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** set to display arrow or not */
+    hasArrow?: boolean;
+    /** extra trigger container classnames */
+    extraTriggerClassNames?: string;
+    /** extra popover container classnames */
+    extraPopoverClassNames?: string;
+    /** should popover close when the content is clicked? */
+    isCloseOnContentClick?: boolean;
+}

package/dist/ButtonWithPopover/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ButtonWithPopover';

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -37,4 +37,6 @@ export interface ToolbarButtonProps {
     isActive?: boolean;
     /** called when popup is hidden */
     onHide?: () => void;
+    /** set to display arrow or not */
+    hasArrow?: boolean;
 }

package/dist/index.d.ts

@@ -9,6 +9,8 @@ import Select from './Select';
 import Modal from './Modal';
 import Tabs from './Tabs';
 import Accordion from './Accordion';
+import ButtonWithPopover from './ButtonWithPopover';
+import ButtonWithDropdown from './ButtonWithDropdown';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -21,3 +23,5 @@ export { Select };
 export { QTip };
 export { Modal };
 export { Accordion };
+export { ButtonWithPopover };
+export { ButtonWithDropdown };