@linzjs/lui 21.36.0 → 21.38.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [21.38.0](https://github.com/linz/lui/compare/v21.37.0...v21.38.0) (2024-07-01)
+
+
+### Features
+
+* **ColorPalette:** created a colour palette ([#1126](https://github.com/linz/lui/issues/1126)) ([816b7ad](https://github.com/linz/lui/commit/816b7adaaed2f5ac66c256dd184f1a009c6de4d3))
+
+# [21.37.0](https://github.com/linz/lui/compare/v21.36.0...v21.37.0) (2024-07-01)
+
+
+### Features
+
+* **LuiModalV2:** trigger release ([#1129](https://github.com/linz/lui/issues/1129)) ([a914f10](https://github.com/linz/lui/commit/a914f10d05d070d40cda00b30aecab808c27ffe2))
+* **LuiModalV2:** Update modals UI ([#1127](https://github.com/linz/lui/issues/1127)) ([05d3ae5](https://github.com/linz/lui/commit/05d3ae571ff52dedabfc93ec4a056a0d0b3fe508))
+
 # [21.36.0](https://github.com/linz/lui/compare/v21.35.0...v21.36.0) (2024-07-01)
 
 

package/dist/components/LuiColourPicker/ColorInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './ColorPalette.scss';
+export declare const ColorInputGroup: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorInput: React.ForwardRefExoticComponent<{
+    name: string;
+    color: string;
+    description?: string | undefined;
+    label?: Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "aria-label" | "htmlFor"> | undefined;
+} & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "id" | "name" | "type" | "value"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/LuiColourPicker/ColorPalette.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './ColorPalette.scss';
+/**
+ * @description Default colour palette template component using predetermined colours.
+ * To use custom colours, refer to the ColorInput and ColorInputGroup components.
+ * @param selected - The currently selected colour.
+ * @param onSelect - Callback function to handle the selected colour.
+ * @param name - The name of the colour picker.
+ */
+export declare const ColorPalette: React.ForwardRefExoticComponent<{
+    selected?: string | undefined;
+    onSelect: (color: string) => void;
+    name?: string | undefined;
+} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/LuiColourPicker/ColourPaletteConstants.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultColours: Array<{
+    color: string;
+    description: string;
+}>;
+export declare const customColoursOne: Array<{
+    color: string;
+    description: string;
+}>;

package/dist/components/LuiModal/LuiAlertModalV2.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { LuiModalV2Props } from './LuiModalV2';
+export declare type LuiAlertModalLevel = 'success' | 'info' | 'warning' | 'error';
+export declare type LuiAlertModalV2Props = Omit<LuiModalV2Props, 'headingIcon'> & {
+    level: LuiAlertModalLevel;
+};
+export declare const LuiAlertModalV2: FC<PropsWithChildren<LuiAlertModalV2Props>>;

package/dist/components/LuiModal/LuiModal.d.ts

@@ -13,10 +13,19 @@ interface ILuiModal {
     appendToElement?: () => HTMLElement;
     headerStyle?: 'light' | 'default';
 }
+/**
+ * @deprecated this is replaced by `LuiModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 export declare const LuiModal: React.FC<React.PropsWithChildren<ILuiModal>>;
+/**
+ * @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 export declare const LuiAlertModal: React.FC<React.PropsWithChildren<{
     level: 'success' | 'info' | 'warning' | 'error';
 } & ILuiModal>>;
+/**
+ * @deprecated this is replaced by `LuiModalV2.Buttons`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 export declare const LuiAlertModalButtons: React.FC<React.PropsWithChildren<unknown>>;
 interface IModalHeader {
     headingText?: string;
@@ -24,5 +33,8 @@ interface IModalHeader {
     onClose?: () => void;
     style?: 'light' | 'default';
 }
+/**
+ * @deprecated this is deprecated alongside `LuiModal`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 export declare const LuiModalHeader: React.FC<React.PropsWithChildren<IModalHeader>>;
 export {};

package/dist/components/LuiModal/LuiModalV2.d.ts

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react';
+import { LuiIconProps } from '../LuiIcon/LuiIcon';
+export declare type LuiModalV2Props = {
+    key?: string;
+    /** Default `true` */
+    shouldCloseOnOverlayClick?: boolean;
+    /** Default `true` */
+    shouldCloseOnEsc?: boolean | 'use-keyup';
+    onClose?: () => void | Promise<void>;
+    showCloseButton?: boolean;
+    className?: string;
+    /** If set to true, the modal will take the full screen width. Default `false` */
+    maxWidth?: boolean;
+    headingText?: string;
+    headingIcon?: LuiIconProps;
+    helpLink?: string | (() => void | Promise<void>);
+    isLoading?: boolean;
+    /** Sets the overlay to white. This is only to be used for situations when the user is working in a component and there is benefit to hiding the surrounding page. An example is editing types of instruments in the Dealings flow in LOL. */
+    lowContrast?: boolean;
+    /** By default, the modal autofocuses the first `input` or `button` inside it. Set this prop to `true` to disable that behaviour. Default `false`. This is kept from LuiModal "V1" for backwards compatibility. */
+    preventAutoFocus?: boolean;
+    /** By default, the modal portal will be appended to the document's body, but we might need to append it to another element. This is passed the React Modal `parentSelector` prop. */
+    appendToElement?: () => HTMLElement;
+};
+/** Implements the [updated modal design system](https://www.figma.com/design/E7g3n5ziI7bR8MisISayia/FigLUI?node-id=9924-54717&t=q2r6Gct1cKGP9Q5B-0), keeping the same api as `LuiModal` as much as possible. */
+export declare const LuiModalV2: {
+    (props: PropsWithChildren<LuiModalV2Props>): JSX.Element;
+    Buttons: React.FC<React.PropsWithChildren<{
+        className?: string | undefined;
+    }>>;
+    HeaderTitle: React.FC<React.PropsWithChildren<{
+        className?: string | undefined;
+    }>>;
+};

package/dist/components/common/Hooks.d.ts

@@ -4,7 +4,7 @@
  *
  * @param onEscape the handler function
  */
-export declare const useEscapeFunction: (onEscape: () => void) => void;
+export declare const useEscapeFunction: (onEscape: (e: KeyboardEvent) => void | Promise<void>, trigger?: 'keyup' | 'keydown') => void;
 /**
  * A hook which allows handling of click event anywhere on the page.
  * Provides a way of handling clicks done inside or outside the element bound to the returned react ref.

package/dist/hooks/useClickedOutsideElement.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MutableRefObject, RefObject } from 'react';
 /**
  * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
  * usage:
@@ -11,4 +11,4 @@ import React from 'react';
   return <button ref={refElement}>Click Me!</button>;
  ```
  */
-export declare function useClickedOutsideElement(refElement: React.RefObject<HTMLElement>, handleClickOutside: CallableFunction): void;
+export declare function useClickedOutsideElement(refElement: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, handleClickOutside: CallableFunction): void;

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export * from './components/LuiHeaderMenu/LuiHeaderMenus';
 export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
+export { LuiModalV2, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
+export { LuiAlertModalV2, type LuiAlertModalLevel, type LuiAlertModalV2Props, } from './components/LuiModal/LuiAlertModalV2';
 export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
 export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';
 export { type ISearchMenuOption, type ILuiSearchBoxProps, LuiSearchBox, } from './components/LuiSearchBox/LuiSearchBox';
@@ -72,5 +74,7 @@ export { LuiPagination } from './components/LuiPagination/LuiPagination';
 export { Splitter } from './components/Splitter/Splitter';
 export { useSplitterRef } from './components/Splitter/useSplitterRef';
 export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
+export { ColorPalette } from './components/LuiColourPicker/ColorPalette';
+export { ColorInput, ColorInputGroup, } from './components/LuiColourPicker/ColorInput';
 export { useToast } from './components/Toast';
 export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';