@nulogy/components 13.2.0 → 13.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/main.js +22 -7
  2. package/dist/main.module.js +22 -7
  3. package/dist/src/Input/Input.story.d.ts +1 -0
  4. package/dist/src/Input/InputField.d.ts +6 -1
  5. package/package.json +1 -1
package/dist/main.js CHANGED
@@ -8661,8 +8661,7 @@
8661
8661
  position: "absolute",
8662
8662
  color: theme.colors.midGrey,
8663
8663
  bottom: "50%",
8664
- transform: "translateY(50%)",
8665
- pointerEvents: "none"
8664
+ transform: "translateY(50%)"
8666
8665
  };
8667
8666
  }, position);
8668
8667
 
@@ -29051,6 +29050,10 @@
29051
29050
  iconRightSize = _a$iconRightSize === void 0 ? "x3" : _a$iconRightSize,
29052
29051
  _a$iconLeftSize = _a.iconLeftSize,
29053
29052
  iconLeftSize = _a$iconLeftSize === void 0 ? "x3" : _a$iconLeftSize,
29053
+ iconLeftTooltip = _a.iconLeftTooltip,
29054
+ iconRightTooltip = _a.iconRightTooltip,
29055
+ iconLeftTooltipProps = _a.iconLeftTooltipProps,
29056
+ iconRightTooltipProps = _a.iconRightTooltipProps,
29054
29057
  error = _a.error,
29055
29058
  required = _a.required,
29056
29059
  labelText = _a.labelText,
@@ -29065,7 +29068,7 @@
29065
29068
  inputWidth = _a.inputWidth,
29066
29069
  variant = _a.variant,
29067
29070
  htmlSize = _a.htmlSize,
29068
- props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
29071
+ 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"]);
29069
29072
 
29070
29073
  var componentVariant = useComponentVariant(variant);
29071
29074
  var theme = styled.useTheme();
@@ -29081,11 +29084,17 @@
29081
29084
  textAlign: prefixAlignment
29082
29085
  }), /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
29083
29086
  maxWidth: inputWidth
29084
- }, iconLeft && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29087
+ }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
29088
+ tooltip: iconLeftTooltip
29089
+ }, iconLeftTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29090
+ left: "x1",
29091
+ icon: iconLeft,
29092
+ size: iconLeftSize
29093
+ })) : /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29085
29094
  left: "x1",
29086
29095
  icon: iconLeft,
29087
29096
  size: iconLeftSize
29088
- }), /*#__PURE__*/React__default["default"].createElement(StyledInput, Object.assign({
29097
+ })), /*#__PURE__*/React__default["default"].createElement(StyledInput, Object.assign({
29089
29098
  paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
29090
29099
  paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
29091
29100
  "aria-invalid": error,
@@ -29096,11 +29105,17 @@
29096
29105
  size: htmlSize,
29097
29106
  variant: componentVariant,
29098
29107
  inputWidth: inputWidth
29099
- }, props)), iconRight && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29108
+ }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, Object.assign({
29109
+ tooltip: iconRightTooltip
29110
+ }, iconRightTooltipProps), /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29111
+ right: "x1",
29112
+ icon: iconRight,
29113
+ size: iconRightSize
29114
+ })) : /*#__PURE__*/React__default["default"].createElement(InputIcon, {
29100
29115
  right: "x1",
29101
29116
  icon: iconRight,
29102
29117
  size: iconRightSize
29103
- })), /*#__PURE__*/React__default["default"].createElement(Suffix, {
29118
+ }))), /*#__PURE__*/React__default["default"].createElement(Suffix, {
29104
29119
  suffix: suffix,
29105
29120
  suffixWidth: suffixWidth,
29106
29121
  textAlign: suffixAlignment
package/dist/main.module.js CHANGED
@@ -8644,8 +8644,7 @@ var InputIcon = styled(Icon).withConfig({
8644
8644
  position: "absolute",
8645
8645
  color: theme.colors.midGrey,
8646
8646
  bottom: "50%",
8647
- transform: "translateY(50%)",
8648
- pointerEvents: "none"
8647
+ transform: "translateY(50%)"
8649
8648
  };
8650
8649
  }, position);
8651
8650
 
@@ -29034,6 +29033,10 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
29034
29033
  iconRightSize = _a$iconRightSize === void 0 ? "x3" : _a$iconRightSize,
29035
29034
  _a$iconLeftSize = _a.iconLeftSize,
29036
29035
  iconLeftSize = _a$iconLeftSize === void 0 ? "x3" : _a$iconLeftSize,
29036
+ iconLeftTooltip = _a.iconLeftTooltip,
29037
+ iconRightTooltip = _a.iconRightTooltip,
29038
+ iconLeftTooltipProps = _a.iconLeftTooltipProps,
29039
+ iconRightTooltipProps = _a.iconRightTooltipProps,
29037
29040
  error = _a.error,
29038
29041
  required = _a.required,
29039
29042
  labelText = _a.labelText,
@@ -29048,7 +29051,7 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
29048
29051
  inputWidth = _a.inputWidth,
29049
29052
  variant = _a.variant,
29050
29053
  htmlSize = _a.htmlSize,
29051
- props = __rest$3(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
29054
+ 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"]);
29052
29055
 
29053
29056
  var componentVariant = useComponentVariant(variant);
29054
29057
  var theme = useTheme();
@@ -29064,11 +29067,17 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
29064
29067
  textAlign: prefixAlignment
29065
29068
  }), /*#__PURE__*/React__default.createElement(InputWrapper, {
29066
29069
  maxWidth: inputWidth
29067
- }, iconLeft && /*#__PURE__*/React__default.createElement(InputIcon, {
29070
+ }, iconLeft && (iconLeftTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({
29071
+ tooltip: iconLeftTooltip
29072
+ }, iconLeftTooltipProps), /*#__PURE__*/React__default.createElement(InputIcon, {
29073
+ left: "x1",
29074
+ icon: iconLeft,
29075
+ size: iconLeftSize
29076
+ })) : /*#__PURE__*/React__default.createElement(InputIcon, {
29068
29077
  left: "x1",
29069
29078
  icon: iconLeft,
29070
29079
  size: iconLeftSize
29071
- }), /*#__PURE__*/React__default.createElement(StyledInput, Object.assign({
29080
+ })), /*#__PURE__*/React__default.createElement(StyledInput, Object.assign({
29072
29081
  paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
29073
29082
  paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
29074
29083
  "aria-invalid": error,
@@ -29079,11 +29088,17 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
29079
29088
  size: htmlSize,
29080
29089
  variant: componentVariant,
29081
29090
  inputWidth: inputWidth
29082
- }, props)), iconRight && /*#__PURE__*/React__default.createElement(InputIcon, {
29091
+ }, props)), iconRight && (iconRightTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({
29092
+ tooltip: iconRightTooltip
29093
+ }, iconRightTooltipProps), /*#__PURE__*/React__default.createElement(InputIcon, {
29094
+ right: "x1",
29095
+ icon: iconRight,
29096
+ size: iconRightSize
29097
+ })) : /*#__PURE__*/React__default.createElement(InputIcon, {
29083
29098
  right: "x1",
29084
29099
  icon: iconRight,
29085
29100
  size: iconRightSize
29086
- })), /*#__PURE__*/React__default.createElement(Suffix, {
29101
+ }))), /*#__PURE__*/React__default.createElement(Suffix, {
29087
29102
  suffix: suffix,
29088
29103
  suffixWidth: suffixWidth,
29089
29104
  textAlign: suffixAlignment
package/dist/src/Input/Input.story.d.ts CHANGED
@@ -47,6 +47,7 @@ export declare const WithAAffixPrefixAndSuffix: {
47
47
  };
48
48
  };
49
49
  export declare const WithAnIcon: () => React.JSX.Element;
50
+ export declare const WithIconTooltips: () => React.JSX.Element;
50
51
  export declare const UsingRefToControlFocus: {
51
52
  (): React.JSX.Element;
52
53
  story: {
package/dist/src/Input/InputField.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import React from "react";
2
1
  import { IconName } from "@nulogy/icons";
2
+ import React from "react";
3
3
  import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
4
+ import { TooltipProps } from "../Tooltip/Tooltip";
4
5
  type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
5
6
  export interface InputFieldProps extends NativeInputProps {
6
7
  htmlSize?: number;
@@ -9,6 +10,10 @@ export interface InputFieldProps extends NativeInputProps {
9
10
  iconLeft?: IconName | "loading";
10
11
  iconRightSize?: string;
11
12
  iconLeftSize?: string;
13
+ iconLeftTooltip?: React.ReactNode;
14
+ iconRightTooltip?: React.ReactNode;
15
+ iconLeftTooltipProps?: Omit<TooltipProps, "tooltip">;
16
+ iconRightTooltipProps?: Omit<TooltipProps, "tooltip">;
12
17
  error?: boolean;
13
18
  labelText?: string;
14
19
  requirementText?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nulogy/components",
3
- "version": "13.2.0",
3
+ "version": "13.3.0",
4
4
  "description": "Component library for the Nulogy Design System - http://nulogy.design",
5
5
  "private": false,
6
6
  "publishConfig": {