Added icons and exports

Author: patrikhellgren

docs/documentation/docs/controls/ModernTaxonomyPicker.md

@@ -156,7 +156,7 @@ You can also use the `TaxonomyTree` control separately to just render a stand-al
 
 ```TypeScript
       const taxonomyService = new SPTaxonomyService(props.context);
-      const [terms, setTerms] = React.useState<ITermInfo[]>();
+      const [terms, setTerms] = React.useState<ITermInfo[]>([]);
       const [currentTermStoreInfo, setCurrentTermStoreInfo] = React.useState<ITermStoreInfo>();
       const [currentTermSetInfo, setCurrentTermSetInfo] = React.useState<ITermSetInfo>();
       const [currentLanguageTag, setCurrentLanguageTag] = React.useState<string>("");
@@ -176,16 +176,21 @@ You can also use the `TaxonomyTree` control separately to just render a stand-al
           });
       }, []);
 
-      <TaxonomyTree
-        languageTag={currentLanguageTag}
-        onLoadMoreData={taxonomyService.getTerms}
-        pageSize={50}
-        setTerms={setTerms}
-        termSetInfo={currentTermSetInfo}
-        termStoreInfo={currentTermStoreInfo}
-        terms={terms}
-        onRenderActionButton={onRenderActionButton}
-      />
+      return (
+        {currentTermSetInfo && (  
+          <TaxonomyTree
+            languageTag={currentLanguageTag}
+            onLoadMoreData={taxonomyService.getTerms}
+            pageSize={50}
+            setTerms={setTerms}
+            termSetInfo={currentTermSetInfo}
+            termStoreInfo={currentTermStoreInfo}
+            terms={terms}
+            onRenderActionButton={onRenderActionButton}
+            hideDeprecatedTerms={false}
+            showIcons={true}
+          />
+        )}
 ```
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ModernTaxonomyPicker)

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -50,7 +50,7 @@ export interface IModernTaxonomyPickerProps {
   panelTitle: string;
   label: string;
   context: BaseComponentContext;
-  initialValues?: ITermInfo[];
+  initialValues?: Optional<ITermInfo, "childrenCount" | "createdDateTime" | "lastModifiedDateTime" | "descriptions" | "customSortOrder" | "properties" | "localProperties" | "isDeprecated" | "isAvailableForTagging" | "topicRequested">[];
   disabled?: boolean;
   required?: boolean;
   onChange?: (newValue?: ITermInfo[]) => void;

src/controls/modernTaxonomyPicker/index.ts

@@ -1,2 +1,6 @@
 export * from './ModernTaxonomyPicker';
-export * from './termItem/TermItem';
+export * from './modernTermPicker/index';
+export * from './taxonomyPanelContents/index';
+export * from './taxonomyTree/index';
+export * from './termItem/index';
+export * from '../../services/SPTaxonomyService';

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts

@@ -38,7 +38,7 @@ export interface ITermItemStyles {
   close: IStyle;
 }
 
-export interface ITermItemSuggestionProps extends React.AllHTMLAttributes<HTMLElement> {
+export interface ITermItemSuggestionElementProps extends React.AllHTMLAttributes<HTMLElement> {
   /** Additional CSS class(es) to apply to the TermItemSuggestion div element */
   className?: string;
 
@@ -49,8 +49,8 @@ export interface ITermItemSuggestionProps extends React.AllHTMLAttributes<HTMLEl
   theme?: ITheme;
 }
 
-export type ITermItemSuggestionStyleProps = Required<Pick<ITermItemSuggestionProps, 'theme'>> &
-  Pick<ITermItemSuggestionProps, 'className'> & {};
+export type ITermItemSuggestionStyleProps = Required<Pick<ITermItemSuggestionElementProps, 'theme'>> &
+  Pick<ITermItemSuggestionElementProps, 'className'> & {};
 
 export interface ITermItemSuggestionStyles {
   /** Refers to the text element of the TermItemSuggestion */

src/controls/modernTaxonomyPicker/modernTermPicker/index.ts

@@ -0,0 +1,2 @@
+export * from './ModernTermPicker';
+export * from './ModernTermPicker.types';

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx

@@ -112,6 +112,8 @@ export function TaxonomyPanelContents(props: ITaxonomyPanelContentsProps): React
         terms={terms}
         allowMultipleSelections={props.allowMultipleSelections}
         onRenderActionButton={props.onRenderActionButton}
+        hideDeprecatedTerms={true}
+        showIcons={false}
       />
     </div>
   );

src/controls/modernTaxonomyPicker/taxonomyTree/TaxonomyTree.module.scss

@@ -60,3 +60,8 @@
 .taxonomyItemHeader:hover .actionButtonContainer > *, .taxonomyItemHeader:focus .actionButtonContainer > *, .taxonomyItemHeader .actionButtonContainer:focus-within > * {
   opacity: 1;
 }
+
+.taxonomyItemIcon {
+  margin-inline-start: 8px;
+  margin-inline-end: 8px;
+}

src/controls/modernTaxonomyPicker/taxonomyTree/TaxonomyTree.tsx

@@ -4,6 +4,7 @@ import { Checkbox,
          css,
          FocusZone,
          FocusZoneDirection,
+         FontIcon,
          getRTLSafeKeyCode,
          GroupedList,
          GroupHeader,
@@ -55,6 +56,8 @@ export interface ITaxonomyTreeProps {
   terms: ITermInfo[];
   setTerms: React.Dispatch<React.SetStateAction<ITermInfo[]>>;
   selection?: Selection<any>;
+  hideDeprecatedTerms?: boolean;
+  showIcons?: boolean;
 }
 
 export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITaxonomyTreeProps> {
@@ -90,7 +93,7 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITax
     setGroups([rootGroup]);
     setGroupsLoading((prevGroupsLoading) => [...prevGroupsLoading, props.termSetInfo.id]);
     if (props.termSetInfo.childrenCount > 0) {
-      props.onLoadMoreData(Guid.parse(props.termSetInfo.id), props.anchorTermInfo ? Guid.parse(props.anchorTermInfo.id) : Guid.empty, '', true)
+      props.onLoadMoreData(Guid.parse(props.termSetInfo.id), props.anchorTermInfo ? Guid.parse(props.anchorTermInfo.id) : Guid.empty, '', props.hideDeprecatedTerms)
         .then((loadedTerms) => {
           const grps: IGroup[] = loadedTerms.value.map(term => {
             let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.languageTag && termLabel.isDefault === true));
@@ -151,7 +154,7 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITax
         setGroupsLoading((prevGroupsLoading) => [...prevGroupsLoading, group.key]);
         group.data.isLoading = true;
 
-        props.onLoadMoreData(Guid.parse(props.termSetInfo.id), Guid.parse(group.key), '', true)
+        props.onLoadMoreData(Guid.parse(props.termSetInfo.id), Guid.parse(group.key), '', props.hideDeprecatedTerms)
           .then((loadedTerms) => {
             const grps: IGroup[] = loadedTerms.value.map(term => {
               let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.languageTag && termLabel.isDefault === true));
@@ -225,6 +228,9 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITax
           direction={FocusZoneDirection.horizontal}
           className={styles.taxonomyItemFocusZone}
         >
+          {props.showIcons && (
+            <FontIcon iconName="Tag"  className={styles.taxonomyItemIcon} />
+          )}
           <Label styles={labelStyles}>{groupHeaderProps.group.name}</Label>
           <div className={styles.actionButtonContainer}>
             {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, props.anchorTermInfo)}
@@ -235,11 +241,15 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITax
 
     if (!props.selection) {
       const labelStyles: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles> = {root: {width: "100%", fontWeight: childIsSelected ? "bold" : "normal"}};
+      let taxonomyItemIconName: string = groupHeaderProps.group.data.term.isDeprecated ? "Blocked" : "Tag";
       return (
         <FocusZone
           direction={FocusZoneDirection.horizontal}
           className={styles.taxonomyItemFocusZone}
         >
+          {props.showIcons && (
+            <FontIcon iconName={taxonomyItemIconName} className={styles.taxonomyItemIcon} />
+          )}
           <Label styles={labelStyles}>{groupHeaderProps.group.name}</Label>
           <div className={styles.actionButtonContainer}>
             {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term)}
@@ -373,7 +383,7 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement<ITax
         <div className={styles.loadMoreContainer}>
           <Link onClick={() => {
             setGroupsLoading((prevGroupsLoading) => [...prevGroupsLoading, footerProps.group.key]);
-            props.onLoadMoreData(Guid.parse(props.termSetInfo.id), footerProps.group.key === props.termSetInfo.id ? Guid.empty : Guid.parse(footerProps.group.key), footerProps.group.data.skiptoken, true)
+            props.onLoadMoreData(Guid.parse(props.termSetInfo.id), footerProps.group.key === props.termSetInfo.id ? Guid.empty : Guid.parse(footerProps.group.key), footerProps.group.data.skiptoken, props.hideDeprecatedTerms)
               .then((loadedTerms) => {
                 const grps: IGroup[] = loadedTerms.value.map(term => {
                   let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.languageTag && termLabel.isDefault === true));

src/controls/modernTaxonomyPicker/taxonomyTree/index.ts

@@ -0,0 +1 @@
+export * from './TaxonomyTree';

src/controls/modernTaxonomyPicker/termItem/index.ts

@@ -0,0 +1,2 @@
+export * from './TermItem';
+export * from './TermItemSuggestion';