@linzjs/lui 17.49.0 → 17.49.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [17.49.2](https://github.com/linz/lui/compare/v17.49.1...v17.49.2) (2023-04-04)
+
+
+### Bug Fixes
+
+* expose refs to allow for using tooltips with icons and checkboxes ([3c5ebd3](https://github.com/linz/lui/commit/3c5ebd3580547029d4b54647d766e0bd9ea7afa0))
+
+## [17.49.1](https://github.com/linz/lui/compare/v17.49.0...v17.49.1) (2023-04-04)
+
+
+### Bug Fixes
+
+* do not use React's PropsWithChildren and make message optional so people can just use the standard Tippy property "content" ([a750a47](https://github.com/linz/lui/commit/a750a47a1f46079686ae0d186a3be0ccf87207f3))
+* ensure backward compatibility ([ffbb5ab](https://github.com/linz/lui/commit/ffbb5ab631a3ae9aa5a01941d29ac5043409fe7b))
+* style paragraphs in tooltip ([1d4d3ad](https://github.com/linz/lui/commit/1d4d3ad717cc2372c883d7a946c0a7a9d6e251e3))
+
 # [17.49.0](https://github.com/linz/lui/compare/v17.48.0...v17.49.0) (2023-04-04)
 
 

package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.d.ts

@@ -12,4 +12,4 @@ export interface LuiCheckboxProps {
     titleAttribute?: string;
     mandatory?: boolean;
 }
-export declare const LuiCheckboxInput: (props: LuiCheckboxProps) => JSX.Element;
+export declare const LuiCheckboxInput: React.ForwardRefExoticComponent<LuiCheckboxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/LuiIcon/LuiIcon.d.ts

@@ -1,5 +1,5 @@
 import { ICONS } from '../../assets/svg-content';
-import { InputHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 export declare type IconSize = keyof typeof ICON_SIZES;
 export declare type IconStatus = keyof typeof ICON_STATUS;
 export declare type IconName = keyof typeof ICONS;
@@ -32,4 +32,4 @@ export declare const ICON_STATUS: {
     interactive: string;
     disabled: string;
 };
-export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, color, }: LuiIconProps) => JSX.Element | null;
+export declare const LuiIcon: React.ForwardRefExoticComponent<LuiIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/LuiTooltip/LuiTooltip.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+/// <reference types="react" />
 import { TippyProps } from '@tippyjs/react';
-export declare type ILuiTooltipProperties = PropsWithChildren<TippyProps> & {
-    message: TippyProps['content'];
+export declare type ILuiTooltipProperties = TippyProps & {
+    message?: TippyProps['content'];
     mode?: 'default' | 'info' | 'error';
 };
 export declare const LuiTooltip: (props: ILuiTooltipProperties) => JSX.Element;

package/dist/index.js

@@ -570,8 +570,8 @@ var ICON_STATUS = {
     interactive: 'LuiIcon--interactive',
     disabled: 'LuiIcon--disabled'
 };
-var LuiIcon = function (_a) {
-    var name = _a.name, className = _a.className, _b = _a.size, size = _b === void 0 ? 'ns' : _b, title = _a.title, alt = _a.alt, _c = _a.status, status = _c === void 0 ? 'none' : _c, spanProps = _a.spanProps, color = _a.color;
+var LuiIcon = React.forwardRef(function (props, ref) {
+    var name = props.name, className = props.className, _a = props.size, size = _a === void 0 ? 'ns' : _a, title = props.title, alt = props.alt, _b = props.status, status = _b === void 0 ? 'none' : _b, spanProps = props.spanProps, color = props.color;
     var iconSVG = ICONS[name];
     if (!iconSVG) {
         console.warn("<LuiIcon>: No icon found for: ".concat(iconSVG));
@@ -579,8 +579,8 @@ var LuiIcon = function (_a) {
     }
     var customStyle = color
         ? __assign(__assign({}, spanProps === null || spanProps === void 0 ? void 0 : spanProps.style), { fill: color }) : spanProps === null || spanProps === void 0 ? void 0 : spanProps.style;
-    return (React__namespace.createElement("span", __assign({ className: clsx('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps, { style: customStyle }), iconSVG));
-};
+    return (React__default["default"].createElement("span", __assign({ ref: ref, className: clsx('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps, { style: customStyle }), iconSVG));
+});
 
 function getMaterialIconForLevel(level) {
     switch (level) {
@@ -28181,10 +28181,10 @@ var LuiTextInput = React.forwardRef(function (props, ref) {
                 props.warning)))));
 });
 
-var LuiCheckboxInput = function (props) {
+var LuiCheckboxInput = React.forwardRef(function (props, ref) {
     var _a;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
-    return (React__default["default"].createElement("div", { className: clsx('LuiCheckboxInput', {
+    return (React__default["default"].createElement("div", { ref: ref, className: clsx('LuiCheckboxInput', {
             'LuiCheckboxInput--isChecked': props.isChecked,
             'LuiCheckboxInput--hasError': !!props.error,
             'LuiCheckboxInput--isDisabled': !!props.isDisabled
@@ -28196,7 +28196,7 @@ var LuiCheckboxInput = function (props) {
                 props.label,
                 React__default["default"].createElement(LuiIcon, { name: props.isIndeterminate ? 'ic_zoom_out' : 'ic_check', size: "md", alt: props.isIndeterminate ? 'Indeterminate Check' : 'Check', className: "LuiCheckboxInput-labelCheck", title: props.titleAttribute }))),
         props.error && (React__default["default"].createElement(LuiError, { className: "LuiCheckboxInput", error: props.error }))));
-};
+});
 
 var LuiFileInputBox = function (props) {
     var _a = React.useState(), file = _a[0], setFile = _a[1];
@@ -60178,8 +60178,9 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 var Tippy = index;
 
 var LuiTooltip = function (props) {
-    var children = props.children, content = props.content, message = props.message, placement = props.placement, offset = props.offset, _a = props.mode, mode = _a === void 0 ? 'default' : _a, plugins = props.plugins, arrow = props.arrow, className = props.className, rest = __rest(props, ["children", "content", "message", "placement", "offset", "mode", "plugins", "arrow", "className"]);
-    var tippyProps = __assign(__assign({}, rest), { content: content !== null && content !== void 0 ? content : message, theme: mode, placement: placement !== null && placement !== void 0 ? placement : 'bottom', offset: offset !== null && offset !== void 0 ? offset : [0, 18], className: "LuiTooltip ".concat(className !== null && className !== void 0 ? className : ''), arrow: arrow !== null && arrow !== void 0 ? arrow : false, plugins: __spreadArray(__spreadArray([], (plugins || []), true), [followCursor], false) });
+    var _a;
+    var children = props.children, _b = props.content, content = _b === void 0 ? props.message : _b, _c = props.theme, theme = _c === void 0 ? (_a = props.mode) !== null && _a !== void 0 ? _a : 'default' : _c, _d = props.offset, offset = _d === void 0 ? [0, 18] : _d, _e = props.arrow, arrow = _e === void 0 ? false : _e, plugins = props.plugins, rest = __rest(props, ["children", "content", "theme", "offset", "arrow", "plugins"]);
+    var tippyProps = __assign(__assign({}, rest), { content: content, theme: theme, offset: offset, arrow: arrow, plugins: __spreadArray(__spreadArray([], (plugins || []), true), [followCursor], false) });
     return React__default["default"].createElement(Tippy, __assign({}, tippyProps), children);
 };