@spaced-out/ui-design-system 0.1.8 → 0.1.9

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.1.9](https://github.com/spaced-out/ui-design-system/compare/v0.1.8...v0.1.9) (2023-04-05)
+
+
+### Bug Fixes
+
+* search input loader and typeahead fixes ([67db0fe](https://github.com/spaced-out/ui-design-system/commit/67db0fe3ad41f6d8a40a7fc77fef835ae96cc668))
+
 ### [0.1.8](https://github.com/spaced-out/ui-design-system/compare/v0.1.7...v0.1.8) (2023-04-05)
 
 

package/lib/components/SearchInput/SearchInput.js

@@ -53,7 +53,8 @@ const SearchInput = _ref => {
     })
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
     colorToken: "colorFillPrimary",
-    size: size
+    className: _SearchInputModule.default.loader,
+    size: "small"
   })));
 };
 exports.SearchInput = SearchInput;

package/lib/components/SearchInput/SearchInput.js.flow

@@ -64,7 +64,11 @@ export const SearchInput = ({
             [css.small]: size === 'small',
           })}
         >
-          <CircularLoader colorToken="colorFillPrimary" size={size} />
+          <CircularLoader
+            colorToken="colorFillPrimary"
+            className={css.loader}
+            size="small"
+          />
         </div>
       )}
     </div>

package/lib/components/SearchInput/SearchInput.module.css

@@ -1,5 +1,6 @@
 @value (
-  colorTextPrimary
+  colorTextPrimary,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -7,15 +8,10 @@
   size34
 ) from '../../styles/variables/_size.css';
 
-@value (
-  spaceXXSmall
-) from '../../styles/variables/_space.css';
-
 .searchInputWrapper {
   display: flex;
   position: relative;
   align-items: end;
-  gap: spaceXXSmall;
   height: fit-content;
 }
 
@@ -34,11 +30,15 @@
   align-items: center;
   justify-content: center;
   align-items: center;
-  margin-right: calc((size42 * -1) - spaceXXSmall);
+  margin-left: calc(size42 * -1);
 }
 
 .loaderContainer.small {
   height: size34;
   width: size34;
-  margin-right: calc((size34 * -1) - spaceXXSmall);
+  margin-left: calc(size34 * -1);
+}
+
+.loader {
+  background-color: colorBackgroundTertiary;
 }

package/lib/components/Table/Row.js

@@ -77,7 +77,9 @@ function DefaultRow(_ref2) {
       sticky
     } = item;
     const value = data[key];
-    return Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+    return Renderer ? /*#__PURE__*/React.createElement(Renderer
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       data: data,
       extras: extras,
@@ -85,7 +87,9 @@ function DefaultRow(_ref2) {
       className: (0, _classify.default)({
         [_TableModule.default.stickyCell]: sticky
       })
-    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell, {
+    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell
+    // eslint-disable-next-line react/no-array-index-key
+    , {
       key: index,
       title: String(value),
       className: (0, _classify.default)(cellClassName, {

package/lib/components/Table/Row.js.flow

@@ -126,6 +126,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
         const value = data[key];
         return Renderer ? (
           <Renderer
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             data={data}
             extras={extras}
@@ -134,6 +135,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
           />
         ) : (
           <SingleCell
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             title={String(value)}
             className={classify(cellClassName, {[css.stickyCell]: sticky})}

package/lib/components/Table/TableHeader.js

@@ -100,7 +100,9 @@ function DefaultTableHeader(props) {
     return /*#__PURE__*/React.createElement(BasicHeadCell, {
       className: (0, _classify.default)({
         [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
-      }, headerClassName),
+      }, headerClassName)
+      // eslint-disable-next-line react/no-array-index-key
+      ,
       key: index,
       scope: "col",
       onClick: headCellClickHandler

package/lib/components/Table/TableHeader.js.flow

@@ -166,6 +166,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
               },
               headerClassName,
             )}
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             scope="col"
             onClick={headCellClickHandler}

package/lib/components/Text/Text.js

@@ -29,8 +29,9 @@ const HighlightText = _ref => {
     highlights = (0, _string.escapeRegExp)(highlight);
   }
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
-  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
-    key: part,
+  return /*#__PURE__*/React.createElement("span", null, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line react/no-array-index-key
+    key: idx,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)

package/lib/components/Text/Text.js.flow

@@ -50,10 +50,11 @@ const HighlightText = ({
 
   return (
     <span>
-      {parts.map((part) =>
+      {parts.map((part, idx) =>
         highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
           <span
-            key={part}
+            // eslint-disable-next-line react/no-array-index-key
+            key={idx}
             className={classify(
               css.highlightText,
               {

package/package.json

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