@react-fabric/form 1.0.0-beta.56 → 1.0.0-beta.58

package/src/select/DualList.tsx

@@ -240,39 +240,35 @@ export const DualList = <T extends AnyObject = string>({
         <div className="self-center mx-2">
           <ButtonGroup vertical className="outline overflow-hidden bg-base">
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to top"
               onClick={moveAllLeft}
-              icon={CoreIcons.chevronsLeft}
+              icon={{ icon: CoreIcons.chevronsLeft, rtlFlip: true }}
               disabled={!rightOptions.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll up"
               onClick={moveRightSelected}
-              icon={CoreIcons.chevronLeft}
+              icon={{ icon: CoreIcons.chevronLeft, rtlFlip: true }}
               disabled={!rightSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll down"
               onClick={moveLeftSelected}
-              icon={CoreIcons.chevronRight}
+              icon={{ icon: CoreIcons.chevronRight, rtlFlip: true }}
               disabled={!leftSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to bottom"
               onClick={moveAllRight}
-              icon={CoreIcons.chevronsRight}
+              icon={{ icon: CoreIcons.chevronsRight, rtlFlip: true }}
               disabled={!leftOptions.length}
             />
           </ButtonGroup>

package/src/select/List.tsx

@@ -61,6 +61,7 @@ export const List = <T extends AnyObject = string>({
   groupProperty,
   labelProperty,
   valueProperty,
+  infoProperty,
   sortProperty,
   multiple,
   allowCreate,
@@ -106,6 +107,7 @@ export const List = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    alwaysOpen: true,
     groupProperty,
     labelProperty,
     valueProperty,
@@ -320,6 +322,7 @@ export const List = <T extends AnyObject = string>({
           itemRef={setItemRef}
           itemProps={makeItemProps}
           empty={emptyDisplay}
+          info={state.activeItem?.[infoProperty ?? "info"]}
         >
           {(item, label) => renderer?.(item) ?? label}
         </Options>

package/src/select/Options.tsx

@@ -34,6 +34,7 @@ export const Options = ({
   className,
   itemRef,
   empty,
+  info,
   valueProperty = "id",
   labelProperty = "label",
   itemProps,
@@ -41,6 +42,7 @@ export const Options = ({
   ...rest
 }: {
   ref: AnyObject;
+  info?: AnyObject;
   itemRef: AnyObject;
   style?: AnyObject;
   items: AnyObject[];
@@ -55,29 +57,48 @@ export const Options = ({
   return (
     <div
       ref={ref}
-      className={classNames(
-        "bg-base select-none overflow-x-hidden overflow-y-auto",
-        className,
-      )}
+      className={classNames("bg-base select-none flex flex-col", className)}
       style={style}
       {...rest}
     >
-      {items.length === 0 &&
-        (empty ?? (
-          <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
-        ))}
-      {items.map((item, index) => {
-        if (item.___group___)
-          return (
-            <p
-              key={index}
-              className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
-            >
-              {item.label}
-            </p>
-          );
+      <div className={classNames("overflow-x-hidden overflow-y-auto flex-1")}>
+        {items.length === 0 &&
+          (empty ?? (
+            <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
+          ))}
+        {items.map((item, index) => {
+          if (item.___group___)
+            return (
+              <p
+                key={index}
+                className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
+              >
+                {item.label}
+              </p>
+            );
+
+          if (item.___create___)
+            return (
+              <div
+                role="none"
+                key={index}
+                tabIndex={active === index ? 0 : -1}
+                ref={(el: AnyObject) => itemRef(index, el)}
+                data-active={active === index ? true : undefined}
+                className={classNames(
+                  "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                  "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+                )}
+                {...itemProps(item)}
+              >
+                <Trans
+                  i18nKey="form:select.createOption"
+                  values={{ query: item.value ?? item }}
+                  components={[<strong key="t0">query</strong>]}
+                />
+              </div>
+            );
 
-        if (item.___create___)
           return (
             <div
               role="none"
@@ -86,36 +107,19 @@ export const Options = ({
               ref={(el: AnyObject) => itemRef(index, el)}
               data-active={active === index ? true : undefined}
               className={classNames(
-                "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
                 "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
               )}
               {...itemProps(item)}
             >
-              <Trans
-                i18nKey="form:select.createOption"
-                values={{ query: item.value ?? item }}
-                components={[<strong key="t0">query</strong>]}
-              />
+              {children(item, item[labelProperty] ?? item)}
             </div>
           );
-
-        return (
-          <div
-            role="none"
-            key={index}
-            tabIndex={active === index ? 0 : -1}
-            ref={(el: AnyObject) => itemRef(index, el)}
-            data-active={active === index ? true : undefined}
-            className={classNames(
-              "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
-              "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
-            )}
-            {...itemProps(item)}
-          >
-            {children(item, item[labelProperty] ?? item)}
-          </div>
-        );
-      })}
+        })}
+      </div>
+      {info && (
+        <div className="px-2 py-1 text-sm bg-dimmed text-muted">{info}</div>
+      )}
     </div>
   );
 };

package/src/select/Select.tsx

@@ -70,6 +70,7 @@ export const Select = <T extends AnyObject = string>({
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
   sortProperty,
+  infoProperty,
   multiple,
   searchable,
   allowCreate,
@@ -357,6 +358,7 @@ export const Select = <T extends AnyObject = string>({
               itemRef={setItemRef}
               itemProps={makeItemProps}
               empty={emptyDisplay}
+              info={state.activeItem?.[infoProperty ?? "info"]}
             >
               {(item, label) => renderer?.(item) ?? label}
             </Options>

package/src/select/useSelect.tsx

@@ -65,6 +65,7 @@ interface State {
   open: boolean;
   loading: boolean;
   activeIndex: number | null;
+  activeItem: AnyObject;
   selectedIndex: number | null;
   value: AnyObject;
   // filter
@@ -76,8 +77,9 @@ interface State {
 export const useSelect = ({
   options = EMPTY_ARRAY,
   value,
-  defaultOpen = false,
   autoComplete,
+  alwaysOpen = false,
+  defaultOpen = false,
   multiple = false,
   allowCreate = false,
   groupProperty = "",
@@ -93,6 +95,7 @@ export const useSelect = ({
   value?: AnyObject;
   options?: AnyObject[];
   multiple?: boolean;
+  alwaysOpen?: boolean;
   defaultOpen?: boolean;
   allowCreate?: boolean;
   groupProperty?: AnyObject;
@@ -149,12 +152,16 @@ export const useSelect = ({
         };
       }
       if (action.type === "close") {
-        return { ...state, activeIndex: null, open: false };
+        return { ...state, activeIndex: null, activeItem: null, open: false };
       }
       if (action.type === "active" && state.open) {
         if (autoComplete && action.index !== null)
           state.query = state.items[action.index];
-        return { ...state, activeIndex: action.index };
+        return {
+          ...state,
+          activeIndex: action.index,
+          activeItem: state.items[action.index ?? -1],
+        };
       }
       if (action.type === "setValue") {
         return {
@@ -170,6 +177,7 @@ export const useSelect = ({
           ...state,
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete
             ? state.multiple
               ? action.value?.length
@@ -192,7 +200,7 @@ export const useSelect = ({
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
@@ -261,9 +269,10 @@ export const useSelect = ({
     {
       multiple,
       emptyValue,
-      open: defaultOpen,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -407,7 +416,7 @@ export const useSelect = ({
   }, []);
 
   const setActiveIndex = useCallback((index: number | null) => {
-    dispatch({ type: "active", index });
+    index && index > -1 && dispatch({ type: "active", index });
   }, []);
 
   return {

package/src/types/index.ts

@@ -154,6 +154,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  infoProperty?: keyof T;
   /**
    * value property name
    */