@kvaser/canking-api/dist/controls/ColumnItemControl.d.ts

CanKing API to communicate with the CanKing service using Node.js.

/**
 * This module includes a form row UI control, a container component that can be used to
 * display form controls on one row.
 *
 * To be able to use these controls the CanKingDataProvider component must be present in the
 * component tree above your component. Normally the CanKingDataProvider is added
 * at the root of the component tree.
 *
 * @example
 * In this example, YourComponent1 and YourComponent2 will have the same width, which will be the maximum width of the two components.
 *
 * ```tsx
 * function YourComponent() {
 *   const columnItem1 = useColumnItem();
 *   const columnItem2 = useColumnItem();
 *   const width = useColumnItems(columnItem1, columnItem2);
 *   return (
 *     <div>
 *       <ColumnItemControl columnItem={columnItem1} width={width}>
 *         <YourComponent1 />
 *       </ColumnItemControl>
 *       <ColumnItemControl columnItem={columnItem2} width={width}>
 *         <YourComponent2 />
 *       </ColumnItemControl>
 *     </div>
 *   );
 * }
 *
 * @packageDocumentation
 */
import React, { JSX } from 'react';
import { type ColumnItem } from './ColumnItems';
/**
 * Properties for the ColumnItemControl component.
 */
export interface ColumnItemControlProps {
    /**
     * The ColumnItem associated with this control. The ColumnItem contains a resizeRef callback that will
     * be called with the DOM element of this control, allowing the ColumnItem to manage the width of this
     * control and any other controls that share the same ColumnItem.
     */
    columnItem: ColumnItem;
    /**
     * The width of the control. If not provided, the control will use the width managed by the ColumnItem.
     */
    width?: number;
    /**
     * The child elements to be rendered inside the control.
     */
    children?: React.ReactNode;
}
/**
 *  A react component to be used when different components should share the same width.
 * @param props - Component properties.
 * @returns The ColumnItemControl React component.
 */
declare function ColumnItemControl({ columnItem, width, children, }: ColumnItemControlProps): JSX.Element;
export default ColumnItemControl;