@gechiui/components/src/tools-panel/types.ts

UI components for GeChiUI.

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports
import type { ReactNode } from 'react';

type ResetAllFilter = () => void;
type ResetAll = ( filters?: ResetAllFilter[] ) => void;

export type ToolsPanelProps = {
	/**
	 * The child elements.
	 */
	children: ReactNode;
	/**
	 * Flags that the items in this ToolsPanel will be contained within an inner
	 * wrapper element allowing the panel to lay them out accordingly.
	 */
	hasInnerWrapper: boolean;
	/**
	 * Text to be displayed within the panel's header and as the `aria-label`
	 * for the panel's dropdown menu.
	 */
	label: string;
	/**
	 * If a `panelId` is set, it is passed through the `ToolsPanelContext` and
	 * used to restrict panel items. Only items with a matching `panelId` will
	 * be able to register themselves with this panel.
	 */
	panelId: string;
	/**
	 * A function to call when the `Reset all` menu option is selected. This is
	 * passed through to the panel's header component.
	 */
	resetAll: ResetAll;
	/**
	 * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
	 * placeholder content instead of null when they are toggled off and hidden.
	 */
	shouldRenderPlaceholderItems: boolean;
};

export type ToolsPanelHeaderProps = {
	/**
	 * Text to be displayed within the panel header. It is also passed along as
	 * the `label` for the panel header's `DropdownMenu`.
	 */
	label: string;
	/**
	 * The `resetAll` prop provides the callback to execute when the "Reset all"
	 * menu item is selected. Its purpose is to facilitate resetting any control
	 * values for items contained within this header's panel.
	 */
	resetAll: ResetAll;
	/**
	 * This is executed when an individual control's menu item is toggled. It
	 * will update the panel's menu item state and call the panel item's
	 * `onSelect` or `onDeselect` callbacks as appropriate.
	 */
	toggleItem: ( label: string ) => void;
};

export type ToolsPanelItem = {
	/**
	 * This is called when building the `ToolsPanel` menu to determine the
	 * item's initial checked state.
	 */
	hasValue: () => boolean;
	/**
	 * This prop identifies the current item as being displayed by default. This
	 * means it will show regardless of whether it has a value set or is toggled
	 * on in the panel's menu.
	 */
	isShownByDefault: boolean;
	/**
	 * The supplied label is dual purpose. It is used as:
	 * 1. the human-readable label for the panel's dropdown menu
	 * 2. a key to locate the corresponding item in the panel's menu context to
	 * determine if the panel item should be displayed.
	 * A panel item's `label` should be unique among all items within a single
	 * panel.
	 */
	label: string;
	/**
	 * Panel items will ensure they are only registering with their intended
	 * panel by comparing the `panelId` props set on both the item and the panel
	 * itself. This allows items to be injected from a shared source.
	 */
	panelId: string;
	/**
	 * A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
	 * array of these functions through to the panel's `resetAll` callback. They
	 * can then be iterated over to perform additional tasks.
	 */
	resetAllFilter: ResetAllFilter;
};

export type ToolsPanelItemProps = ToolsPanelItem & {
	/**
	 * The child elements.
	 */
	children?: ReactNode;
	/**
	 * Called when this item is deselected in the `ToolsPanel` menu. This is
	 * normally used to reset the panel item control's value.
	 */
	onDeselect?: () => void;
	/**
	 * A callback to take action when this item is selected in the `ToolsPanel`
	 * menu.
	 */
	onSelect?: () => void;
};

export type ToolsPanelMenuItemKey = 'default' | 'optional';

export type ToolsPanelMenuItems = {
	[ menuItemKey in ToolsPanelMenuItemKey ]: { [ key: string ]: boolean };
};

export type ToolsPanelContext = {
	panelId?: string;
	menuItems: ToolsPanelMenuItems;
	hasMenuItems: boolean;
	registerPanelItem: ( item: ToolsPanelItem ) => void;
	deregisterPanelItem: ( label: string ) => void;
	flagItemCustomization: (
		label: string,
		group?: ToolsPanelMenuItemKey
	) => void;
	isResetting: boolean;
	shouldRenderPlaceholderItems: boolean;
	areAllOptionalControlsHidden: boolean;
};

export type ToolsPanelControlsGroupProps = {
	items: [ string, boolean ][];
	onClose: () => void;
	toggleItem: ( label: string ) => void;
};

export type ToolsPanelMenuItemsConfig = {
	panelItems: ToolsPanelItem[];
	shouldReset: boolean;
	currentMenuItems?: ToolsPanelMenuItems;
};