@kemu-io/hs-react 0.2.36 → 0.2.37

package/cjs/WidgetWrapper.d.ts

@@ -1,5 +1,3 @@
-// Generated by dts-bundle-generator v9.5.1
-
 import React$1 from 'react';
 
 export type Rect = {

package/cjs/components/ResizableContainer.d.ts

@@ -0,0 +1,71 @@
+import { CSSObject } from '@emotion/styled';
+import React$1 from 'react';
+import { CSSProperties } from 'react';
+
+export type ResizableContainerProps = {
+	css?: CSSObject;
+	minWidth?: number;
+	minHeight?: number;
+	maxWidth?: number;
+	maxHeight?: number;
+	defaultWidth?: number;
+	defaultHeight?: number;
+	children: React$1.ReactNode;
+	/**
+	 * The lockAspectRatio property is used to lock aspect ratio. Set to true to lock
+	 * the aspect ratio based on the initial size. Set to a numeric value to lock a
+	 * specific aspect ratio (such as 16/9). If set to numeric, make sure to set initial
+	 * height/width to values with correct aspect ratio. If omitted, set false.
+	 */
+	lockAspectRatio?: boolean | number;
+	/**
+	 * Callback when the component is being resized.
+	 */
+	onResize?: (width: number, height: number, originalEvent: MouseEvent | TouchEvent) => void;
+	/**
+	 * Callback when the component has been resized.
+	 */
+	onStopResize?: (width: number, height: number, originalEvent: MouseEvent | TouchEvent) => void;
+};
+export type WrapperProps = {
+	cWidth?: number | string;
+	cHeight?: number | string;
+	noPadding?: boolean;
+	noBorderRadius?: boolean;
+	className?: string;
+	style?: React$1.CSSProperties;
+};
+/**
+ * A resizable container for the widget's canvas. It implements styles to handle
+ * the widget's appearance when selected or offline.
+ *
+ * @example
+ * ```tsx
+ * import packageJson from '../package.json';
+ * import { CustomWidgetProps, components, createWidgetUI } from '@kemu-io/hs-react';
+ *
+ * const { ResizableContainer } = components;
+ *
+ * const MyWidgetUI = (props: CustomWidgetProps) => {
+ *
+ *   const handleResize = useCallback((width: number, height: number) => {
+ *     console.log('Widget resized: ', width, height);
+ *   }, []);
+ *
+ *   return (
+ *     <ResizableContainer>
+ *       <button>Click Me</button>
+ *     </ResizableContainer>
+ *   );
+ * };
+ *
+ * export default createWidgetUI(MyWidgetUI, packageJson.name, packageJson.version);
+ * ```
+ */
+declare const ResizableContainer: (props: ResizableContainerProps & WrapperProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	ResizableContainer as default,
+};
+
+export {};

package/cjs/components/WidgetContainer.d.ts

@@ -0,0 +1,20 @@
+export type WrapperProps = {
+	cWidth?: number | string;
+	cHeight?: number | string;
+	noPadding?: boolean;
+	noBorderRadius?: boolean;
+};
+export type WidthLessProps = Omit<WrapperProps, "cWidth" | "cHeight"> & {
+	width?: number | string;
+	height?: number | string;
+	children: React.ReactNode;
+	className?: string;
+	style?: React.CSSProperties;
+};
+declare const Wrap: (p: WidthLessProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	Wrap as default,
+};
+
+export {};

package/cjs/components/index.d.ts

@@ -0,0 +1,85 @@
+import { CSSObject } from '@emotion/styled';
+import React$1 from 'react';
+import { CSSProperties } from 'react';
+
+export type ResizableContainerProps = {
+	css?: CSSObject;
+	minWidth?: number;
+	minHeight?: number;
+	maxWidth?: number;
+	maxHeight?: number;
+	defaultWidth?: number;
+	defaultHeight?: number;
+	children: React$1.ReactNode;
+	/**
+	 * The lockAspectRatio property is used to lock aspect ratio. Set to true to lock
+	 * the aspect ratio based on the initial size. Set to a numeric value to lock a
+	 * specific aspect ratio (such as 16/9). If set to numeric, make sure to set initial
+	 * height/width to values with correct aspect ratio. If omitted, set false.
+	 */
+	lockAspectRatio?: boolean | number;
+	/**
+	 * Callback when the component is being resized.
+	 */
+	onResize?: (width: number, height: number, originalEvent: MouseEvent | TouchEvent) => void;
+	/**
+	 * Callback when the component has been resized.
+	 */
+	onStopResize?: (width: number, height: number, originalEvent: MouseEvent | TouchEvent) => void;
+};
+export type WrapperProps = {
+	cWidth?: number | string;
+	cHeight?: number | string;
+	noPadding?: boolean;
+	noBorderRadius?: boolean;
+	className?: string;
+	style?: React$1.CSSProperties;
+};
+/**
+ * A resizable container for the widget's canvas. It implements styles to handle
+ * the widget's appearance when selected or offline.
+ *
+ * @example
+ * ```tsx
+ * import packageJson from '../package.json';
+ * import { CustomWidgetProps, components, createWidgetUI } from '@kemu-io/hs-react';
+ *
+ * const { ResizableContainer } = components;
+ *
+ * const MyWidgetUI = (props: CustomWidgetProps) => {
+ *
+ *   const handleResize = useCallback((width: number, height: number) => {
+ *     console.log('Widget resized: ', width, height);
+ *   }, []);
+ *
+ *   return (
+ *     <ResizableContainer>
+ *       <button>Click Me</button>
+ *     </ResizableContainer>
+ *   );
+ * };
+ *
+ * export default createWidgetUI(MyWidgetUI, packageJson.name, packageJson.version);
+ * ```
+ */
+export declare const ResizableContainer: (props: ResizableContainerProps & WrapperProps) => import("react/jsx-runtime").JSX.Element;
+type WrapperProps$1 = {
+	cWidth?: number | string;
+	cHeight?: number | string;
+	noPadding?: boolean;
+	noBorderRadius?: boolean;
+};
+export type WidthLessProps = Omit<WrapperProps$1, "cWidth" | "cHeight"> & {
+	width?: number | string;
+	height?: number | string;
+	children: React$1.ReactNode;
+	className?: string;
+	style?: React$1.CSSProperties;
+};
+declare const Wrap: (p: WidthLessProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	Wrap as WidgetContainer,
+};
+
+export {};

package/cjs/constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Prevents any element with this class from being used as a drag handle.
+ */
+export declare const PREVENT_DRAGGING_CLS = "no-dragging";
+/**
+ * Any child node of an element with this class will not trigger dragging.
+ */
+export declare const ABORT_CHILD_DRAGGING_CLS = "no-child-drag";
+/**
+ * Class added to widgets when they are selected via 'useDragSelection'
+ */
+export declare const WIDGET_SELECTED_CLS = "widget-selected";
+
+export {};