@linzjs/lui 21.0.1 → 21.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.1.1](https://github.com/linz/lui/compare/v21.1.0...v21.1.1) (2023-10-13)
+
+
+### Bug Fixes
+
+* strip out those pesky clip-paths with duplicate ids when generating svgs ([#1024](https://github.com/linz/lui/issues/1024)) ([dbee9cc](https://github.com/linz/lui/commit/dbee9cca5c6422f5587aab712151401e8863b95d))
+
+# [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/assets/svg-content.tsx

@@ -390,14 +390,9 @@ iconMap['ic_basemap_off'] = (
 
 iconMap['ic_blackwhite_greyscale'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10Zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -421,14 +416,9 @@ iconMap['ic_cancel_clear'] = (
 
 iconMap['ic_cancel_outline'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -567,14 +557,9 @@ iconMap['ic_dealings'] = (
 
 iconMap['ic_delete_forever'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M14.12 10.47 12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12-1.41-1.41ZM15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5ZM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12ZM8 9h8v10H8V9Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -920,14 +905,9 @@ iconMap['ic_lock'] = (
 
 iconMap['ic_lock_alt'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2ZM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6Zm9 14H6V10h12v10Zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1031,14 +1011,9 @@ iconMap['ic_notice_of_change'] = (
 
 iconMap['ic_notifications'] = (
   <svg viewBox="0 0 24 24">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2Zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2Zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1064,15 +1039,10 @@ iconMap['ic_order_history'] = (
 
 iconMap['ic_package'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2Zm-1 18H5V9h14v11Zm1-13H4V4h16v3Z" />
       <path d="M15 12H9v2h6v-2Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1148,14 +1118,9 @@ iconMap['ic_placeholder'] = (
 
 iconMap['ic_plus_one'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M10 8H8v4H4v2h4v4h2v-4h4v-2h-4V8Zm4.5-1.92V7.9l2.5-.5V18h2V5l-4.5 1.08Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1220,14 +1185,9 @@ iconMap['ic_refresh'] = (
 
 iconMap['ic_regenerate'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M12 6v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79a.5.5 0 0 0-.85.36V4c-4.42 0-8 3.58-8 8 0 1.04.2 2.04.57 2.95.27.67 1.13.85 1.64.34.27-.27.38-.68.23-1.04C6.15 13.56 6 12.79 6 12c0-3.31 2.69-6 6-6Zm5.79 2.71c-.27.27-.38.69-.23 1.04.28.7.44 1.46.44 2.25 0 3.31-2.69 6-6 6v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79a.5.5 0 0 0 .85-.35V20c4.42 0 8-3.58 8-8 0-1.04-.2-2.04-.57-2.95-.27-.67-1.13-.85-1.64-.34Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1263,15 +1223,10 @@ iconMap['ic_requisitions'] = (
 
 iconMap['ic_restore'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6Zm4 18H6V4h7.17L18 8.83V20Z" />
       <path d="m16.72 9.4-1.17 1.17a4.477 4.477 0 0 0-3.77-2.07c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5a4.51 4.51 0 0 0 4.12-2.7h-1.55a3.14 3.14 0 0 1-2.58 1.35 3.15 3.15 0 1 1 0-6.3c1.21 0 2.27.7 2.79 1.71L13.12 13h3.6V9.4Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 
@@ -1443,14 +1398,9 @@ iconMap['ic_unlink'] = (
 
 iconMap['ic_unlock'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#a)">
+    <g>
       <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h2c0-1.66 1.34-3 3-3s3 1.34 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2Zm0 12H6V10h12v10Zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Z" />
     </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
   </svg>
 );
 

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';