@nulogy/components 13.2.0 → 13.3.1

package/dist/main.js

@@ -8661,8 +8661,7 @@
         position: "absolute",
         color: theme.colors.midGrey,
         bottom: "50%",
-        transform: "translateY(50%)",
-        pointerEvents: "none"
+        transform: "translateY(50%)"
       };
     }, position);
 
@@ -29051,6 +29050,10 @@
           iconRightSize = _a$iconRightSize === void 0 ? "x3" : _a$iconRightSize,
           _a$iconLeftSize = _a.iconLeftSize,
           iconLeftSize = _a$iconLeftSize === void 0 ? "x3" : _a$iconLeftSize,
+          iconLeftTooltip = _a.iconLeftTooltip,
+          iconRightTooltip = _a.iconRightTooltip,
+          iconLeftTooltipProps = _a.iconLeftTooltipProps,
+          iconRightTooltipProps = _a.iconRightTooltipProps,
           error = _a.error,
           required = _a.required,
           labelText = _a.labelText,
@@ -29065,7 +29068,7 @@
           inputWidth = _a.inputWidth,
           variant = _a.variant,
           htmlSize = _a.htmlSize,
-          props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
+          props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "iconLeftTooltip", "iconRightTooltip", "iconLeftTooltipProps", "iconRightTooltipProps", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
 
       var componentVariant = useComponentVariant(variant);
       var theme = styled.useTheme();
@@ -29081,11 +29084,17 @@
         textAlign: prefixAlignment
       }), /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
         maxWidth: inputWidth
-      }, iconLeft && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
+      }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
+        tooltip: iconLeftTooltip
+      }, iconLeftTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
+        left: "x1",
+        icon: iconLeft,
+        size: iconLeftSize
+      })) : /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         left: "x1",
         icon: iconLeft,
         size: iconLeftSize
-      }), /*#__PURE__*/React__default["default"].createElement(StyledInput, Object.assign({
+      })), /*#__PURE__*/React__default["default"].createElement(StyledInput, Object.assign({
         paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
         paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
         "aria-invalid": error,
@@ -29096,11 +29105,17 @@
         size: htmlSize,
         variant: componentVariant,
         inputWidth: inputWidth
-      }, props)), iconRight && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
+      }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
+        tooltip: iconRightTooltip
+      }, iconRightTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
+        right: "x1",
+        icon: iconRight,
+        size: iconRightSize
+      })) : /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         right: "x1",
         icon: iconRight,
         size: iconRightSize
-      })), /*#__PURE__*/React__default["default"].createElement(Suffix, {
+      }))), /*#__PURE__*/React__default["default"].createElement(Suffix, {
         suffix: suffix,
         suffixWidth: suffixWidth,
         textAlign: suffixAlignment

package/dist/main.module.js

@@ -8644,8 +8644,7 @@ var InputIcon = styled(Icon).withConfig({
     position: "absolute",
     color: theme.colors.midGrey,
     bottom: "50%",
-    transform: "translateY(50%)",
-    pointerEvents: "none"
+    transform: "translateY(50%)"
   };
 }, position);
 
@@ -29034,6 +29033,10 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
       iconRightSize = _a$iconRightSize === void 0 ? "x3" : _a$iconRightSize,
       _a$iconLeftSize = _a.iconLeftSize,
       iconLeftSize = _a$iconLeftSize === void 0 ? "x3" : _a$iconLeftSize,
+      iconLeftTooltip = _a.iconLeftTooltip,
+      iconRightTooltip = _a.iconRightTooltip,
+      iconLeftTooltipProps = _a.iconLeftTooltipProps,
+      iconRightTooltipProps = _a.iconRightTooltipProps,
       error = _a.error,
       required = _a.required,
       labelText = _a.labelText,
@@ -29048,7 +29051,7 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
       inputWidth = _a.inputWidth,
       variant = _a.variant,
       htmlSize = _a.htmlSize,
-      props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
+      props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "iconLeftTooltip", "iconRightTooltip", "iconLeftTooltipProps", "iconRightTooltipProps", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
 
   var componentVariant = useComponentVariant(variant);
   var theme = useTheme();
@@ -29064,11 +29067,17 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
     textAlign: prefixAlignment
   }), /*#__PURE__*/React__default.createElement(InputWrapper, {
     maxWidth: inputWidth
-  }, iconLeft && /*#__PURE__*/React__default.createElement(InputIcon, {
+  }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({
+    tooltip: iconLeftTooltip
+  }, iconLeftTooltipProps), /*#__PURE__*/React__default.createElement(InputIcon, {
+    left: "x1",
+    icon: iconLeft,
+    size: iconLeftSize
+  })) : /*#__PURE__*/React__default.createElement(InputIcon, {
     left: "x1",
     icon: iconLeft,
     size: iconLeftSize
-  }), /*#__PURE__*/React__default.createElement(StyledInput, Object.assign({
+  })), /*#__PURE__*/React__default.createElement(StyledInput, Object.assign({
     paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
     paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
     "aria-invalid": error,
@@ -29079,11 +29088,17 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
     size: htmlSize,
     variant: componentVariant,
     inputWidth: inputWidth
-  }, props)), iconRight && /*#__PURE__*/React__default.createElement(InputIcon, {
+  }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({
+    tooltip: iconRightTooltip
+  }, iconRightTooltipProps), /*#__PURE__*/React__default.createElement(InputIcon, {
+    right: "x1",
+    icon: iconRight,
+    size: iconRightSize
+  })) : /*#__PURE__*/React__default.createElement(InputIcon, {
     right: "x1",
     icon: iconRight,
     size: iconRightSize
-  })), /*#__PURE__*/React__default.createElement(Suffix, {
+  }))), /*#__PURE__*/React__default.createElement(Suffix, {
     suffix: suffix,
     suffixWidth: suffixWidth,
     textAlign: suffixAlignment

package/dist/src/Input/Input.story.d.ts

@@ -47,6 +47,7 @@ export declare const WithAAffixPrefixAndSuffix: {
     };
 };
 export declare const WithAnIcon: () => React.JSX.Element;
+export declare const WithIconTooltips: () => React.JSX.Element;
 export declare const UsingRefToControlFocus: {
     (): React.JSX.Element;
     story: {

package/dist/src/Input/InputField.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
 import { IconName } from "@nulogy/icons";
+import React from "react";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { TooltipProps } from "../Tooltip/Tooltip";
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
 export interface InputFieldProps extends NativeInputProps {
     htmlSize?: number;
@@ -9,6 +10,10 @@ export interface InputFieldProps extends NativeInputProps {
     iconLeft?: IconName | "loading";
     iconRightSize?: string;
     iconLeftSize?: string;
+    iconLeftTooltip?: React.ReactNode;
+    iconRightTooltip?: React.ReactNode;
+    iconLeftTooltipProps?: Omit<TooltipProps, "tooltip">;
+    iconRightTooltipProps?: Omit<TooltipProps, "tooltip">;
     error?: boolean;
     labelText?: string;
     requirementText?: string;

package/dist/src/Table/Table.types.d.ts

@@ -1,4 +1,5 @@
-import type { Key } from "react";
+/// <reference types="react" />
+type Key = string | number;
 export type RowType = any;
 export interface CellInfoType<ColumnMetadata> {
     cellData: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "13.2.0",
+  "version": "13.3.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {