Searchbox - fix : custom page width

SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap

@@ -5,18 +5,23 @@ exports[`SearchBox renders 1`] = `
   ariaLabel=""
   disableAnimation={false}
   disabled={false}
+  height={-1}
   iconName=""
   onChanged={[Function]}
   placeholderText=""
   themeJSON=""
   underLined={false}
+  width={-1}
 />
 `;
 
 exports[`SearchBox theme 1`] = `
 <div
   className=
 
+      {
+        width: -1px;
+      }
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;

SearchBox/SearchBox/__tests__/searchbox-lifecycle.test.ts

@@ -52,67 +52,3 @@ function createComponent() {
     document.body.appendChild(container);
     return { component, context, notifyOutputChanged, container, state };
 }
-
-/*
-// Since requestAnimationFrame does not exist in the test DOM, mock it
-window.requestAnimationFrame = jest.fn().mockImplementation((callback) => {
-    callback();
-});
-
-describe('ProgressIndicator', () => {
-    beforeEach(() => { 
-        jest.clearAllMocks();
-        jest.useFakeTimers();
-    });
-    afterEach(() => {
-        for (let i = 0; i < document.body.children.length; i++) {
-            if (document.body.children[i].tagName === 'DIV') {
-                document.body.removeChild(document.body.children[i]);
-                i--;
-            }
-        }
-        // reset any jest timers
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if ((setTimeout as any).mock) {
-            jest.runOnlyPendingTimers();
-            jest.useRealTimers();
-        }
-    });
-
-    it('theme', async () => {
-        const { component, context } = createComponent();
-        context.parameters.Theme.raw = JSON.stringify({
-            palette: {
-                themePrimary: '#test-primary',
-            },
-        });
-
-        component.init(context);
-        const spinnerComponent = renderer.create(component.updateView(context));
-        expect(spinnerComponent.toJSON()).toMatchSnapshot();
-    });
-
-    it('test type of Indicator', async() =>{
-        const { component, context } = createComponent();
-        component.init(context);
-        context.parameters.TypeofIndicator.raw = 'Indeterminate Indicator';
-        let spinnerComponent = renderer.create(component.updateView(context));
-        expect(spinnerComponent.toJSON()).toMatchSnapshot();
-    });
-});
-
-function createComponent() {
-    const component = new ProgressIndicator();
-    const notifyOutputChanged = jest.fn();
-    const context = new MockContext<IInputs>(getMockParameters());
-    context.parameters.Label.raw = 'Example Label';
-    context.parameters.Description.raw = 'Example Description';
-    context.parameters.AccessibilityLabel.raw = 'Progress Indicator';
-    context.parameters.BarHeight.raw = 2;
-    context.parameters.HideProgressBar.raw = false;
-    const state = new MockState();
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    return { component, context, notifyOutputChanged, container, state };
-}
-*/

SearchBox/SearchBox/components/SearchBox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps } from '@fluentui/react';
+import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, mergeStyles } from '@fluentui/react';
 import { ISearchBoxComponentProps } from './Component.types';
 
 export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) => {
@@ -17,9 +17,12 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
     const onChange = (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string): void => {
         onChanged(newValue);
     };
+    const wrapperClass = mergeStyles({
+        width: props.width,
+    });
 
     return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme} className={wrapperClass}>
             <SearchBox
                 placeholder={placeholderText}
                 onChange={onChange}

SearchBox/SearchBox/index.ts

@@ -16,6 +16,8 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
      */
     public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
+        this.context = context;
+        this.context.mode.trackContainerResize(true);
         this.notifyOutputChanged = notifyOutputChanged;
     }
 
@@ -24,6 +26,8 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
      */
     public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
+        const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);
+        const allocatedHeight = parseInt(context.mode.allocatedHeight as unknown as string);
         const props: ISearchBoxComponentProps = {
             onChanged: this.onChange,
             themeJSON: context.parameters.Theme.raw ?? '',
@@ -33,6 +37,8 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
             placeholderText: context.parameters.PlaceHolderText.raw ?? '',
             disabled: context.mode.isControlDisabled,
             disableAnimation: context.parameters.DisableAnimation.raw ?? false,
+            width: allocatedWidth,
+            height: allocatedHeight,
         };
 
         return React.createElement(SearchBoxComponent, props);

SearchBox/coverage/clover.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1667213098585" clover="3.2.0">
+  <project timestamp="1667213098586" name="All files">
+    <metrics statements="21" coveredstatements="17" conditionals="22" coveredconditionals="10" methods="9" coveredmethods="5" elements="52" coveredelements="32" complexity="0" loc="21" ncloc="21" packages="2" files="2" classes="2"/>
+    <package name="SearchBox">
+      <metrics statements="10" coveredstatements="7" conditionals="16" coveredconditionals="9" methods="6" coveredmethods="3"/>
+      <file name="index.ts" path="C:\src\creatorkit\powercat-code-components\SearchBox\SearchBox\index.ts">
+        <metrics statements="10" coveredstatements="7" conditionals="16" coveredconditionals="9" methods="6" coveredmethods="3"/>
+        <line num="1" count="1" type="stmt"/>
+        <line num="3" count="1" type="stmt"/>
+        <line num="6" count="1" type="stmt"/>
+        <line num="21" count="2" type="stmt"/>
+        <line num="30" count="2" type="stmt"/>
+        <line num="36" count="2" type="stmt"/>
+        <line num="44" count="2" type="stmt"/>
+        <line num="45" count="0" type="cond" truecount="0" falsecount="4"/>
+        <line num="46" count="0" type="stmt"/>
+        <line num="54" count="0" type="stmt"/>
+      </file>
+    </package>
+    <package name="SearchBox.components">
+      <metrics statements="11" coveredstatements="10" conditionals="6" coveredconditionals="1" methods="3" coveredmethods="2"/>
+      <file name="SearchBox.tsx" path="C:\src\creatorkit\powercat-code-components\SearchBox\SearchBox\components\SearchBox.tsx">
+        <metrics statements="11" coveredstatements="10" conditionals="6" coveredconditionals="1" methods="3" coveredmethods="2"/>
+        <line num="1" count="1" type="stmt"/>
+        <line num="2" count="1" type="stmt"/>
+        <line num="3" count="1" type="stmt"/>
+        <line num="11" count="1" type="stmt"/>
+        <line num="16" count="1" type="stmt"/>
+        <line num="18" count="1" type="stmt"/>
+        <line num="19" count="1" type="stmt"/>
+        <line num="20" count="1" type="cond" truecount="1" falsecount="1"/>
+        <line num="27" count="1" type="stmt"/>
+        <line num="31" count="0" type="cond" truecount="0" falsecount="4"/>
+        <line num="39" count="1" type="stmt"/>
+      </file>
+    </package>
+  </project>
+</coverage>

SearchBox/coverage/coverage-final.json

@@ -0,0 +1,3 @@
+{"C:\\src\\creatorkit\\powercat-code-components\\SearchBox\\SearchBox\\index.ts": {"path":"C:\\src\\creatorkit\\powercat-code-components\\SearchBox\\SearchBox\\index.ts","statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":1,"column":31}},"1":{"start":{"line":3,"column":0},"end":{"line":3,"column":60}},"2":{"start":{"line":44,"column":12},"end":{"line":47,"column":null}},"3":{"start":{"line":45,"column":8},"end":{"line":45,"column":48}},"4":{"start":{"line":46,"column":8},"end":{"line":46,"column":35}},"5":{"start":{"line":21,"column":8},"end":{"line":21,"column":55}},"6":{"start":{"line":30,"column":48},"end":{"line":34,"column":10}},"7":{"start":{"line":36,"column":8},"end":{"line":37,"column":20}},"8":{"start":{"line":54,"column":8},"end":{"line":56,"column":22}},"9":{"start":{"line":6,"column":0},"end":{"line":6,"column":13}}},"fnMap":{"0":{"name":"(anonymous_6)","decl":{"start":{"line":11,"column":4},"end":{"line":11,"column":20}},"loc":{"start":{"line":11,"column":4},"end":{"line":11,"column":21}}},"1":{"name":"(anonymous_7)","decl":{"start":{"line":44,"column":23},"end":{"line":44,"column":24}},"loc":{"start":{"line":44,"column":62},"end":{"line":47,"column":5}}},"2":{"name":"(anonymous_8)","decl":{"start":{"line":20,"column":11},"end":{"line":20,"column":15}},"loc":{"start":{"line":20,"column":94},"end":{"line":22,"column":5}}},"3":{"name":"(anonymous_9)","decl":{"start":{"line":28,"column":11},"end":{"line":28,"column":21}},"loc":{"start":{"line":28,"column":66},"end":{"line":38,"column":5}}},"4":{"name":"(anonymous_10)","decl":{"start":{"line":53,"column":11},"end":{"line":53,"column":21}},"loc":{"start":{"line":53,"column":21},"end":{"line":57,"column":5}}},"5":{"name":"(anonymous_11)","decl":{"start":{"line":63,"column":11},"end":{"line":63,"column":18}},"loc":{"start":{"line":63,"column":18},"end":{"line":63,"column":29}}}},"branchMap":{"0":{"loc":{"start":{"line":45,"column":31},"end":{"line":45,"column":47}},"type":"cond-expr","locations":[{"start":{"line":45,"column":31},"end":{"line":45,"column":39}},{"start":{"line":45,"column":43},"end":{"line":45,"column":47}}]},"1":{"loc":{"start":{"line":45,"column":31},"end":{"line":45,"column":43}},"type":"binary-expr","locations":[{"start":{"line":45,"column":31},"end":{"line":45,"column":43}},{"start":{"line":45,"column":31},"end":{"line":45,"column":43}}]},"2":{"loc":{"start":{"line":32,"column":23},"end":{"line":32,"column":57}},"type":"cond-expr","locations":[{"start":{"line":32,"column":51},"end":{"line":32,"column":55}},{"start":{"line":32,"column":55},"end":{"line":32,"column":57}}]},"3":{"loc":{"start":{"line":32,"column":23},"end":{"line":32,"column":55}},"type":"binary-expr","locations":[{"start":{"line":32,"column":23},"end":{"line":32,"column":55}},{"start":{"line":32,"column":51},"end":{"line":32,"column":55}}]},"4":{"loc":{"start":{"line":33,"column":23},"end":{"line":33,"column":71}},"type":"cond-expr","locations":[{"start":{"line":33,"column":65},"end":{"line":33,"column":69}},{"start":{"line":33,"column":69},"end":{"line":33,"column":71}}]},"5":{"loc":{"start":{"line":33,"column":23},"end":{"line":33,"column":69}},"type":"binary-expr","locations":[{"start":{"line":33,"column":23},"end":{"line":33,"column":69}},{"start":{"line":33,"column":65},"end":{"line":33,"column":69}}]},"6":{"loc":{"start":{"line":33,"column":23},"end":{"line":33,"column":65}},"type":"cond-expr","locations":[{"start":{"line":33,"column":41},"end":{"line":33,"column":43}},{"start":{"line":33,"column":41},"end":{"line":33,"column":65}}]},"7":{"loc":{"start":{"line":33,"column":23},"end":{"line":33,"column":43}},"type":"binary-expr","locations":[{"start":{"line":33,"column":23},"end":{"line":33,"column":43}},{"start":{"line":33,"column":41},"end":{"line":33,"column":43}}]}},"s":{"0":1,"1":1,"2":2,"3":0,"4":0,"5":2,"6":2,"7":2,"8":0,"9":1},"f":{"0":2,"1":0,"2":2,"3":2,"4":0,"5":0},"b":{"0":[0,0],"1":[0,0],"2":[1,1],"3":[2,1],"4":[0,2],"5":[2,0],"6":[0,2],"7":[2,2]}}
+,"C:\\src\\creatorkit\\powercat-code-components\\SearchBox\\SearchBox\\components\\SearchBox.tsx": {"path":"C:\\src\\creatorkit\\powercat-code-components\\SearchBox\\SearchBox\\components\\SearchBox.tsx","statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":1,"column":31}},"1":{"start":{"line":2,"column":0},"end":{"line":2,"column":29}},"2":{"start":{"line":3,"column":0},"end":{"line":3,"column":null}},"3":{"start":{"line":11,"column":23},"end":{"line":36,"column":1}},"4":{"start":{"line":16,"column":6},"end":{"line":16,"column":11}},"5":{"start":{"line":18,"column":16},"end":{"line":25,"column":17}},"6":{"start":{"line":19,"column":4},"end":{"line":24,"column":null}},"7":{"start":{"line":20,"column":6},"end":{"line":20,"column":89}},"8":{"start":{"line":27,"column":2},"end":{"line":35,"column":4}},"9":{"start":{"line":31,"column":30},"end":{"line":31,"column":63}},"10":{"start":{"line":39,"column":13},"end":{"line":39,"column":54}}},"fnMap":{"0":{"name":"(anonymous_6)","decl":{"start":{"line":11,"column":23},"end":{"line":11,"column":24}},"loc":{"start":{"line":11,"column":59},"end":{"line":36,"column":1}}},"1":{"name":"(anonymous_7)","decl":{"start":{"line":18,"column":30},"end":{"line":18,"column":33}},"loc":{"start":{"line":18,"column":35},"end":{"line":25,"column":3}}},"2":{"name":"(anonymous_8)","decl":{"start":{"line":31,"column":18},"end":{"line":31,"column":26}},"loc":{"start":{"line":31,"column":30},"end":{"line":31,"column":63}}}},"branchMap":{"0":{"loc":{"start":{"line":20,"column":13},"end":{"line":20,"column":88}},"type":"cond-expr","locations":[{"start":{"line":20,"column":25},"end":{"line":20,"column":76}},{"start":{"line":20,"column":79},"end":{"line":20,"column":88}}]},"1":{"loc":{"start":{"line":31,"column":40},"end":{"line":31,"column":62}},"type":"cond-expr","locations":[{"start":{"line":31,"column":48},"end":{"line":31,"column":50}},{"start":{"line":31,"column":40},"end":{"line":31,"column":62}}]},"2":{"loc":{"start":{"line":31,"column":40},"end":{"line":31,"column":50}},"type":"binary-expr","locations":[{"start":{"line":31,"column":40},"end":{"line":31,"column":50}},{"start":{"line":31,"column":40},"end":{"line":31,"column":50}}]}},"s":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":0,"10":1},"f":{"0":1,"1":1,"2":0},"b":{"0":[1,0],"1":[0,0],"2":[0,0]}}
+}