@linzjs/lui 21.25.0 → 21.26.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.26.0](https://github.com/linz/lui/compare/v21.25.0...v21.26.0) (2024-04-11)
+
+
+### Features
+
+* **Splitter:** add boundaries as px ([#1107](https://github.com/linz/lui/issues/1107)) ([6551d5a](https://github.com/linz/lui/commit/6551d5ade05966d514a9e1202d3f7c4fcb325d4d))
+
 # [21.25.0](https://github.com/linz/lui/compare/v21.24.4...v21.25.0) (2024-04-11)
 
 

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

@@ -6,5 +6,8 @@ export declare const Separator: React.ForwardRefExoticComponent<Pick<React.Detai
     parts?: Parts;
     ratio?: number | undefined;
     onResized?: ((val: number) => void) | undefined;
+    min?: number | `${number}px` | undefined;
+    max?: number | `${number}px` | undefined;
+    startAt?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,30 +1,44 @@
 import React, { ComponentPropsWithRef } from 'react';
+import { HTMLAttributes } from 'react';
 import './Splitter.scss';
 import { LuiButton } from '../LuiButton/LuiButton';
 declare type ButtonProps = Omit<ComponentPropsWithRef<typeof LuiButton>, 'children'> & {
     children?: React.ReactNode;
 };
+declare type BoundaryPx = {
+    min?: `${number}px`;
+    max?: `${number}px`;
+};
+declare type BoundaryNum = {
+    min?: number;
+    max?: number;
+};
+declare type BoundaryProps = BoundaryPx | BoundaryNum;
+declare type Start = number | '1st-collapsed' | '2nd-collapsed';
+declare type Controlled = {
+    ratio?: number;
+    startAt?: never;
+};
+declare type Uncontrolled = {
+    ratio?: never;
+    startAt?: Start;
+};
+declare type RatioProps = Controlled | Uncontrolled;
+declare type Props = {
+    onResized?: (ratio: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    parts?: {
+        separator?: ComponentPropsWithRef<'div'>;
+        controls?: {
+            container?: ComponentPropsWithRef<'span'>;
+            primary?: ButtonProps;
+            secondary?: ButtonProps;
+        };
+    };
+} & HTMLAttributes<HTMLDivElement> & RatioProps & BoundaryProps;
 /**
  * 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 declare const Splitter: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Splitter } from '../Splitter';
+import './RangeAsPx.scss';
+declare type SplitterProps = ComponentProps<typeof Splitter>;
+declare type PixelProps = SplitterProps & {
+    unit?: '%' | 'px';
+};
+export declare const RangeAsPx: ({ unit, ...rest }: PixelProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare type SectionProps = JSX.IntrinsicElements['section'];
+export declare const HorizontalSection: (props: SectionProps) => JSX.Element;
+export declare const VerticalSection: (props: SectionProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { Splitter } from '../Splitter';
+declare type Props = Pick<ComponentProps<typeof Splitter>, 'min' | 'max'>;
+declare type Result = 'keep-secondary' | 'keep-primary' | 'keep-both';
+/**
+ * Given boundaries passed as prop, it defines how the grid column/row template will be arranged.
+ * and whether the separator will be positioned using right or left absolute values (top or bottom for horizontal).
+ * It will use a data- attribute to store this prop derived information for later processing.
+ */
+export declare const setDataBoundary: (props: Props) => {
+    "data-boundary": Result;
+};
+/**
+ * Util to get what grid arrangement needs to be used to avoid jumps/flashes.
+ * The return value is derived from the Splitter props, and stored in a data- attribute.
+ */
+export declare const getDataBoundary: (separator: Element) => Result | undefined;
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * It will calculate the best grid arrangement, based on the min/max props passed to the Splitter.
+ * All grid options work. The preference `1fr XXpx` over `(width - XXpx) 1fr` depends on the type of boundary
+ * to avoid calculation of position when the window is being resized while trying to retain the collapsed state
+ * on a min/max value fixed in pixels (e.g. 200px). Such calculation adds unnecessary lagging on the separator
+ * to catch up. This function aims to avoid such lagging during resizing.
+ * primary relates to top/left
+ * secondary relates to right/bottom
+ */
+export declare const getGridTemplate: (separator: HTMLDivElement) => {
+    grid: string;
+    primary: string;
+    secondary: string;
+};

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

@@ -21,5 +21,6 @@ export declare const getSeparatorAttributes: (props: Props) => {
     valueMax: number;
     orientation: "horizontal" | "vertical" | undefined;
     thickness: number;
+    boundary: ("keep-secondary" | "keep-primary" | "keep-both") | undefined;
 };
 export {};

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

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const transition: (separator: RefObject<HTMLDivElement>) => {
+    stop: () => void;
+    resume: () => void;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type Boundary = {
+    min?: number | `${number}px`;
+    max?: number | `${number}px`;
+};
+/**
+ * Maps min and max values if they are provided in 'XXXpx' format.
+ */
+export declare const useBoundary: (separator: React.RefObject<HTMLDivElement>, boundaries: Boundary) => {
+    min: number;
+    max: number;
+};
+export {};

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

@@ -5,7 +5,7 @@ import { RefObject } from 'react';
  * It's possible that multiple events trigger setValueNow simultaneosly with the same value.
  * This multiple calls are expected, and setValueNow will resize only once.
  */
-export declare const useValueSeparator: ({ separator, ratio, onResized, boundaries: { min, max }, }: {
+export declare const useValueSeparator: ({ separator, ratio, onResized, boundaries: { min: minProp, max: maxProp }, startAt, }: {
     ratio?: number | undefined;
     onResized?: ((newVal: number) => void) | undefined;
     separator: RefObject<HTMLDivElement>;
@@ -13,6 +13,10 @@ export declare const useValueSeparator: ({ separator, ratio, onResized, boundari
         min: number;
         max: number;
     };
+    startAt?: number | undefined;
 }) => {
-    setValueNow: (val?: number) => void;
+    setValueNow: (val?: number, config?: {
+        min?: number | undefined;
+        max?: number | undefined;
+    } | undefined) => void;
 };

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

@@ -2,4 +2,7 @@ import { RefObject } from 'react';
 /**
  * Calls setValueNow when the separator attributes change.
  */
-export declare const useValueSeparatorEffects: (setValueNow: (val?: number) => void, separator: RefObject<HTMLDivElement>, ratio?: number) => void;
+export declare const useValueSeparatorEffects: (setValueNow: (val?: number, config?: {
+    min?: number;
+    max?: number;
+}) => void, separator: RefObject<HTMLDivElement>, ratio?: number, startAt?: number) => void;