@stihl-design-system/components/utils/helpers.d.ts

Welcome to the STIHL Design System react component library.

import { default as React } from 'react';
/**
 * Converts a pixel value to rem units.
 *
 * This function assumes the root font size of the document is 16 pixels,
 * which is a common default in web browsers. It divides the given pixel value by 16
 * to convert it into rem units.
 *
 * @param {number} px - The pixel value to be converted to rem units.
 * @returns {number} - The equivalent value in rem units.
 */
export declare const pixelToRem: (px: number) => number;
/**
 * Generates a message with a standardized format for all user facing warning/error messages.
 *
 * @param {string} componentName - The name of the component generating the message.
 * @param {string} message - The message to be included in the generated message.
 * @returns {string} A message with a standardized format: "[STIHL Design System] - [componentName]: message".
 */
export declare const generateDSMessage: (componentName: string, message: string) => string;
/**
 * Generates a message for a required prop that is missing from a component.
 *
 * @param {string} propName - The name of the prop that is required.
 * @param {string} componentName - The name of the component that is missing the required prop.
 */
export declare const requiredPropMessage: (propName: string, componentName: string) => string;
/**
 * Retrieves the closest ancestor of the given element that matches a specified selector.
 *
 * @param {HTMLElement} element - The HTMLElement from which to start searching.
 * @param {string} selector - The CSS selector used to match the ancestor elements.
 * @returns {Element|null} The closest ancestor element that matches the specified selector, or null if no matching element is found.
 */
export declare const getClosestHTMLElement: (element: HTMLElement, selector: string) => Element | null;
/**
 * Checks if a specific React component exists within the children of a given React node.
 *
 * @param {React.ReactNode} children - The children to search through.
 * @param {React.ComponentType<any>} target - The target component to check for.
 * @param {boolean} [shouldSearchNested=false] - Whether to search nested children recursively.
 * @returns {boolean} True if the target component exists, false otherwise.
 */
export declare const checkIfChildExists: (children: React.ReactNode, target: React.ComponentType<any>, shouldSearchNested?: boolean) => boolean;