@nulogy/components 15.1.1 → 15.1.3

package/dist/main.js

@@ -52673,9 +52673,6 @@
       var value = _a.value,
         _onChange = _a.onChange,
         defaultValue = _a.defaultValue,
-        labelText = _a.labelText,
-        requirementText = _a.requirementText,
-        helpText = _a.helpText,
         disabled = _a.disabled,
         errorMessage = _a.errorMessage,
         errorList = _a.errorList,
@@ -52703,7 +52700,7 @@
         _a$closeMenuOnSelect = _a.closeMenuOnSelect,
         closeMenuOnSelect = _a$closeMenuOnSelect === void 0 ? true : _a$closeMenuOnSelect,
         noOptionsMessage = _a.noOptionsMessage,
-        props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+        props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
       var _useTranslation = useTranslation(),
         t = _useTranslation.t;
       var variant = useComponentVariant();
@@ -52715,6 +52712,16 @@
         return calcOptionsLength(options);
       }, [options]);
       var isWindowed = optionsLength >= windowThreshold;
+      var labelText = props.labelText,
+        requirementText = props.requirementText,
+        helpText = props.helpText,
+        hint = props.hint;
+      var fieldLabelProps = {
+        labelText: labelText,
+        requirementText: requirementText,
+        helpText: helpText,
+        hint: hint
+      };
       noOptionsMessage || (noOptionsMessage = function noOptionsMessage() {
         return t("no options");
       });
@@ -52729,11 +52736,7 @@
         maxHeight: maxHeight,
         windowed: options.length > windowThreshold
       });
-      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
-        labelText: labelText,
-        requirementText: requirementText,
-        helpText: helpText
-      }, /*#__PURE__*/React__default["default"].createElement(StateManagedSelect$1, Object.assign({
+      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps), /*#__PURE__*/React__default["default"].createElement(StateManagedSelect$1, Object.assign({
         ref: ref,
         isSearchable: autocomplete,
         isDisabled: disabled,
@@ -52952,7 +52955,7 @@
         borderCollapse: "collapse"
       });
     });
-    var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
+    var renderRows$1 = function renderRows(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
       return rows.length > 0 ? rows.map(function (row, rowIndex) {
         var rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
         return /*#__PURE__*/React__default["default"].createElement(TableBodyRow, {
@@ -53054,7 +53057,7 @@
         rowBorder = _ref6.rowBorder;
       return /*#__PURE__*/React__default["default"].createElement("tbody", {
         "data-testid": "table-body"
-      }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : (/*#__PURE__*/React__default["default"].createElement(LoadingContent, {
+      }, !loading ? renderRows$1(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : (/*#__PURE__*/React__default["default"].createElement(LoadingContent, {
         colSpan: columns.length
       })));
     };

package/dist/main.module.js

@@ -52656,9 +52656,6 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var value = _a.value,
     _onChange = _a.onChange,
     defaultValue = _a.defaultValue,
-    labelText = _a.labelText,
-    requirementText = _a.requirementText,
-    helpText = _a.helpText,
     disabled = _a.disabled,
     errorMessage = _a.errorMessage,
     errorList = _a.errorList,
@@ -52686,7 +52683,7 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$closeMenuOnSelect = _a.closeMenuOnSelect,
     closeMenuOnSelect = _a$closeMenuOnSelect === void 0 ? true : _a$closeMenuOnSelect,
     noOptionsMessage = _a.noOptionsMessage,
-    props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+    props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var variant = useComponentVariant();
@@ -52698,6 +52695,16 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     return calcOptionsLength(options);
   }, [options]);
   var isWindowed = optionsLength >= windowThreshold;
+  var labelText = props.labelText,
+    requirementText = props.requirementText,
+    helpText = props.helpText,
+    hint = props.hint;
+  var fieldLabelProps = {
+    labelText: labelText,
+    requirementText: requirementText,
+    helpText: helpText,
+    hint: hint
+  };
   noOptionsMessage || (noOptionsMessage = function noOptionsMessage() {
     return t("no options");
   });
@@ -52712,11 +52719,7 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     maxHeight: maxHeight,
     windowed: options.length > windowThreshold
   });
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
-    labelText: labelText,
-    requirementText: requirementText,
-    helpText: helpText
-  }, /*#__PURE__*/React__default.createElement(StateManagedSelect$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps), /*#__PURE__*/React__default.createElement(StateManagedSelect$1, Object.assign({
     ref: ref,
     isSearchable: autocomplete,
     isDisabled: disabled,
@@ -52935,7 +52938,7 @@ var StyledTr = styled.tr.withConfig({
     borderCollapse: "collapse"
   });
 });
-var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
+var renderRows$1 = function renderRows(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
   return rows.length > 0 ? rows.map(function (row, rowIndex) {
     var rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
     return /*#__PURE__*/React__default.createElement(TableBodyRow, {
@@ -53037,7 +53040,7 @@ var TableBody = function TableBody(_ref6) {
     rowBorder = _ref6.rowBorder;
   return /*#__PURE__*/React__default.createElement("tbody", {
     "data-testid": "table-body"
-  }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : (/*#__PURE__*/React__default.createElement(LoadingContent, {
+  }, !loading ? renderRows$1(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : (/*#__PURE__*/React__default.createElement(LoadingContent, {
     colSpan: columns.length
   })));
 };

package/dist/src/Select/Select.d.ts

@@ -4,6 +4,7 @@ import { PropsValue } from "react-select";
 import type { GroupBase, Props, StylesConfig } from "react-select";
 import { StyledProps } from "../StyledProps";
 import { CustomOnChangeValue } from "./lib";
+import { FieldLabelProps } from "../FieldLabel/FieldLabel.type";
 export type NDSOptionValue = string | number | boolean | null;
 export interface NDSOption {
     label: ReactNode;
@@ -11,9 +12,10 @@ export interface NDSOption {
 }
 interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
     autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
-    labelText?: string;
-    requirementText?: string;
-    helpText?: ReactNode;
+    labelText?: FieldLabelProps["labelText"];
+    requirementText?: FieldLabelProps["requirementText"];
+    hint?: FieldLabelProps["hint"];
+    helpText?: FieldLabelProps["helpText"];
     disabled?: Props<Option, IsMulti, Group>["isDisabled"];
     errorMessage?: string;
     errorList?: string[];

package/dist/src/Select/Select.js

@@ -26,7 +26,7 @@ import { SelectOption } from "./SelectOption";
 import MenuList from "./MenuList";
 import { calcOptionsLength, checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
 const NDSSelect = forwardRef((_a, ref) => {
-    var { value, onChange, defaultValue, labelText, requirementText, helpText, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "labelText", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+    var { value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
     const { t } = useTranslation();
     const variant = useComponentVariant();
     const theme = useTheme();
@@ -35,6 +35,8 @@ const NDSSelect = forwardRef((_a, ref) => {
     const optionsRef = React.useRef(options);
     const optionsLength = React.useMemo(() => calcOptionsLength(options), [options]);
     const isWindowed = optionsLength >= windowThreshold;
+    const { labelText, requirementText, helpText, hint } = props;
+    const fieldLabelProps = { labelText, requirementText, helpText, hint };
     noOptionsMessage || (noOptionsMessage = () => t("no options"));
     React.useEffect(() => {
         checkOptionsAreValid(options);
@@ -48,7 +50,7 @@ const NDSSelect = forwardRef((_a, ref) => {
         windowed: options.length > windowThreshold,
     });
     return (React.createElement(Field, Object.assign({}, styledProps),
-        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
+        React.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps),
             React.createElement(ReactSelect, Object.assign({ ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
                     if (!onChange)
                         return;

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

@@ -48,7 +48,7 @@ export declare const Required: {
     };
 };
 export declare const WithAClearButton: () => React.JSX.Element;
-export declare const WithHelpText: {
+export declare const WithAllFieldLabelProps: {
     (): React.JSX.Element;
     story: {
         name: string;

package/dist/src/Select/Select.story.js

@@ -106,9 +106,9 @@ Required.story = {
     name: "set to required",
 };
 export const WithAClearButton = () => (React.createElement(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-export const WithHelpText = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithHelpText.story = {
-    name: "with helpText",
+export const WithAllFieldLabelProps = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+WithAllFieldLabelProps.story = {
+    name: "with all field label props",
 };
 export const WithCustomId = () => (React.createElement(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithCustomId.story = {

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { RowType, Columns, RowBorder } from "./Table.types";
 export type BaseTableProps<ColumnMetaData> = {
     columns: Columns<ColumnMetaData>;
     rows: RowType[];
-    noRowsContent?: string;
+    noRowsContent?: ReactNode;
     keyField?: string;
     id?: string;
     loading?: boolean;

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

@@ -72,7 +72,7 @@ declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps
     getControlProps: () => {
         rows: any;
         columns: any[];
-        noRowsContent?: string;
+        noRowsContent?: React.ReactNode;
         keyField?: string;
         id?: string;
         loading?: boolean;

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

@@ -1,16 +1,16 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { RowBorder } from "./Table.types";
-type TableBodyProps = {
+interface TableBodyProps {
     rows: any[];
     columns: any[];
     keyField?: string;
-    noRowsContent?: any;
+    noRowsContent: ReactNode;
     loading?: boolean;
     rowHovers?: boolean;
     compact?: boolean;
-    onRowMouseLeave?: any;
-    onRowMouseEnter?: any;
+    onRowMouseLeave?: (...args: any[]) => any;
+    onRowMouseEnter?: (...args: any[]) => any;
     rowBorder?: RowBorder;
-};
+}
 declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => React.JSX.Element;
 export default TableBody;

package/dist/src/Table/TableBody.js

@@ -15,7 +15,7 @@ const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => (Object.assign({
     borderBottomColor: theme.colors.lightGrey,
     borderCollapse: "collapse",
 }))));
-const renderRows = (rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) => rows.length > 0 ? (rows.map((row, rowIndex) => {
+const renderRows = (rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) => rows.length > 0 ? (rows.map((row, rowIndex) => {
     const rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
     return (React.createElement(TableBodyRow, { key: rowKey, row: row, columns: columns, keyField: keyField, rowHovers: rowHovers, compact: compact, rowClassName: row.rowClassName, onMouseEnter: (e) => onRowMouseEnter({ row, e }), onMouseLeave: (e) => onRowMouseLeave({ row, e }), rowBorder: rowBorder }));
 })) : (React.createElement(TableMessageContainer, { colSpan: columns.length }, noRowsContent));
@@ -33,5 +33,5 @@ const TableMessageContainer = ({ colSpan, children }) => (React.createElement("t
     React.createElement("td", { colSpan: colSpan },
         React.createElement(StyledMessageContainer, { className: "nds-table__no-rows-content" }, children))));
 const LoadingContent = ({ colSpan }) => (React.createElement(TableMessageContainer, { colSpan: colSpan }, "Loading..."));
-const TableBody = ({ rows, columns, keyField = "id", noRowsContent = "No records have been created for this table.", loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }) => (React.createElement("tbody", { "data-testid": "table-body" }, !loading ? (renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder)) : (React.createElement(LoadingContent, { colSpan: columns.length }))));
+const TableBody = ({ rows, columns, keyField = "id", noRowsContent = "No records have been created for this table.", loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }) => (React.createElement("tbody", { "data-testid": "table-body" }, !loading ? (renderRows(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder)) : (React.createElement(LoadingContent, { colSpan: columns.length }))));
 export default TableBody;

package/package.json

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