react-magma-dom 3.7.0 → 3.9.0

package/dist/components/TreeView/useTreeItem.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { IconProps } from 'react-magma-icons';
+import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
+export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Index number
+     * private
+     */
+    index?: number;
+    /**
+     * Item name
+     */
+    label: React.ReactNode;
+    /**
+     * Item id
+     */
+    itemId: string;
+    /**
+     * @internal
+     */
+    testId?: string;
+    /**
+     * Action that fires when the item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Icon for the tree item
+     */
+    icon?: React.ReactElement<IconProps>;
+    /**
+     * Indeterminate Checkbox status
+     * @internal
+     */
+    parentCheckedStatus?: IndeterminateCheckboxStatus;
+    /**
+     * @internal
+     */
+    updateParentCheckStatus?: (index: number, status: IndeterminateCheckboxStatus, isInitialRender?: boolean) => void;
+    /**
+     * @internal
+     */
+    parentDepth?: number;
+    /**
+     * @internal
+     */
+    itemDepth?: number;
+    /**
+     * TODO: improve functionality (issue #1305)
+     * @internal
+     * If true, element is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Style properties for the tree item label
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * @internal
+     */
+    topLevel?: boolean;
+}
+export declare const checkedStatusToBoolean: (status: IndeterminateCheckboxStatus) => boolean;
+export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any): {
+    contextValue: {
+        checkboxChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        checkedStatus: IndeterminateCheckboxStatus;
+        expanded: boolean;
+        hasOwnTreeItems: boolean;
+        itemDepth: number;
+        itemId: string;
+        numberOfTreeItemChildren: number;
+        parentCheckedStatus: IndeterminateCheckboxStatus;
+        parentDepth: number;
+        ref: (node: any) => void;
+        selectedItems: import("./TreeViewContext").TreeItemSelectedInterface[];
+        setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+        updateCheckedStatusFromChild: (index: number, status: IndeterminateCheckboxStatus, isInitialRender?: boolean) => void;
+        treeItemChildren: (string | number | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal)[];
+    };
+    handleClick: (event: any, itemId: any) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+};
+export declare type UseTreeItemReturn = ReturnType<typeof useTreeItem>;

package/dist/components/TreeView/useTreeView.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { TreeItemSelectedInterface } from './TreeViewContext';
+export declare enum TreeViewSelectable {
+    single = "single",
+    multi = "multi",
+    off = "off"
+}
+export interface UseTreeViewProps {
+    /**
+     * Text for aria-label attribute for the tree.
+     * If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name.
+     * It's required to use either `ariaLabel` OR `ariaLabelledBy`.
+     */
+    ariaLabel?: string;
+    /**
+     * Text for aria-labelledby attribute for the tree.
+     * If there is visible text that labels an element, use aria-labelledby.
+     * It's required to use either `ariaLabel` OR `ariaLabelledBy`.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Array list of itemIds of items that should be expanded by default.
+     * For all items expanded, provide an array with all the indexes
+     * @default [] (no items expanded)
+     */
+    initialExpandedItems?: Array<string>;
+    isInverse?: boolean;
+    /**
+     * Array list of itemIds of items that should be selected when the component renders
+     * * @default [] (no items selected)
+     */
+    preselectedItems?: Array<TreeItemSelectedInterface>;
+    /**
+     * How many items can be selected in the tree view: single, multi, off
+     * @default TreeViewSelectable.single
+     */
+    selectable?: TreeViewSelectable;
+    /**
+     * @internal
+     */
+    testId?: string;
+    /**
+     * Action that fires when an item is expanded or collapsed
+     */
+    onExpandedChange?: (event: React.SyntheticEvent) => void;
+    /**
+     * Action that fires when an item is selected
+     * Return an array of objects.
+     * Example: [ {itemId: 'item0', checkedStatus: IndeterminateCheckboxStatus.indeterminate}, {itemId: 'item0-child', checkedStatus: IndeterminateCheckboxStatus.checked} ]
+     */
+    onSelectedItemChange?: (selectedItems: Array<Object>) => void;
+    children?: React.ReactNode[];
+}
+export declare function useTreeView(props: UseTreeViewProps): {
+    contextValue: {
+        hasIcons: boolean;
+        itemToFocus: any;
+        onSelectedItemChange: (selectedItems: Object[]) => void;
+        onExpandedChange: (event: React.SyntheticEvent<Element, Event>) => void;
+        selectable: TreeViewSelectable;
+        setHasIcons: React.Dispatch<React.SetStateAction<boolean>>;
+        selectedItems: TreeItemSelectedInterface[];
+        setSelectedItems: React.Dispatch<React.SetStateAction<TreeItemSelectedInterface[]>>;
+        initialExpandedItems: string[];
+        treeItemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
+        registerTreeItem: (refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, ref: React.MutableRefObject<Element>) => void;
+        preselectedItemsNeedUpdate: boolean;
+        setPreselectedItemsNeedUpdate: React.Dispatch<React.SetStateAction<boolean>>;
+        initialExpandedItemsNeedUpdate: boolean;
+        setInitialExpandedItemsNeedUpdate: React.Dispatch<React.SetStateAction<boolean>>;
+        selectedItemsChanged: boolean;
+        setSelectedItemsChanged: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+};
+export declare type UseTreeViewReturn = ReturnType<typeof useTreeView>;

package/dist/components/TreeView/utils.d.ts

@@ -0,0 +1,44 @@
+import { ThemeInterface } from '../../theme/magma';
+import { TreeViewSelectable } from './useTreeView';
+export declare enum TreeNodeType {
+    branch = "branch",
+    leaf = "leaf"
+}
+/**
+ * Leaf node - 1st level has 40px of left padding.
+ * Each level after that adds 56px of left padding.
+ * 40, 64, 88, 112, 136, etc.
+ *
+ * Branch node - 1st level has 8px of left padding.
+ * Each level after that adds 24px of left padding.
+ * 8, 32, 56, 80, 104, etc.
+ *
+ * The label element (the div inside the li) gets additional spacing.
+ * In order to highlight the entire line, we need to negate the value for margin.
+ */
+export declare function calculateOffset(type: TreeNodeType, depth?: number, labelElem?: boolean, negative?: boolean): string;
+export declare function getTreeItemLabelColor(isInverse: boolean, disabled: boolean, theme: ThemeInterface): string;
+export declare function getTreeItemWrapperCursor(disabled: boolean, selectable: TreeViewSelectable, nodeType: TreeNodeType): "not-allowed" | "pointer" | "default";
+export declare function arrayIncludesId(itemsArray: any, itemId: any): any;
+export declare function getChildrenItemIds(children: any, status?: string): any[];
+export declare function getChildrenItemIdsFlat(children: any): any[];
+export declare function getChildrenItemIdsInTree(children: any): any[];
+export declare function getAllParentIds(childrenArr: any, itemId: any, parentItemIds?: any[]): any;
+export declare function findChildByItemId(children: any, itemId: any): any;
+export declare function getAllChildrenEnabled(children: any): boolean;
+export declare function filterSelectedItems(selectedItems: any, childrenIds: any, itemId: any): any;
+export declare function getMissingChildrenIds(selectedItems: any, childrenIds: any): any;
+export declare function getChildrenCheckedStatus(childrenIds: any, status: any): any;
+export declare function getEnabledTreeItemChildrenLength(treeItemChildren: any): any;
+export declare function getUpdatedSelectedItems(selectedItems: any, itemId: any, checkedStatus: any): any;
+export declare function getUniqueSelectedItemsArray(itemArr0: any, itemArr1: any, itemArr2: any): any[];
+export declare function findCommonItems(initialItemsArr: any, childrenItemsArr: any): any[];
+export declare function areArraysEqual(array1: any, array2: any): boolean;
+export declare function getCheckedStatus(itemId: any, selectedItems: any): any;
+export declare function findFirstBranchNode(children: any): any;
+export declare function getFirstItemInTree(arr: any, children: any): any;
+export declare function filterNullEntries(obj: any): {
+    current: any;
+} | {
+    current?: undefined;
+};

package/dist/components/Typography/index.d.ts

@@ -55,4 +55,4 @@ export declare const headingMediumStyles: (props: any) => import("@emotion/utils
 export declare const headingSmallStyles: (props: any) => import("@emotion/utils").SerializedStyles;
 export declare const headingXSmallStyles: (props: any) => import("@emotion/utils").SerializedStyles;
 export declare const heading2XSmallStyles: (props: any) => import("@emotion/utils").SerializedStyles;
-export declare const TypographyComponent: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TypographyProps<HTMLParagraphElement>, import("../..").ThemeInterface>;
+export declare const TypographyComponent: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TypographyProps<HTMLParagraphElement>, object>;