@spaced-out/ui-design-system 0.2.5 → 0.2.6-beta.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.6-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.5...v0.2.6-beta.0) (2024-10-21)
+
+
+### Features
+
+* adding custom staticLabels prop in menu ([#282](https://github.com/spaced-out/ui-design-system/issues/282)) ([696a433](https://github.com/spaced-out/ui-design-system/commit/696a433a6d2b2c15ac1f4946c7018e17116dc612))
+
 ### [0.2.5](https://github.com/spaced-out/ui-design-system/compare/v0.2.4...v0.2.5) (2024-10-18)
 
 

package/lib/components/Menu/Menu.js

@@ -28,6 +28,11 @@ const RenderOption = _ref => {
     classNames,
     searchText = '',
     showResultText = true,
+    staticLabels = {
+      RESULT: 'result',
+      RESULTS: 'results',
+      SEARCH_PLACEHOLDER: 'Search...'
+    },
     ...restProps
   } = _ref;
   const {
@@ -41,7 +46,7 @@ const RenderOption = _ref => {
   } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered, staticLabels);
     const {
       enable: isVirtualizationEnabled,
       menuHeight,
@@ -50,7 +55,7 @@ const RenderOption = _ref => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+    }, finalResultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
       height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
       itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
       itemCount: optionsFiltered.length
@@ -80,11 +85,11 @@ const RenderOption = _ref => {
   }
   if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
     const optionsFiltered = !allowSearch ? composeOptions : (0, _menu.getFilteredComposeOptionsFromSearchText)(composeOptions, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered, staticLabels);
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((composeMenuOptions, index) =>
+    }, finalResultText), optionsFiltered.map((composeMenuOptions, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement("span", {
@@ -101,11 +106,11 @@ const RenderOption = _ref => {
   }
   if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
     const optionsFiltered = !allowSearch ? groupTitleOptions : (0, _menu.getFilteredGroupTitleOptionsFromSearchText)(groupTitleOptions, searchText);
-    const resultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered);
+    const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered, staticLabels);
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((optionsGroup, index) =>
+    }, finalResultText), optionsFiltered.map((optionsGroup, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement(React.Fragment, {
@@ -136,7 +141,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       itemHeight: null
     },
     header,
-    footer
+    footer,
+    staticLabels
   } = props;
   const [searchText, setSearchText] = React.useState('');
   const {
@@ -169,7 +175,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     value: searchText,
     onChange: e => setSearchText(e.target.value),
     onClear: () => setSearchText(''),
-    size: size
+    size: size,
+    placeholder: staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'
   }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
     searchText: searchText
   })), hasFooter && /*#__PURE__*/React.createElement("div", {

package/lib/components/Menu/Menu.js.flow

@@ -76,6 +76,11 @@ export type BaseMenuProps = {
   header?: React.Node,
   footer?: React.Node,
   showResultText?: boolean,
+  staticLabels?: {
+    RESULT?: string,
+    RESULTS?: string,
+    SEARCH_PLACEHOLDER?: string,
+  },
 };
 
 export type MenuOptionTypes = {
@@ -116,6 +121,11 @@ const RenderOption = ({
   classNames,
   searchText = '',
   showResultText = true,
+  staticLabels = {
+    RESULT: 'result',
+    RESULTS: 'results',
+    SEARCH_PLACEHOLDER: 'Search...',
+  },
   ...restProps
 }: RenderOptionProps): React.Node => {
   const {
@@ -131,9 +141,9 @@ const RenderOption = ({
     const optionsFiltered = !allowSearch
       ? options
       : getFilteredOptionsFromSearchText(options, searchText);
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredOptionsResultText(optionsFiltered);
+      : getFilteredOptionsResultText(optionsFiltered, staticLabels);
 
     const {
       enable: isVirtualizationEnabled,
@@ -148,7 +158,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {virtualization && isVirtualizationEnabled ? (
@@ -200,9 +210,9 @@ const RenderOption = ({
     const optionsFiltered = !allowSearch
       ? composeOptions
       : getFilteredComposeOptionsFromSearchText(composeOptions, searchText);
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredComposeOptionsResultText(optionsFiltered);
+      : getFilteredComposeOptionsResultText(optionsFiltered, staticLabels);
 
     return (
       <>
@@ -211,7 +221,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {optionsFiltered.map((composeMenuOptions, index) => (
@@ -246,9 +256,9 @@ const RenderOption = ({
         groupTitleOptions,
         searchText,
       );
-    const resultText = !allowSearch
+    const finalResultText = !allowSearch
       ? ''
-      : getFilteredGroupTitleOptionsResultText(optionsFiltered);
+      : getFilteredGroupTitleOptionsResultText(optionsFiltered, staticLabels);
 
     return (
       <>
@@ -257,7 +267,7 @@ const RenderOption = ({
             className={css.filterOptionsResultText}
             color="tertiary"
           >
-            {resultText}
+            {finalResultText}
           </FormLabelSmall>
         )}
         {optionsFiltered.map((optionsGroup, index) => (
@@ -312,6 +322,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
         },
         header,
         footer,
+        staticLabels,
       } = props;
       const [searchText, setSearchText] = React.useState('');
       const {menuHeight} = virtualization;
@@ -361,6 +372,7 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
               onChange={(e) => setSearchText(e.target.value)}
               onClear={() => setSearchText('')}
               size={size}
+              placeholder={staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'}
             />
           )}
           <RenderOption {...props} searchText={searchText} />

package/lib/utils/menu/menu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _string = require("../string");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -58,11 +57,12 @@ const getFilteredOptionsFromSearchText = (options, searchText) => {
   return options.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()));
 };
 exports.getFilteredOptionsFromSearchText = getFilteredOptionsFromSearchText;
-const getFilteredOptionsResultText = function (options) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredOptionsResultText = (options, staticLabels) => {
   let resultCount = 0;
   resultCount += options.length;
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredOptionsResultText = getFilteredOptionsResultText;
@@ -73,13 +73,14 @@ const getFilteredComposeOptionsFromSearchText = (composeOptions, searchText) =>
   return composeOptions.map(optionGroup => optionGroup.filter(option => option.label?.toLowerCase().includes(searchText.toLowerCase()))).filter(group => group.length > 0);
 };
 exports.getFilteredComposeOptionsFromSearchText = getFilteredComposeOptionsFromSearchText;
-const getFilteredComposeOptionsResultText = function (composeOptions) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredComposeOptionsResultText = (composeOptions, staticLabels) => {
   let resultCount = 0;
   composeOptions.forEach(optionGroup => {
     resultCount += optionGroup.length;
   });
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredComposeOptionsResultText = getFilteredComposeOptionsResultText;
@@ -93,15 +94,16 @@ const getFilteredGroupTitleOptionsFromSearchText = (groupTitleOptions, searchTex
   })).filter(group => group.options && group.options.length > 0);
 };
 exports.getFilteredGroupTitleOptionsFromSearchText = getFilteredGroupTitleOptionsFromSearchText;
-const getFilteredGroupTitleOptionsResultText = function (groupTitleOptions) {
-  let resultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'result';
+const getFilteredGroupTitleOptionsResultText = (groupTitleOptions, staticLabels) => {
   let resultCount = 0;
   groupTitleOptions.forEach(group => {
     if (group.options) {
       resultCount += group.options.length;
     }
   });
-  const generatedResultText = `${resultCount} ${(0, _string.formatWord)(resultText, resultCount)}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+  const generatedResultText = `${resultCount} ${resultCount > 1 ? multipleResultsMessage : singleResultMessage}`;
   return generatedResultText;
 };
 exports.getFilteredGroupTitleOptionsResultText = getFilteredGroupTitleOptionsResultText;

package/lib/utils/menu/menu.js.flow

@@ -2,7 +2,6 @@
 import * as React from 'react';
 
 import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';
-import {formatWord} from '../string';
 
 
 export const getSelectedKeysFromSelectedOption = (
@@ -96,16 +95,18 @@ export const getFilteredOptionsFromSearchText = (
 
 export const getFilteredOptionsResultText = (
   options: MenuOption[],
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
   resultCount += options.length;
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };
@@ -129,7 +130,7 @@ export const getFilteredComposeOptionsFromSearchText = (
 
 export const getFilteredComposeOptionsResultText = (
   composeOptions: Array<Array<MenuOption>>,
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
@@ -137,10 +138,12 @@ export const getFilteredComposeOptionsResultText = (
     resultCount += optionGroup.length;
   });
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };
@@ -169,7 +172,7 @@ export const getFilteredGroupTitleOptionsFromSearchText = (
 
 export const getFilteredGroupTitleOptionsResultText = (
   groupTitleOptions: Array<MenuGroupTitleOption>,
-  resultText: string = 'result',
+  staticLabels: {[key: string]: string},
 ): string => {
   let resultCount = 0;
 
@@ -179,10 +182,12 @@ export const getFilteredGroupTitleOptionsResultText = (
     }
   });
 
-  const generatedResultText = `${resultCount} ${formatWord(
-    resultText,
-    resultCount,
-  )}`;
+  const singleResultMessage = staticLabels.RESULT ?? 'result';
+  const multipleResultsMessage = staticLabels.RESULTS ?? 'results';
+
+  const generatedResultText = `${resultCount} ${
+    resultCount > 1 ? multipleResultsMessage : singleResultMessage
+  }`;
 
   return generatedResultText;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.5",
+  "version": "0.2.6-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {