@wavv/ui 1.7.4 → 1.8.0-beta.2

package/build/cjs/types/assets/icons/Screenshot.d.ts

@@ -1,3 +1,3 @@
-import { SVGProps } from 'react';
-declare const Screenshot: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import * as React from 'react';
+declare const Screenshot: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
 export default Screenshot;

package/build/cjs/types/assets/icons/ShieldCheck.d.ts

@@ -1,3 +1,3 @@
-import { SVGProps } from 'react';
-declare const ShieldCheck: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import * as React from 'react';
+declare const ShieldCheck: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
 export default ShieldCheck;

package/build/cjs/types/assets/icons/ShieldSlash.d.ts

@@ -1,3 +1,3 @@
-import { SVGProps } from 'react';
-declare const ShieldSlash: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+import * as React from 'react';
+declare const ShieldSlash: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
 export default ShieldSlash;

package/build/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -49,18 +49,8 @@ type DropdownProps<OptionType> = {
     id?: string;
     /** Sets the name of the Dropdown input */
     name?: string;
-    /** An HTML element/React component to trigger the opening and closing of the dropdown instead of an input */
-    trigger?: ReactNode;
-    /** Center the Dropdown options vertically with the trigger */
-    centerY?: boolean;
-    /** Center the Dropdown options horizontally with the trigger */
-    centerX?: boolean;
-    /** Pixel amount the Dropdown options are offset vertically from the trigger */
-    offsetY?: number;
-    /** Pixel amount the Dropdown options are offset horizontally from the trigger */
-    offsetX?: number;
     /** The direction the options should open in relation to the trigger  */
-    direction?: 'left' | 'right' | 'top' | 'bottom';
+    direction?: 'top' | 'bottom';
     /** Sets the Dropdown fontSize */
     fontSize?: number | string;
     /** Places a description message below the Dropdown */
@@ -79,7 +69,7 @@ type DropdownProps<OptionType> = {
     optionsParent?: string;
 } & WidthHeight & Margin & RestInputProps;
 declare const Dropdown: {
-    <OptionType extends OptionItem>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: DropdownProps<OptionType>): JSX.Element;
+    <OptionType extends OptionItem>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: DropdownProps<OptionType>): JSX.Element;
     Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): JSX.Element;
 };
 export default Dropdown;

package/build/cjs/types/components/Dropdown/DropdownUtils.d.ts

@@ -7,7 +7,7 @@ export type OptionItem = {
     body?: string;
     leftElement?: ReactElement;
     rightElement?: ReactElement;
-    onClick?: (event?: MouseEvent) => void;
+    onClick?: (event?: MouseEvent | Event) => void;
     value?: unknown;
     [key: string]: unknown;
 };

package/build/cjs/types/components/DropdownMenu.d.ts

@@ -0,0 +1,63 @@
+import { HTMLProps, ReactNode } from 'react';
+import { As, FlexPosition, PopPosition } from './types';
+type DivProps = Omit<HTMLProps<HTMLDivElement>, 'as'> & As;
+type Props = {
+    children: ReactNode;
+    /** The id of the menu container */
+    id?: string | number;
+    /** The position of the menu body and arrow in relation to the trigger */
+    position?: PopPosition;
+    /** The element that will trigger the opening of the menu */
+    trigger: ReactNode;
+    /** Controls the open state of the menu */
+    open?: boolean;
+    /** Offset of the menu from the trigger */
+    offset?: number;
+    /** Controls the visibility of the the menu arrow */
+    arrow?: boolean;
+    /** The width of the menu */
+    width?: number | string;
+    /** Overrides the default maxHeight of 200px */
+    maxHeight?: number;
+    /** Specify a container element to portal the content into */
+    container?: HTMLElement;
+    /** zIndex of the menu's portal container */
+    zIndex?: number;
+    /** The function called after the menu opens */
+    afterShow?: () => void;
+    /** The function called after the menu closes */
+    afterHide?: () => void;
+} & DivProps;
+declare const DropdownMenu: {
+    ({ children, id, position, trigger, open, offset, arrow, width, maxHeight, container, zIndex, afterShow, afterHide, ...props }: Props): JSX.Element;
+    Item({ children, id, disabled, onClick, ...props }: ItemProps): JSX.Element;
+    Sub({ children, id, label, zIndex, disabled, container, ...props }: SubProps): JSX.Element;
+    Separator(): JSX.Element;
+};
+type BaseItemProps = {
+    children: ReactNode;
+    disabled?: boolean;
+};
+type ItemProps = {
+    /** The id of the item */
+    id?: string;
+    /** The function to be called when the item is clicked */
+    onClick?: (event: Event) => void;
+    /** The flex positioning of the item contents */
+    contentPosition?: FlexPosition;
+    /** The color of the item text */
+    color?: string;
+    /** Sets the item text color to theme.accent */
+    accented?: boolean;
+} & BaseItemProps;
+type SubProps = {
+    /** The id of the sub menu's content container */
+    id?: string;
+    /** The text or element to display as the sub menu item's trigger */
+    label: string | ReactNode;
+    /** zIndex of the sub menu's portal container */
+    zIndex?: number;
+    /** Specify a container element to portal the sub menu content into */
+    container?: HTMLElement;
+} & BaseItemProps;
+export default DropdownMenu;

package/build/cjs/types/components/Form.d.ts

@@ -77,7 +77,7 @@ declare const Form: {
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     } & import("./types").Margin, "ref">) & import("react").RefAttributes<import("./types").InputRef>>;
     Dropdown: {
-        <OptionType extends import("./Dropdown").DropdownOption>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
+        <OptionType extends import("./Dropdown").DropdownOption>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
             children?: ReactNode;
             onChange?: ((item: OptionType | null) => void) | undefined;
             onTextChange?: ((text: string) => void) | undefined;
@@ -101,12 +101,7 @@ declare const Form: {
             label?: string | undefined;
             id?: string | undefined;
             name?: string | undefined;
-            trigger?: ReactNode;
-            centerY?: boolean | undefined;
-            centerX?: boolean | undefined;
-            offsetY?: number | undefined;
-            offsetX?: number | undefined;
-            direction?: "top" | "bottom" | "right" | "left" | undefined;
+            direction?: "top" | "bottom" | undefined;
             fontSize?: string | number | undefined;
             description?: string | undefined;
             disabled?: boolean | undefined;

package/build/cjs/types/index.d.ts

@@ -8,6 +8,7 @@ export { default as Code } from './components/Code';
 export { default as DocTable } from './components/DocTable';
 export { default as DraftEditor } from './components/DraftEditor';
 export { default as Dropdown } from './components/Dropdown';
+export { default as DropdownMenu } from './components/DropdownMenu';
 export { default as Form } from './components/Form';
 export { default as Grid } from './components/Grid';
 export { default as Icon } from './components/Icon';