@linzjs/lui 21.0.1 → 21.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.1.0](https://github.com/linz/lui/compare/v21.0.1...v21.1.0) (2023-10-05)
+
+
+### Features
+
+* **Splitter:** add splitter from Memorials ([#1020](https://github.com/linz/lui/issues/1020)) ([4cf1430](https://github.com/linz/lui/commit/4cf1430945de48d9f858f2c89a6c331e8fc7b092))
+
 ## [21.0.1](https://github.com/linz/lui/compare/v21.0.0...v21.0.1) (2023-10-04)
 
 

package/dist/components/LuiResizableLayout/LuiResizableLayout.d.ts

@@ -6,6 +6,9 @@ export declare enum SplitPanelState {
     CLOSED_LEFT = 1,
     CLOSED_RIGHT = 2
 }
+/**
+ * @deprecated replaced by Splitter
+ */
 export declare const LuiResizableLayout: React.FC<{
     givenLeftRef?: RefObject<HTMLDivElement>;
     givenRightRef?: RefObject<HTMLDivElement>;

package/dist/components/Splitter/Control/Control.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { LuiButton } from '../../LuiButton/LuiButton';
+import './Control.scss';
+declare type ButtonProps = Partial<ComponentPropsWithRef<typeof LuiButton>>;
+declare type Props = {
+    side: 'primary' | 'secondary';
+} & ButtonProps;
+export declare const Control: React.ForwardRefExoticComponent<Pick<Props, "href" | "openInNewTab" | "level" | "type" | "size" | "disabled" | "style" | "onClick" | "name" | "title" | "data-testid" | "className" | "buttonProps" | "children" | "key" | "side"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Splitter/Control/ControlIcon.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+declare type Side = 'primary' | 'secondary';
+export declare const ControlIcon: ({ parent, side, }: {
+    side: Side;
+    parent: RefObject<HTMLButtonElement>;
+}) => JSX.Element | null;
+export {};

package/dist/components/Splitter/Separator/Separator.d.ts

@@ -0,0 +1,10 @@
+import './Separator.scss';
+import React, { ComponentProps } from 'react';
+import { Splitter } from '../Splitter';
+declare type Parts = NonNullable<ComponentProps<typeof Splitter>['parts']>['controls'];
+export declare const Separator: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    parts?: Parts;
+    ratio?: number | undefined;
+    onResized?: ((val: number) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Splitter/Splitter.d.ts

@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithRef } from 'react';
+import './Splitter.scss';
+import { LuiButton } from '../LuiButton/LuiButton';
+declare type ButtonProps = Omit<ComponentPropsWithRef<typeof LuiButton>, 'children'> & {
+    children?: React.ReactNode;
+};
+/**
+ * Container that appends a separator when the children count equals 2.
+ * It looks at HTML nodes, not React components
+ */
+export declare const Splitter: React.ForwardRefExoticComponent<{
+    ratio?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    onResized?: ((ratio: number) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    parts?: {
+        separator?: (Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }) | undefined;
+        controls?: {
+            container?: (Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+                ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+            }) | undefined;
+            primary?: ButtonProps | undefined;
+            secondary?: ButtonProps | undefined;
+        } | undefined;
+    } | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Splitter/helpers/clampSeparator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Delimits the separator position value between 0 to 100 by default.
+ * It will prioritize supplied min and max delimiters as long as they are within the 0-100 range.
+ * @param props Expects a separator value and optional min and max delimiters
+ */
+export declare const clampSeparator: (props: {
+    min?: number | undefined;
+    value: number;
+    max?: number | undefined;
+}) => number;

package/dist/components/Splitter/helpers/getKeyDownDeltaMove.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Event = Pick<React.KeyboardEvent<HTMLDivElement>, 'currentTarget' | 'key' | 'ctrlKey' | 'shiftKey' | 'metaKey' | 'altKey'>;
+/**
+ * Gets the delta % the separator should move based on key down.
+ */
+export declare const getKeyDownDeltaMove: (e: Event, valueNow: number) => number;
+export {};

package/dist/components/Splitter/helpers/getSeparatorAttributes.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+declare type Props = {
+    child: Element | null | undefined;
+    separator?: never;
+    ref?: never;
+} | {
+    child?: never;
+    separator: Element | null | undefined;
+    ref?: never;
+} | {
+    child?: never;
+    separator?: never;
+    ref?: RefObject<HTMLElement> | null | undefined;
+};
+/**
+ * Given a ref/element if finds the Separator and returns the most useful attributes
+ */
+export declare const getSeparatorAttributes: (props: Props) => {
+    valueNow: number;
+    valueMin: number;
+    valueMax: number;
+    orientation: "horizontal" | "vertical" | undefined;
+    thickness: number;
+};
+export {};

package/dist/components/Splitter/helpers/getSeparatorPosition.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Returns a value from 0 to 100 that represents the separator position from left to right.
+ * @param separatorRef Separator ref
+ * @param drag Represents mouse/touch horizontal/vertical coordinate when the user is resizing.
+ */
+export declare const getSeparatorPosition: (separatorRef: RefObject<HTMLDivElement>, drag: number) => number;

package/dist/components/Splitter/helpers/useForkRef.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type ForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const useForkRef: <T>(forwardedRef: ForwardedRef<T>) => import("react").RefObject<T>;
+export {};

package/dist/components/Splitter/helpers/useMoveSeparator.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * It captures window events to report a new position.
+ * Provides necessary handlers for separator.
+ */
+export declare const useMoveSeparator: (separator: RefObject<HTMLDivElement>, resize: (val: number) => void) => {
+    onMouseDown: () => void;
+    onTouchStart: () => void;
+    onTouchEnd: () => void;
+    onBlur: () => void;
+};

package/dist/components/Splitter/helpers/useShowSeparator.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Returns true if the splitter container has 3 child nodes, including the separator.
+ * The consumer must render 2 element nodes (not components), to be able to split.
+ * @param separatorRef Separator ref
+ */
+export declare const useShowSeparator: (separatorRef: RefObject<HTMLDivElement>) => void;

package/dist/components/Splitter/helpers/useValueSeparator.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+/**
+ * Ensures valueNow is set to a valid value within its allowed boundaries.
+ * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ */
+export declare const useValueSeparator: ({ separator, ratio, onResized, boundaries: { min, max }, }: {
+    ratio?: number | undefined;
+    onResized?: ((newVal: number) => void) | undefined;
+    separator: RefObject<HTMLDivElement>;
+    boundaries: {
+        min: number;
+        max: number;
+    };
+}) => {
+    setValueNow: (val?: number) => void;
+};

package/dist/components/Splitter/useSplitterRef.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const useSplitterRef: () => {
+    ref: RefObject<HTMLDivElement>;
+    setRatio: (val: number) => void;
+};

package/dist/index.d.ts

@@ -65,3 +65,5 @@ export { ToolbarItem, ToolbarItemProps, ToolbarItemSeparator, } from './componen
 export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';
 export { useEscapeFunction, usePageClickFunction, } from './components/common/Hooks';
 export { LuiCounter } from './components/LuiCounter/LuiCounter';
+export { Splitter } from './components/Splitter/Splitter';
+export { useSplitterRef } from './components/Splitter/useSplitterRef';