@axinom/mosaic-ui 0.63.0-rc.2 → 0.63.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.2",
+  "version": "0.63.0-rc.3",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1138af3f812dff3185f92de01ef6104640711bc8"
+  "gitHead": "a78369cc85ef82dad007c3fa8ff8f0b8b0cb149b"
 }

package/src/components/Explorer/Explorer.tsx

@@ -487,6 +487,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             onItemSelected={itemSelectedHandler}
             onRequestMoreData={onRequestMoreData}
             onSortChanged={(sortData: SortData<T>) => {
+              listRef.current?.resetSelection();
               onSortChanged(sortData);
               setSortOrder(sortData);
             }}

package/src/components/FieldSelection/FieldSelection.scss

@@ -5,6 +5,13 @@
   grid-template-columns: 1fr 50px;
   gap: 10px;
   align-items: center;
+}
+
+.selectionHeader {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
 
   div:has(> input) {
     padding: 2px;

package/src/components/FieldSelection/FieldSelection.spec.tsx

@@ -34,7 +34,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
   });
@@ -51,7 +50,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
 

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
@@ -105,7 +105,7 @@ const FieldSelectionHeader: React.FC<{
 }> = ({ fields, onAddField }) => {
   const [value, setValue] = React.useState<string>();
 
-  const handleButtonClicked = useCallback(() => {
+  useEffect(() => {
     if (value) {
       onAddField(value);
       setValue(undefined);
@@ -113,22 +113,17 @@ const FieldSelectionHeader: React.FC<{
   }, [onAddField, value]);
 
   return (
-    <div className={classes.header}>
+    <div className={classes.selectionHeader}>
       <Select
         label="Field"
         name="field"
         placeholder="Select Field"
         options={fields}
+        disabled={fields.length === 0}
         inlineMode={true}
         onChange={(e) => setValue(e.currentTarget.value)}
         value={value}
       />
-      <Button
-        icon={IconName.Plus}
-        buttonContext={value ? ButtonContext.Active : ButtonContext.Icon}
-        onButtonClicked={handleButtonClicked}
-        dataTestId="add-field-button"
-      />
     </div>
   );
 };