@techstack/font-picker-react 1.3.245 → 1.3.246

package/dist/font-picker-react.cjs.development.js

@@ -40,7 +40,6 @@ function getFontId(fontFamily) {
   return fontFamily.replace(/\s+/g, '-').toLowerCase();
 }
 var FontPicker = /*#__PURE__*/function (_PureComponent) {
-  _inheritsLoose(FontPicker, _PureComponent);
   function FontPicker(props) {
     var _this;
     _this = _PureComponent.call(this, props) || this;
@@ -226,6 +225,7 @@ var FontPicker = /*#__PURE__*/function (_PureComponent) {
     _this.fontManager = new fontManager.FontManager(apiKey, _activeFontFamily, options, _onChange);
     return _this;
   }
+  _inheritsLoose(FontPicker, _PureComponent);
   return FontPicker;
 }(react.PureComponent);
 FontPicker.defaultProps = {

package/dist/font-picker-react.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"font-picker-react.cjs.development.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["FONT_FAMILY_DEFAULT","OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","getFontId","fontFamily","replace","toLowerCase","FontPicker","_PureComponent","_inheritsLoose","props","_this","call","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","apiKey","options","FontManager","PureComponent","defaultProps"],"mappings":"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"}
+{"version":3,"file":"font-picker-react.cjs.development.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["FONT_FAMILY_DEFAULT","OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","getFontId","fontFamily","replace","toLowerCase","FontPicker","_PureComponent","props","_this","call","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","apiKey","options","FontManager","_inheritsLoose","PureComponent","defaultProps"],"mappings":"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"}

package/dist/font-picker-react.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@samuelmeuli/font-manager");function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}var o={pickerId:"",families:[],categories:[],scripts:["latin"],variants:["regular"],filter:function(){return!0},limit:50,sort:"alphabet"},i=function(o){var i,a;function r(n){var i;(i=o.call(this,n)||this).fontManager=void 0,i.state={expanded:!1,loadingStatus:"loading"},i.componentDidMount=function(){i.fontManager.init().then((function(){i.setState({loadingStatus:"finished"})})).catch((function(t){i.setState({loadingStatus:"error"}),console.error("Error trying to fetch the list of available fonts"),console.error(t)}))},i.componentDidUpdate=function(t){var e=i.props,n=e.activeFontFamily,o=e.onChange;n!==t.activeFontFamily&&i.setActiveFontFamily(n),o!==t.onChange&&i.fontManager.setOnChange(o)},i.onClose=function(t){for(var e=t.target,n=document.getElementById("font-picker"+i.fontManager.selectorSuffix);;){if(e===n)return;if(!e.parentNode)return void i.toggleExpanded();e=e.parentNode}},i.onSelection=function(t){var e=t.target.textContent;if(!e)throw Error("Missing font family in clicked font button");i.setActiveFontFamily(e),i.toggleExpanded()},i.setActiveFontFamily=function(t){i.fontManager.setActiveFont(t)},i.generateFontList=function(e){var n=i.props.activeFontFamily;return"finished"!==i.state.loadingStatus?t.jsx("div",{}):t.jsx("ul",{className:"font-list",children:e.map((function(e){var o=e.family===n,a=e.family.replace(/\s+/g,"-").toLowerCase();return t.jsx("li",{className:"font-list-item",children:t.jsx("button",{type:"button",id:"font-button-"+a+i.fontManager.selectorSuffix,className:"font-button "+(o?"active-font":""),onClick:i.onSelection,onKeyPress:i.onSelection,children:e.family})},a)}))})},i.toggleExpanded=function(){i.state.expanded?(i.setState({expanded:!1}),document.removeEventListener("click",i.onClose)):(i.setState({expanded:!0}),document.addEventListener("click",i.onClose))},i.render=function(){var e=i.props,n=e.activeFontFamily,o=e.sort,a=i.state,r=a.expanded,s=a.loadingStatus,c=Array.from(i.fontManager.getFonts().values());return"alphabet"===o&&c.sort((function(t,e){return t.family.localeCompare(e.family)})),t.jsxs("div",{id:"font-picker"+i.fontManager.selectorSuffix,className:r?"expanded":"",children:[t.jsxs("button",{type:"button",className:"dropdown-button",onClick:i.toggleExpanded,onKeyPress:i.toggleExpanded,children:[t.jsx("p",{className:"dropdown-font-family",children:n}),t.jsx("p",{className:"dropdown-icon "+s})]}),"finished"===s&&i.generateFontList(c)]})};var a=i.props;return i.fontManager=new e.FontManager(a.apiKey,a.activeFontFamily,{pickerId:a.pickerId,families:a.families,categories:a.categories,scripts:a.scripts,variants:a.variants,filter:a.filter,limit:a.limit,sort:a.sort},a.onChange),i}return a=o,(i=r).prototype=Object.create(a.prototype),i.prototype.constructor=i,n(i,a),r}(require("react").PureComponent);i.defaultProps={activeFontFamily:"Open Sans",onChange:function(){},pickerId:o.pickerId,families:o.families,categories:o.categories,scripts:o.scripts,variants:o.variants,filter:o.filter,limit:o.limit,sort:o.sort},exports.default=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@samuelmeuli/font-manager");function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}var o={pickerId:"",families:[],categories:[],scripts:["latin"],variants:["regular"],filter:function(){return!0},limit:50,sort:"alphabet"},i=function(o){function i(n){var i;(i=o.call(this,n)||this).fontManager=void 0,i.state={expanded:!1,loadingStatus:"loading"},i.componentDidMount=function(){i.fontManager.init().then((function(){i.setState({loadingStatus:"finished"})})).catch((function(t){i.setState({loadingStatus:"error"}),console.error("Error trying to fetch the list of available fonts"),console.error(t)}))},i.componentDidUpdate=function(t){var e=i.props,n=e.activeFontFamily,o=e.onChange;n!==t.activeFontFamily&&i.setActiveFontFamily(n),o!==t.onChange&&i.fontManager.setOnChange(o)},i.onClose=function(t){for(var e=t.target,n=document.getElementById("font-picker"+i.fontManager.selectorSuffix);;){if(e===n)return;if(!e.parentNode)return void i.toggleExpanded();e=e.parentNode}},i.onSelection=function(t){var e=t.target.textContent;if(!e)throw Error("Missing font family in clicked font button");i.setActiveFontFamily(e),i.toggleExpanded()},i.setActiveFontFamily=function(t){i.fontManager.setActiveFont(t)},i.generateFontList=function(e){var n=i.props.activeFontFamily;return"finished"!==i.state.loadingStatus?t.jsx("div",{}):t.jsx("ul",{className:"font-list",children:e.map((function(e){var o=e.family===n,a=e.family.replace(/\s+/g,"-").toLowerCase();return t.jsx("li",{className:"font-list-item",children:t.jsx("button",{type:"button",id:"font-button-"+a+i.fontManager.selectorSuffix,className:"font-button "+(o?"active-font":""),onClick:i.onSelection,onKeyPress:i.onSelection,children:e.family})},a)}))})},i.toggleExpanded=function(){i.state.expanded?(i.setState({expanded:!1}),document.removeEventListener("click",i.onClose)):(i.setState({expanded:!0}),document.addEventListener("click",i.onClose))},i.render=function(){var e=i.props,n=e.activeFontFamily,o=e.sort,a=i.state,r=a.expanded,s=a.loadingStatus,c=Array.from(i.fontManager.getFonts().values());return"alphabet"===o&&c.sort((function(t,e){return t.family.localeCompare(e.family)})),t.jsxs("div",{id:"font-picker"+i.fontManager.selectorSuffix,className:r?"expanded":"",children:[t.jsxs("button",{type:"button",className:"dropdown-button",onClick:i.toggleExpanded,onKeyPress:i.toggleExpanded,children:[t.jsx("p",{className:"dropdown-font-family",children:n}),t.jsx("p",{className:"dropdown-icon "+s})]}),"finished"===s&&i.generateFontList(c)]})};var a=i.props;return i.fontManager=new e.FontManager(a.apiKey,a.activeFontFamily,{pickerId:a.pickerId,families:a.families,categories:a.categories,scripts:a.scripts,variants:a.variants,filter:a.filter,limit:a.limit,sort:a.sort},a.onChange),i}var a,r;return r=o,(a=i).prototype=Object.create(r.prototype),a.prototype.constructor=a,n(a,r),i}(require("react").PureComponent);i.defaultProps={activeFontFamily:"Open Sans",onChange:function(){},pickerId:o.pickerId,families:o.families,categories:o.categories,scripts:o.scripts,variants:o.variants,filter:o.filter,limit:o.limit,sort:o.sort},exports.default=i;
 //# sourceMappingURL=font-picker-react.cjs.production.min.js.map

package/dist/font-picker-react.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"font-picker-react.cjs.production.min.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","FontPicker","_PureComponent","props","_this","call","this","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","replace","toLowerCase","jsx","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","FontManager","apiKey","defaultProps"],"mappings":"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"}
+{"version":3,"file":"font-picker-react.cjs.production.min.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","FontPicker","_PureComponent","props","_this","call","this","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","replace","toLowerCase","jsx","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","FontManager","apiKey","defaultProps"],"mappings":"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"}

package/dist/font-picker-react.esm.js

@@ -36,7 +36,6 @@ function getFontId(fontFamily) {
   return fontFamily.replace(/\s+/g, '-').toLowerCase();
 }
 var FontPicker = /*#__PURE__*/function (_PureComponent) {
-  _inheritsLoose(FontPicker, _PureComponent);
   function FontPicker(props) {
     var _this;
     _this = _PureComponent.call(this, props) || this;
@@ -222,6 +221,7 @@ var FontPicker = /*#__PURE__*/function (_PureComponent) {
     _this.fontManager = new FontManager(apiKey, _activeFontFamily, options, _onChange);
     return _this;
   }
+  _inheritsLoose(FontPicker, _PureComponent);
   return FontPicker;
 }(PureComponent);
 FontPicker.defaultProps = {

package/dist/font-picker-react.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"font-picker-react.esm.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["FONT_FAMILY_DEFAULT","OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","getFontId","fontFamily","replace","toLowerCase","FontPicker","_PureComponent","_inheritsLoose","props","_this","call","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","apiKey","options","FontManager","PureComponent","defaultProps"],"mappings":"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"}
+{"version":3,"file":"font-picker-react.esm.js","sources":["../src/types.ts","../src/FontPicker.tsx"],"sourcesContent":["export type Category =\n  | 'sans-serif'\n  | 'serif'\n  | 'display'\n  | 'handwriting'\n  | 'monospace';\nexport type Script =\n  | 'arabic'\n  | 'bengali'\n  | 'chinese-simplified'\n  | 'chinese-traditional'\n  | 'cyrillic'\n  | 'cyrillic-ext'\n  | 'devanagari'\n  | 'greek'\n  | 'greek-ext'\n  | 'gujarati'\n  | 'gurmukhi'\n  | 'hebrew'\n  | 'japanese'\n  | 'kannada'\n  | 'khmer'\n  | 'korean'\n  | 'latin'\n  | 'latin-ext'\n  | 'malayalam'\n  | 'myanmar'\n  | 'oriya'\n  | 'sinhala'\n  | 'tamil'\n  | '​telugu'\n  | 'thai'\n  | 'vietnamese';\nexport type SortOption = 'alphabet' | 'popularity';\nexport type Variant =\n  | '100'\n  | '100italic'\n  | '200'\n  | '200italic'\n  | '300'\n  | '300italic'\n  | 'regular'\n  | 'italic'\n  | '500'\n  | '500italic'\n  | '600'\n  | '600italic'\n  | '700'\n  | '700italic'\n  | '800'\n  | '800italic'\n  | '900'\n  | '900italic';\nexport interface Font {\n  family: string;\n  id: string;\n  category: Category;\n  scripts: Script[];\n  variants: Variant[];\n  kind?: string;\n  version?: string;\n  lastModified?: string;\n  files?: Record<Variant, string>;\n}\nexport const FONT_FAMILY_DEFAULT = 'Open Sans';\nexport const OPTIONS_DEFAULTS = {\n  pickerId: '',\n  families: [],\n  categories: [],\n  scripts: ['latin'],\n  variants: ['regular'],\n  filter: () => {\n    return true;\n  },\n  limit: 50,\n  sort: 'alphabet',\n};\nexport type FontList = Map<string, Font>;\nexport interface Options {\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n","import { FontManager } from '@samuelmeuli/font-manager';\nimport React, { KeyboardEvent, PureComponent, ReactElement } from 'react';\n\nimport {\n  Category,\n  Font,\n  FONT_FAMILY_DEFAULT,\n  Options,\n  OPTIONS_DEFAULTS,\n  Script,\n  SortOption,\n  Variant,\n} from './types';\n\ntype LoadingStatus = 'loading' | 'finished' | 'error';\n\nexport interface Props {\n  // Required props\n  apiKey: string;\n\n  // Optional props\n  activeFontFamily: string;\n  onChange: (font: Font) => void;\n  pickerId: string;\n  families: string[];\n  categories: Category[];\n  scripts: Script[];\n  variants: Variant[];\n  filter: (font: Font) => boolean;\n  limit: number;\n  sort: SortOption;\n}\n\ninterface State {\n  expanded: boolean;\n  loadingStatus: LoadingStatus;\n}\n\n/**\n * Return the fontId based on the provided font family\n */\nfunction getFontId(fontFamily: string): string {\n  return fontFamily.replace(/\\s+/g, '-').toLowerCase();\n}\n\nexport default class FontPicker extends PureComponent<Props, State> {\n  // Instance of the FontManager class used for managing, downloading and applying fonts\n  fontManager: FontManager;\n\n  static defaultProps = {\n    activeFontFamily: FONT_FAMILY_DEFAULT,\n    onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function\n    pickerId: OPTIONS_DEFAULTS.pickerId,\n    families: OPTIONS_DEFAULTS.families,\n    categories: OPTIONS_DEFAULTS.categories,\n    scripts: OPTIONS_DEFAULTS.scripts,\n    variants: OPTIONS_DEFAULTS.variants,\n    filter: OPTIONS_DEFAULTS.filter,\n    limit: OPTIONS_DEFAULTS.limit,\n    sort: OPTIONS_DEFAULTS.sort,\n  };\n\n  state: Readonly<State> = {\n    expanded: false,\n    loadingStatus: 'loading',\n  };\n\n  constructor(props: Props) {\n    super(props);\n\n    const {\n      apiKey,\n      activeFontFamily,\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n      onChange,\n    } = this.props;\n\n    const options: Options = {\n      pickerId,\n      families,\n      categories,\n      scripts,\n      variants,\n      filter,\n      limit,\n      sort,\n    };\n\n    // Initialize FontManager object\n    this.fontManager = new FontManager(\n      apiKey,\n      activeFontFamily,\n      options,\n      onChange\n    );\n  }\n\n  componentDidMount = (): void => {\n    // Generate font list\n    this.fontManager\n      .init()\n      .then((): void => {\n        this.setState({\n          loadingStatus: 'finished',\n        });\n      })\n      .catch((err: Error): void => {\n        // On error: Log error message\n        this.setState({\n          loadingStatus: 'error',\n        });\n        console.error('Error trying to fetch the list of available fonts');\n        console.error(err);\n      });\n  };\n\n  /**\n   * After every component update, check whether the activeFontFamily prop has changed. If so,\n   * call this.setActiveFontFamily with the new font\n   */\n  componentDidUpdate = (prevProps: Props): void => {\n    const { activeFontFamily, onChange } = this.props;\n\n    // If active font prop has changed: Update font family in font manager and component state\n    if (activeFontFamily !== prevProps.activeFontFamily) {\n      this.setActiveFontFamily(activeFontFamily);\n    }\n\n    // If onChange prop has changed: Update onChange function in font manager\n    if (onChange !== prevProps.onChange) {\n      this.fontManager.setOnChange(onChange);\n    }\n  };\n\n  /**\n   * EventListener for closing the font picker when clicking anywhere outside it\n   */\n  onClose = (e: MouseEvent): void => {\n    let targetEl = e.target as Node; // Clicked element\n    const fontPickerEl = document.getElementById(\n      `font-picker${this.fontManager.selectorSuffix}`\n    );\n\n    // eslint-disable-next-line no-constant-condition\n    while (true) {\n      if (targetEl === fontPickerEl) {\n        // Click inside font picker: Exit\n        return;\n      }\n      if (targetEl.parentNode) {\n        // Click outside font picker: Move up the DOM\n        targetEl = targetEl.parentNode;\n      } else {\n        // DOM root is reached: Toggle picker, exit\n        this.toggleExpanded();\n        return;\n      }\n    }\n  };\n\n  /**\n   * Update the active font on font button click\n   */\n  onSelection = (e: React.MouseEvent | KeyboardEvent): void => {\n    const target = e.target as HTMLButtonElement;\n    const activeFontFamily = target.textContent;\n    if (!activeFontFamily) {\n      throw Error(`Missing font family in clicked font button`);\n    }\n    this.setActiveFontFamily(activeFontFamily);\n    this.toggleExpanded();\n  };\n\n  /**\n   * Set the specified font as the active font in the fontManager and update activeFontFamily in the\n   * state\n   */\n  setActiveFontFamily = (activeFontFamily: string): void => {\n    this.fontManager.setActiveFont(activeFontFamily);\n  };\n\n  /**\n   * Generate <ul> with all font families\n   */\n  generateFontList = (fonts: Font[]): ReactElement => {\n    const { activeFontFamily } = this.props;\n    const { loadingStatus } = this.state;\n\n    if (loadingStatus !== 'finished') {\n      return <div />;\n    }\n    return (\n      <ul className='font-list'>\n        {fonts.map((font): ReactElement => {\n          const isActive = font.family === activeFontFamily;\n          const fontId = getFontId(font.family);\n          return (\n            <li key={fontId} className='font-list-item'>\n              <button\n                type='button'\n                id={`font-button-${fontId}${this.fontManager.selectorSuffix}`}\n                className={`font-button ${isActive ? 'active-font' : ''}`}\n                onClick={this.onSelection}\n                onKeyPress={this.onSelection}\n              >\n                {font.family}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  /**\n   * Expand/collapse the picker's font list\n   */\n  toggleExpanded = (): void => {\n    const { expanded } = this.state;\n\n    if (expanded) {\n      this.setState({\n        expanded: false,\n      });\n      document.removeEventListener('click', this.onClose);\n    } else {\n      this.setState({\n        expanded: true,\n      });\n      document.addEventListener('click', this.onClose);\n    }\n  };\n\n  render = (): ReactElement => {\n    const { activeFontFamily, sort } = this.props;\n    const { expanded, loadingStatus } = this.state;\n\n    // Extract and sort font list\n    const fonts = Array.from(this.fontManager.getFonts().values());\n    if (sort === 'alphabet') {\n      fonts.sort((font1: Font, font2: Font): number =>\n        font1.family.localeCompare(font2.family)\n      );\n    }\n\n    // Render font picker button and attach font list to it\n    return (\n      <div\n        id={`font-picker${this.fontManager.selectorSuffix}`}\n        className={expanded ? 'expanded' : ''}\n      >\n        <button\n          type='button'\n          className='dropdown-button'\n          onClick={this.toggleExpanded}\n          onKeyPress={this.toggleExpanded}\n        >\n          <p className='dropdown-font-family'>{activeFontFamily}</p>\n          <p className={`dropdown-icon ${loadingStatus}`} />\n        </button>\n        {loadingStatus === 'finished' && this.generateFontList(fonts)}\n      </div>\n    );\n  };\n}\n"],"names":["FONT_FAMILY_DEFAULT","OPTIONS_DEFAULTS","pickerId","families","categories","scripts","variants","filter","limit","sort","getFontId","fontFamily","replace","toLowerCase","FontPicker","_PureComponent","props","_this","call","fontManager","state","expanded","loadingStatus","componentDidMount","init","then","setState","err","console","error","componentDidUpdate","prevProps","_this$props","activeFontFamily","onChange","setActiveFontFamily","setOnChange","onClose","e","targetEl","target","fontPickerEl","document","getElementById","selectorSuffix","parentNode","toggleExpanded","onSelection","textContent","Error","setActiveFont","generateFontList","fonts","_jsx","className","children","map","font","isActive","family","fontId","type","id","onClick","onKeyPress","removeEventListener","addEventListener","render","_this$props2","_this$state","Array","from","getFonts","values","font1","font2","localeCompare","_jsxs","_this$props3","apiKey","options","FontManager","_inheritsLoose","PureComponent","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAgEO,IAAMA,mBAAmB,GAAG,WAAW,CAAA;AACvC,IAAMC,gBAAgB,GAAG;AAC9BC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,UAAU,EAAE,EAAE;EACdC,OAAO,EAAE,CAAC,OAAO,CAAC;EAClBC,QAAQ,EAAE,CAAC,SAAS,CAAC;EACrBC,MAAM,EAAE,SAAAA,MAAAA,GAAK;AACX,IAAA,OAAO,IAAI,CAAA;GACZ;AACDC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,IAAI,EAAE,UAAA;CACP;;ACtCD;;AAEG;AACH,SAASC,SAASA,CAACC,UAAkB,EAAA;EACnC,OAAOA,UAAU,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAACC,WAAW,EAAE,CAAA;AACtD,CAAA;AAEqBC,IAAAA,UAAW,0BAAAC,cAAA,EAAA;EAsB9B,SAAAD,UAAAA,CAAYE,KAAY,EAAA;AAAA,IAAA,IAAAC,KAAA,CAAA;AACtBA,IAAAA,KAAA,GAAAF,cAAA,CAAAG,IAAA,CAAA,IAAA,EAAMF,KAAK,CAAC,IAAA,IAAA,CAAA;AAtBd;AAAAC,IAAAA,KAAA,CACAE,WAAW,GAAA,KAAA,CAAA,CAAA;IAAAF,KAAA,CAeXG,KAAK,GAAoB;AACvBC,MAAAA,QAAQ,EAAE,KAAK;AACfC,MAAAA,aAAa,EAAE,SAAA;KAChB,CAAA;IAAAL,KAAA,CAuCDM,iBAAiB,GAAG,YAAW;AAC7B;MACAN,KAAA,CAAKE,WAAW,CACbK,IAAI,EAAE,CACNC,IAAI,CAAC,YAAW;QACfR,KAAA,CAAKS,QAAQ,CAAC;AACZJ,UAAAA,aAAa,EAAE,UAAA;AAChB,SAAA,CAAC,CAAA;AACJ,OAAC,CAAC,CAAA,OAAA,CACI,CAAC,UAACK,GAAU,EAAU;AAC1B;QACAV,KAAA,CAAKS,QAAQ,CAAC;AACZJ,UAAAA,aAAa,EAAE,OAAA;AAChB,SAAA,CAAC,CAAA;AACFM,QAAAA,OAAO,CAACC,KAAK,CAAC,mDAAmD,CAAC,CAAA;AAClED,QAAAA,OAAO,CAACC,KAAK,CAACF,GAAG,CAAC,CAAA;AACpB,OAAC,CAAC,CAAA;KACL,CAAA;AAED;;;AAGG;AAHHV,IAAAA,KAAA,CAIAa,kBAAkB,GAAG,UAACC,SAAgB,EAAU;AAC9C,MAAA,IAAAC,WAAA,GAAuCf,KAAA,CAAKD,KAAK;QAAzCiB,gBAAgB,GAAAD,WAAA,CAAhBC,gBAAgB;QAAEC,QAAQ,GAAAF,WAAA,CAARE,QAAQ,CAAA;AAElC;AACA,MAAA,IAAID,gBAAgB,KAAKF,SAAS,CAACE,gBAAgB,EAAE;AACnDhB,QAAAA,KAAA,CAAKkB,mBAAmB,CAACF,gBAAgB,CAAC,CAAA;AAC5C,OAAA;AAEA;AACA,MAAA,IAAIC,QAAQ,KAAKH,SAAS,CAACG,QAAQ,EAAE;AACnCjB,QAAAA,KAAA,CAAKE,WAAW,CAACiB,WAAW,CAACF,QAAQ,CAAC,CAAA;AACxC,OAAA;KACD,CAAA;AAED;;AAEG;AAFHjB,IAAAA,KAAA,CAGAoB,OAAO,GAAG,UAACC,CAAa,EAAU;AAChC,MAAA,IAAIC,QAAQ,GAAGD,CAAC,CAACE,MAAc,CAAC;MAChC,IAAMC,YAAY,GAAGC,QAAQ,CAACC,cAAc,CAC5B1B,aAAAA,GAAAA,KAAA,CAAKE,WAAW,CAACyB,cAAgB,CAChD,CAAA;AAED;AACA,MAAA,OAAO,IAAI,EAAE;QACX,IAAIL,QAAQ,KAAKE,YAAY,EAAE;AAC7B;AACA,UAAA,OAAA;AACF,SAAA;QACA,IAAIF,QAAQ,CAACM,UAAU,EAAE;AACvB;UACAN,QAAQ,GAAGA,QAAQ,CAACM,UAAU,CAAA;AAChC,SAAC,MAAM;AACL;UACA5B,KAAA,CAAK6B,cAAc,EAAE,CAAA;AACrB,UAAA,OAAA;AACF,SAAA;AACF,OAAA;KACD,CAAA;AAED;;AAEG;AAFH7B,IAAAA,KAAA,CAGA8B,WAAW,GAAG,UAACT,CAAmC,EAAU;AAC1D,MAAA,IAAME,MAAM,GAAGF,CAAC,CAACE,MAA2B,CAAA;AAC5C,MAAA,IAAMP,gBAAgB,GAAGO,MAAM,CAACQ,WAAW,CAAA;MAC3C,IAAI,CAACf,gBAAgB,EAAE;QACrB,MAAMgB,KAAK,6CAA6C,CAAC,CAAA;AAC3D,OAAA;AACAhC,MAAAA,KAAA,CAAKkB,mBAAmB,CAACF,gBAAgB,CAAC,CAAA;MAC1ChB,KAAA,CAAK6B,cAAc,EAAE,CAAA;KACtB,CAAA;AAED;;;AAGG;AAHH7B,IAAAA,KAAA,CAIAkB,mBAAmB,GAAG,UAACF,gBAAwB,EAAU;AACvDhB,MAAAA,KAAA,CAAKE,WAAW,CAAC+B,aAAa,CAACjB,gBAAgB,CAAC,CAAA;KACjD,CAAA;AAED;;AAEG;AAFHhB,IAAAA,KAAA,CAGAkC,gBAAgB,GAAG,UAACC,KAAa,EAAkB;AACjD,MAAA,IAAQnB,gBAAgB,GAAKhB,KAAA,CAAKD,KAAK,CAA/BiB,gBAAgB,CAAA;AACxB,MAAA,IAAQX,aAAa,GAAKL,KAAA,CAAKG,KAAK,CAA5BE,aAAa,CAAA;MAErB,IAAIA,aAAa,KAAK,UAAU,EAAE;AAChC,QAAA,OAAO+B,cAAO,CAAA;AAChB,OAAA;MACA,OACEA,GAAA,CAAA,IAAA,EAAA;AAAIC,QAAAA,SAAS,EAAC,WAAW;AAAAC,QAAAA,QAAA,EACtBH,KAAK,CAACI,GAAG,CAAC,UAACC,IAAI,EAAkB;AAChC,UAAA,IAAMC,QAAQ,GAAGD,IAAI,CAACE,MAAM,KAAK1B,gBAAgB,CAAA;AACjD,UAAA,IAAM2B,MAAM,GAAGlD,SAAS,CAAC+C,IAAI,CAACE,MAAM,CAAC,CAAA;UACrC,OACEN,GAAiB,CAAA,IAAA,EAAA;AAAAC,YAAAA,SAAS,EAAC,gBAAgB;AACzCC,YAAAA,QAAA,EAAAF,GAAA,CAAA,QAAA,EAAA;AACEQ,cAAAA,IAAI,EAAC,QAAQ;AACbC,cAAAA,EAAE,mBAAiBF,MAAM,GAAG3C,KAAA,CAAKE,WAAW,CAACyB,cAAgB;AAC7DU,cAAAA,SAAS,oBAAiBI,QAAQ,GAAG,aAAa,GAAG,EAAE,CAAE;cACzDK,OAAO,EAAE9C,KAAA,CAAK8B,WAAW;cACzBiB,UAAU,EAAE/C,KAAA,CAAK8B,WAAW;cAAAQ,QAAA,EAE3BE,IAAI,CAACE,MAAAA;aAAM,CAAA;WARP,EAAAC,MAAM,CAUV,CAAA;SAER,CAAA;AACE,OAAA,CAAA,CAAA;KAER,CAAA;AAED;;AAEG;IAFH3C,KAAA,CAGA6B,cAAc,GAAG,YAAW;AAC1B,MAAA,IAAQzB,QAAQ,GAAKJ,KAAA,CAAKG,KAAK,CAAvBC,QAAQ,CAAA;AAEhB,MAAA,IAAIA,QAAQ,EAAE;QACZJ,KAAA,CAAKS,QAAQ,CAAC;AACZL,UAAAA,QAAQ,EAAE,KAAA;AACX,SAAA,CAAC,CAAA;QACFqB,QAAQ,CAACuB,mBAAmB,CAAC,OAAO,EAAEhD,KAAA,CAAKoB,OAAO,CAAC,CAAA;AACrD,OAAC,MAAM;QACLpB,KAAA,CAAKS,QAAQ,CAAC;AACZL,UAAAA,QAAQ,EAAE,IAAA;AACX,SAAA,CAAC,CAAA;QACFqB,QAAQ,CAACwB,gBAAgB,CAAC,OAAO,EAAEjD,KAAA,CAAKoB,OAAO,CAAC,CAAA;AAClD,OAAA;KACD,CAAA;IAAApB,KAAA,CAEDkD,MAAM,GAAG,YAAmB;AAC1B,MAAA,IAAAC,YAAA,GAAmCnD,KAAA,CAAKD,KAAK;QAArCiB,gBAAgB,GAAAmC,YAAA,CAAhBnC,gBAAgB;QAAExB,IAAI,GAAA2D,YAAA,CAAJ3D,IAAI,CAAA;AAC9B,MAAA,IAAA4D,WAAA,GAAoCpD,KAAA,CAAKG,KAAK;QAAtCC,QAAQ,GAAAgD,WAAA,CAARhD,QAAQ;QAAEC,aAAa,GAAA+C,WAAA,CAAb/C,aAAa,CAAA;AAE/B;AACA,MAAA,IAAM8B,KAAK,GAAGkB,KAAK,CAACC,IAAI,CAACtD,KAAA,CAAKE,WAAW,CAACqD,QAAQ,EAAE,CAACC,MAAM,EAAE,CAAC,CAAA;MAC9D,IAAIhE,IAAI,KAAK,UAAU,EAAE;AACvB2C,QAAAA,KAAK,CAAC3C,IAAI,CAAC,UAACiE,KAAW,EAAEC,KAAW,EAAA;UAAA,OAClCD,KAAK,CAACf,MAAM,CAACiB,aAAa,CAACD,KAAK,CAAChB,MAAM,CAAC,CAAA;SACzC,CAAA,CAAA;AACH,OAAA;AAEA;MACA,OACEkB,IAAA,CAAA,KAAA,EAAA;AACEf,QAAAA,EAAE,EAAgB7C,aAAAA,GAAAA,KAAA,CAAKE,WAAW,CAACyB,cAAgB;AACnDU,QAAAA,SAAS,EAAEjC,QAAQ,GAAG,UAAU,GAAG,EAAE;AAAAkC,QAAAA,QAAA,EAAA,CAErCsB;AACEhB,UAAAA,IAAI,EAAC,QAAQ;AACbP,UAAAA,SAAS,EAAC,iBAAiB;UAC3BS,OAAO,EAAE9C,KAAA,CAAK6B,cAAc;UAC5BkB,UAAU,EAAE/C,KAAA,CAAK6B,cAAc;AAE/BS,UAAAA,QAAA,EAAA,CAAAF,GAAA,CAAA,GAAA,EAAA;AAAGC,YAAAA,SAAS,EAAC,sBAAsB;AAAEC,YAAAA,QAAA,EAAAtB,gBAAAA;AAAqB,WAAA,CAAA,EAC1DoB;AAAGC,YAAAA,SAAS,EAAmBhC,gBAAAA,GAAAA,aAAAA;AAAmB,WAAA,CAAA,CAAA;SAAA,CAC3C,EACRA,aAAa,KAAK,UAAU,IAAIL,KAAA,CAAKkC,gBAAgB,CAACC,KAAK,CAAC,CAAA;AAAA,OAAA,CACzD,CAAA;KAET,CAAA;AAxMC,IAAA,IAAA0B,YAAA,GAYI7D,KAAA,CAAKD,KAAK;MAXZ+D,MAAM,GAAAD,YAAA,CAANC,MAAM;MACN9C,iBAAgB,GAAA6C,YAAA,CAAhB7C,gBAAgB;MAChB/B,QAAQ,GAAA4E,YAAA,CAAR5E,QAAQ;MACRC,QAAQ,GAAA2E,YAAA,CAAR3E,QAAQ;MACRC,UAAU,GAAA0E,YAAA,CAAV1E,UAAU;MACVC,OAAO,GAAAyE,YAAA,CAAPzE,OAAO;MACPC,QAAQ,GAAAwE,YAAA,CAARxE,QAAQ;MACRC,MAAM,GAAAuE,YAAA,CAANvE,MAAM;MACNC,KAAK,GAAAsE,YAAA,CAALtE,KAAK;MACLC,KAAI,GAAAqE,YAAA,CAAJrE,IAAI;MACJyB,SAAQ,GAAA4C,YAAA,CAAR5C,QAAQ,CAAA;AAGV,IAAA,IAAM8C,OAAO,GAAY;AACvB9E,MAAAA,QAAQ,EAARA,QAAQ;AACRC,MAAAA,QAAQ,EAARA,QAAQ;AACRC,MAAAA,UAAU,EAAVA,UAAU;AACVC,MAAAA,OAAO,EAAPA,OAAO;AACPC,MAAAA,QAAQ,EAARA,QAAQ;AACRC,MAAAA,MAAM,EAANA,MAAM;AACNC,MAAAA,KAAK,EAALA,KAAK;AACLC,MAAAA,IAAI,EAAJA,KAAAA;KACD,CAAA;AAED;AACAQ,IAAAA,KAAA,CAAKE,WAAW,GAAG,IAAI8D,WAAW,CAChCF,MAAM,EACN9C,iBAAgB,EAChB+C,OAAO,EACP9C,SAAQ,CACT,CAAA;AAAC,IAAA,OAAAjB,KAAA,CAAA;AACJ,GAAA;EAACiE,cAAA,CAAApE,UAAA,EAAAC,cAAA,CAAA,CAAA;AAAA,EAAA,OAAAD,UAAA,CAAA;AAAA,CAAA,CAzDqCqE,aAA2B,EAAA;AAA9CrE,UAAW,CAIvBsE,YAAY,GAAG;AACpBnD,EAAAA,gBAAgB,EAAEjC,mBAAmB;AACrCkC,EAAAA,QAAQ,EAAE,SAAAA,QAAA,GAAa,EAAC;AAAE;EAC1BhC,QAAQ,EAAED,gBAAgB,CAACC,QAAQ;EACnCC,QAAQ,EAAEF,gBAAgB,CAACE,QAAQ;EACnCC,UAAU,EAAEH,gBAAgB,CAACG,UAAU;EACvCC,OAAO,EAAEJ,gBAAgB,CAACI,OAAO;EACjCC,QAAQ,EAAEL,gBAAgB,CAACK,QAAQ;EACnCC,MAAM,EAAEN,gBAAgB,CAACM,MAAM;EAC/BC,KAAK,EAAEP,gBAAgB,CAACO,KAAK;EAC7BC,IAAI,EAAER,gBAAgB,CAACQ,IAAAA;CACxB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techstack/font-picker-react",
-  "version": "1.3.245",
+  "version": "1.3.246",
   "description": "Font selector component for Google Fonts",
   "type": "module",
   "module": "./dist/font-picker-react.esm.js",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@storybook/react": "7.6.17",
-    "@techstack/tcm-cli": "1.3.239",
+    "@techstack/tcm-cli": "1.3.240",
     "@types/node": "20.5.6",
     "@types/react": "18.2.67",
     "@typescript-eslint/eslint-plugin": "7.3.1",
@@ -51,5 +51,5 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "gitHead": "ea1c99ab7f49e7faefb53d78a44d148917698cb2"
+  "gitHead": "1785aac5b32f21447b1eadd53d42e4c24ebb266e"
 }