ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/core/src/hooks/useToolbar.tsx

@@ -5,7 +5,7 @@ export function useToolbar({ servicesManager, buttonSection = 'primary' }: withA
   const { EVENTS } = toolbarService;
 
   const [toolbarButtons, setToolbarButtons] = useState(
-    toolbarService.getButtonSection(buttonSection)
+    toolbarService.getButtonSection(buttonSection as string)
   );
 
   // Callback function for handling toolbar interactions
@@ -25,7 +25,7 @@ export function useToolbar({ servicesManager, buttonSection = 'primary' }: withA
   // Effect to handle toolbar modification events
   useEffect(() => {
     const handleToolbarModified = () => {
-      setToolbarButtons(toolbarService.getButtonSection(buttonSection));
+      setToolbarButtons(toolbarService.getButtonSection(buttonSection as string)?.filter(Boolean));
     };
 
     const subs = [EVENTS.TOOL_BAR_MODIFIED, EVENTS.TOOL_BAR_STATE_MODIFIED].map(event => {

platform/core/src/services/ToolBarService/ToolbarService.ts

@@ -236,8 +236,8 @@ export default class ToolbarService extends PubSubService {
 
     const evaluateButtonProps = (button, props, refreshProps) => {
       if (evaluationResults.has(button.id)) {
-        const { disabled, className, isActive } = evaluationResults.get(button.id);
-        return { ...props, disabled, className, isActive };
+        const { disabled, disabledText, className, isActive } = evaluationResults.get(button.id);
+        return { ...props, disabled, disabledText, className, isActive };
       } else {
         const evaluated = props.evaluate?.({ ...refreshProps, button });
         const updatedProps = {
@@ -276,7 +276,9 @@ export default class ToolbarService extends PubSubService {
         // item in the group
         buttonProps = {
           ...buttonProps,
-          primary: groupEvaluated?.primary || buttonProps.primary,
+          primary: groupEvaluated?.primary ?? buttonProps.primary,
+          disabled: groupEvaluated?.disabled ?? buttonProps.disabled,
+          disabledText: groupEvaluated?.disabledText ?? buttonProps.disabledText,
         };
 
         const { primary, items } = buttonProps;