pds-dev-kit-web-test 0.2.36 → 0.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/README.md +2 -2
  2. package/dist/src/common/assets/icons/fill/LogoGoogle.d.ts +4 -0
  3. package/dist/src/common/assets/icons/fill/LogoGoogle.js +30 -0
  4. package/dist/src/common/assets/icons/fill/TypefaceSystem.d.ts +4 -0
  5. package/dist/src/common/assets/icons/fill/TypefaceSystem.js +30 -0
  6. package/dist/src/common/assets/icons/fill/index.d.ts +2 -0
  7. package/dist/src/common/assets/icons/fill/index.js +4 -0
  8. package/dist/src/common/assets/icons/line/LogoGoogle.d.ts +4 -0
  9. package/dist/src/common/assets/icons/line/LogoGoogle.js +30 -0
  10. package/dist/src/common/assets/icons/line/TypefaceSystem.d.ts +4 -0
  11. package/dist/src/common/assets/icons/line/TypefaceSystem.js +30 -0
  12. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  13. package/dist/src/common/assets/icons/line/index.js +4 -0
  14. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  15. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  16. package/dist/src/common/styles/colorSet/UIColor.json +3 -1
  17. package/dist/src/common/styles/colorSet/index.d.ts +349 -345
  18. package/dist/src/common/styles/colorSet/index.js +3 -3
  19. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  20. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +4 -1
  21. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +4 -2
  22. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +46 -15
  23. package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts +1 -0
  24. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  25. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +19 -3
  26. package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts +1 -0
  27. package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +4 -1
  28. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +4 -2
  29. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +59 -10
  30. package/dist/src/mobile/components/BasicChatListItem/Popup.d.ts +1 -0
  31. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -1
  32. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +21 -3
  33. package/dist/src/mobile/components/ChatBubbleListItem/Popup.d.ts +1 -0
  34. package/dist/src/mobile/components/ChatList/Body.js +1 -1
  35. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts +3 -1
  36. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js +13 -11
  37. package/dist/src/mobile/components/MobileHeaderBar/utils.d.ts +12 -0
  38. package/dist/src/mobile/components/MobileHeaderBar/utils.js +22 -0
  39. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
  40. package/dist/src/sub/DynamicLayout/DynamicLayout.js +2 -3
  41. package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.js +1 -1
  42. package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.js +1 -1
  43. package/dist/src/sub/DynamicLayout/components/mobile/Item/Item.js +1 -1
  44. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +12 -23
  45. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +1 -1
  46. package/dist/src/sub/DynamicLayout/types.d.ts +0 -4
  47. package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.d.ts +3 -0
  48. package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.js +93 -0
  49. package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.d.ts +3 -0
  50. package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.js +57 -0
  51. package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.d.ts +10 -0
  52. package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.js +53 -0
  53. package/dist/src/sub/GoogleFontkit/api/getGoogleFontDefaultText.d.ts +2 -0
  54. package/dist/src/sub/GoogleFontkit/api/getGoogleFontDefaultText.js +55 -0
  55. package/dist/src/sub/GoogleFontkit/api/getGoogleWebFonts.d.ts +10 -0
  56. package/dist/src/sub/GoogleFontkit/api/getGoogleWebFonts.js +53 -0
  57. package/dist/src/sub/GoogleFontkit/constants.d.ts +7 -0
  58. package/dist/src/sub/GoogleFontkit/constants.js +42 -0
  59. package/dist/src/sub/GoogleFontkit/headless/GoogleFontItem.d.ts +13 -0
  60. package/dist/src/sub/GoogleFontkit/headless/GoogleFontItem.js +107 -0
  61. package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.d.ts +17 -0
  62. package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.js +145 -0
  63. package/dist/src/sub/GoogleFontkit/hooks/useDebounce.d.ts +1 -0
  64. package/dist/src/sub/GoogleFontkit/hooks/useDebounce.js +14 -0
  65. package/dist/src/sub/GoogleFontkit/hooks/useIntersectionObserver.d.ts +6 -0
  66. package/dist/src/sub/GoogleFontkit/hooks/useIntersectionObserver.js +29 -0
  67. package/dist/src/sub/GoogleFontkit/index.d.ts +2 -0
  68. package/dist/src/sub/GoogleFontkit/index.js +10 -0
  69. package/dist/src/sub/GoogleFontkit/types.d.ts +44 -0
  70. package/dist/src/sub/GoogleFontkit/types.js +14 -0
  71. package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.d.ts +5 -0
  72. package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.js +15 -0
  73. package/dist/src/sub/GoogleFontkit/utils/callGoogleFontCSSAndApply.d.ts +2 -0
  74. package/dist/src/sub/GoogleFontkit/utils/callGoogleFontCSSAndApply.js +83 -0
  75. package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.d.ts +4 -0
  76. package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.js +13 -0
  77. package/dist/src/sub/GoogleFontkit/utils/extractFontStyles.d.ts +1 -0
  78. package/dist/src/sub/GoogleFontkit/utils/extractFontStyles.js +26 -0
  79. package/dist/src/sub/GoogleFontkit/utils/fillStyleSheet.d.ts +4 -0
  80. package/dist/src/sub/GoogleFontkit/utils/fillStyleSheet.js +17 -0
  81. package/dist/src/sub/GoogleFontkit/utils/getActiveFontStylesheet.d.ts +4 -0
  82. package/dist/src/sub/GoogleFontkit/utils/getActiveFontStylesheet.js +16 -0
  83. package/dist/src/sub/GoogleFontkit/utils/getFontId.d.ts +4 -0
  84. package/dist/src/sub/GoogleFontkit/utils/getFontId.js +9 -0
  85. package/dist/src/sub/GoogleFontkit/utils/getMatches.d.ts +1 -0
  86. package/dist/src/sub/GoogleFontkit/utils/getMatches.js +14 -0
  87. package/dist/src/sub/GoogleFontkit/utils/isStyleSheetExists.d.ts +4 -0
  88. package/dist/src/sub/GoogleFontkit/utils/isStyleSheetExists.js +15 -0
  89. package/dist/src/sub/GoogleFontkit/utils/parseFontVariants.d.ts +4 -0
  90. package/dist/src/sub/GoogleFontkit/utils/parseFontVariants.js +18 -0
  91. package/dist/src/sub/GoogleFontkit/utils/setStyleSheetType.d.ts +4 -0
  92. package/dist/src/sub/GoogleFontkit/utils/setStyleSheetType.js +18 -0
  93. package/package.json +1 -1
  94. package/release-note.md +3 -7
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ var GOOGLE_WEBFONTS_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
40
+ function getGoogleWebFonts(searchParamsObj) {
41
+ return __awaiter(this, void 0, void 0, function () {
42
+ var url;
43
+ return __generator(this, function (_a) {
44
+ url = new URL(GOOGLE_WEBFONTS_BASE_URL);
45
+ Object.entries(searchParamsObj).forEach(function (param) {
46
+ var key = param[0], value = param[1];
47
+ url.searchParams.append(key, value);
48
+ });
49
+ return [2 /*return*/, fetch(url.href).then(function (res) { return res.json(); })];
50
+ });
51
+ });
52
+ }
53
+ exports.default = getGoogleWebFonts;
@@ -0,0 +1,7 @@
1
+ import type { Category, SortOption, Subset } from './types';
2
+ export declare const FONT_FACE_REGEX: RegExp;
3
+ export declare const FONT_FAMILY_REGEX: RegExp;
4
+ export declare const PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
5
+ export declare const CATEGORIES: Category[];
6
+ export declare const SORTS: SortOption[];
7
+ export declare const SUBSETS: Subset[];
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SUBSETS = exports.SORTS = exports.CATEGORIES = exports.PREVIEW_ATTRIBUTE_NAME = exports.FONT_FAMILY_REGEX = exports.FONT_FACE_REGEX = void 0;
4
+ exports.FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
5
+ exports.FONT_FAMILY_REGEX = /font-family: ['"](.*?)['"]/gm;
6
+ exports.PREVIEW_ATTRIBUTE_NAME = 'data-is-preview';
7
+ exports.CATEGORIES = [
8
+ 'serif',
9
+ 'sans-serif',
10
+ 'display',
11
+ 'handwriting',
12
+ 'monospace'
13
+ ];
14
+ exports.SORTS = ['alpha', 'date', 'popularity', 'trending'];
15
+ exports.SUBSETS = [
16
+ 'arabic',
17
+ 'bengali',
18
+ 'chinese-simplified',
19
+ 'chinese-traditional',
20
+ 'cyrillic',
21
+ 'cyrillic-ext',
22
+ 'devanagari',
23
+ 'greek',
24
+ 'greek-ext',
25
+ 'gujarati',
26
+ 'gurmukhi',
27
+ 'hebrew',
28
+ 'japanese',
29
+ 'kannada',
30
+ 'khmer',
31
+ 'korean',
32
+ 'latin',
33
+ 'latin-ext',
34
+ 'malayalam',
35
+ 'myanmar',
36
+ 'oriya',
37
+ 'sinhala',
38
+ 'tamil',
39
+ '​telugu',
40
+ 'thai',
41
+ 'vietnamese'
42
+ ];
@@ -0,0 +1,13 @@
1
+ import { LegacyRef } from 'react';
2
+ import type { Font } from '../types';
3
+ type HeadlessProps = {
4
+ isLoading: boolean;
5
+ isVisible: boolean;
6
+ ref: LegacyRef<HTMLElement>;
7
+ };
8
+ type Props = {
9
+ font: Font;
10
+ children: (args: HeadlessProps) => JSX.Element;
11
+ };
12
+ declare function GoogleFontItem({ font, children }: Props): JSX.Element;
13
+ export default GoogleFontItem;
@@ -0,0 +1,107 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ Object.defineProperty(exports, "__esModule", { value: true });
42
+ var react_1 = require("react");
43
+ var getGoogleFontCss_1 = __importDefault(require("../api/getGoogleFontCss"));
44
+ var useIntersectionObserver_1 = __importDefault(require("../hooks/useIntersectionObserver"));
45
+ var applyActiveFont_1 = __importDefault(require("../utils/applyActiveFont"));
46
+ var createStyleSheet_1 = __importDefault(require("../utils/createStyleSheet"));
47
+ var extractFontStyles_1 = __importDefault(require("../utils/extractFontStyles"));
48
+ var fillStyleSheet_1 = __importDefault(require("../utils/fillStyleSheet"));
49
+ var isStyleSheetExists_1 = __importDefault(require("../utils/isStyleSheetExists"));
50
+ var parseFontVariants_1 = __importDefault(require("../utils/parseFontVariants"));
51
+ var setStyleSheetType_1 = __importDefault(require("../utils/setStyleSheetType"));
52
+ function GoogleFontItem(_a) {
53
+ var font = _a.font, children = _a.children;
54
+ var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
55
+ var ref = (0, react_1.useRef)(null);
56
+ var entry = (0, useIntersectionObserver_1.default)(ref, {});
57
+ var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
58
+ (0, react_1.useEffect)(function () {
59
+ if (!isVisible) {
60
+ return;
61
+ }
62
+ function getCss() {
63
+ return __awaiter(this, void 0, void 0, function () {
64
+ var css, fontStyles;
65
+ return __generator(this, function (_a) {
66
+ switch (_a.label) {
67
+ case 0:
68
+ setIsLoading(true);
69
+ return [4 /*yield*/, (0, getGoogleFontCss_1.default)({
70
+ family: "".concat(font.family).concat((0, parseFontVariants_1.default)(font.variants, {
71
+ prefix: ':wght@',
72
+ separator: ';'
73
+ })),
74
+ 'font-display': 'swap'
75
+ })];
76
+ case 1:
77
+ css = _a.sent();
78
+ fontStyles = (0, extractFontStyles_1.default)(css);
79
+ (0, fillStyleSheet_1.default)(font.id, fontStyles[font.id]);
80
+ setIsLoading(false);
81
+ return [2 /*return*/];
82
+ }
83
+ });
84
+ });
85
+ }
86
+ if ((0, isStyleSheetExists_1.default)(font.id, false)) {
87
+ // Add CSS declaration to apply the new active font
88
+ (0, applyActiveFont_1.default)(font, '', '');
89
+ setIsLoading(false);
90
+ }
91
+ else if ((0, isStyleSheetExists_1.default)(font.id, true)) {
92
+ // Update the stylesheet's "data-is-preview" attribute to "false"
93
+ (0, setStyleSheetType_1.default)(font.id, false);
94
+ setIsLoading(false);
95
+ }
96
+ else {
97
+ // Create stylesheet for the font to be fetched (this prevents other font pickers from loading
98
+ // the font as well)
99
+ // eslint-disable-next-line no-console
100
+ console.log('create sheet');
101
+ (0, createStyleSheet_1.default)(font.id, false);
102
+ getCss();
103
+ }
104
+ }, [font, isVisible]);
105
+ return children({ isLoading: isLoading, isVisible: isVisible, ref: ref });
106
+ }
107
+ exports.default = GoogleFontItem;
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import type { Font, SortOption, FilterOptionType, ChangeFilterOptionHandler } from '../types';
3
+ type HeadlessProps = {
4
+ isLoading: boolean;
5
+ fonts: Font[];
6
+ filteredFonts: Font[];
7
+ filterOptions: FilterOptionType;
8
+ changeSort: (sortOption: SortOption) => void;
9
+ changeFilterOption: ChangeFilterOptionHandler;
10
+ };
11
+ type Props = {
12
+ apiKey: string;
13
+ sort: SortOption;
14
+ children: (args: HeadlessProps) => JSX.Element;
15
+ };
16
+ declare function GoogleFontsList({ apiKey, sort, children }: Props): JSX.Element;
17
+ export default GoogleFontsList;
@@ -0,0 +1,145 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
49
+ var __importDefault = (this && this.__importDefault) || function (mod) {
50
+ return (mod && mod.__esModule) ? mod : { "default": mod };
51
+ };
52
+ Object.defineProperty(exports, "__esModule", { value: true });
53
+ var react_1 = require("react");
54
+ var getGoogleWebFonts_1 = __importDefault(require("../api/getGoogleWebFonts"));
55
+ var getFontId_1 = __importDefault(require("../utils/getFontId"));
56
+ var DEFAULT_CATEGORIES = [
57
+ 'serif',
58
+ 'sans-serif',
59
+ 'display',
60
+ 'handwriting',
61
+ 'monospace'
62
+ ];
63
+ function GoogleFontsList(_a) {
64
+ var apiKey = _a.apiKey, sort = _a.sort, children = _a.children;
65
+ var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
66
+ var _c = (0, react_1.useState)([]), fonts = _c[0], setFonts = _c[1];
67
+ var _d = (0, react_1.useState)({
68
+ searchQuery: '',
69
+ categories: DEFAULT_CATEGORIES,
70
+ subsets: []
71
+ }), filterOptions = _d[0], setFilterOptions = _d[1];
72
+ (0, react_1.useEffect)(function () {
73
+ function call() {
74
+ return __awaiter(this, void 0, void 0, function () {
75
+ var items;
76
+ return __generator(this, function (_a) {
77
+ switch (_a.label) {
78
+ case 0:
79
+ setIsLoading(true);
80
+ return [4 /*yield*/, (0, getGoogleWebFonts_1.default)({
81
+ key: apiKey,
82
+ sort: sort
83
+ })];
84
+ case 1:
85
+ items = (_a.sent()).items;
86
+ setFonts(items.map(function (item) { return (__assign(__assign({}, item), { id: (0, getFontId_1.default)(item.family) })); }));
87
+ setIsLoading(false);
88
+ return [2 /*return*/];
89
+ }
90
+ });
91
+ });
92
+ }
93
+ call();
94
+ }, [apiKey, sort]);
95
+ function changeSort(sortOption) {
96
+ return __awaiter(this, void 0, void 0, function () {
97
+ var items;
98
+ return __generator(this, function (_a) {
99
+ switch (_a.label) {
100
+ case 0:
101
+ setIsLoading(true);
102
+ return [4 /*yield*/, (0, getGoogleWebFonts_1.default)({
103
+ key: apiKey,
104
+ sort: sortOption
105
+ })];
106
+ case 1:
107
+ items = (_a.sent()).items;
108
+ setFonts(items.map(function (item) { return (__assign(__assign({}, item), { id: (0, getFontId_1.default)(item.family) })); }));
109
+ setIsLoading(false);
110
+ return [2 /*return*/];
111
+ }
112
+ });
113
+ });
114
+ }
115
+ function changeFilterOption(arg) {
116
+ var name = arg.name, value = arg.value;
117
+ setFilterOptions(function (prev) {
118
+ var _a;
119
+ return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
120
+ });
121
+ }
122
+ var filteredFonts = fonts.filter(function (font) {
123
+ var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
124
+ var isSelectedCategory = categories.includes(font.category);
125
+ var query = searchQuery.toLocaleLowerCase().trim();
126
+ var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
127
+ if (!matchSearchQuery) {
128
+ return false;
129
+ }
130
+ var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
131
+ if (isSelectedCategory && hasSomeScript) {
132
+ return true;
133
+ }
134
+ return false;
135
+ });
136
+ return children({
137
+ isLoading: isLoading,
138
+ fonts: fonts,
139
+ filteredFonts: filteredFonts,
140
+ filterOptions: filterOptions,
141
+ changeSort: changeSort,
142
+ changeFilterOption: changeFilterOption
143
+ });
144
+ }
145
+ exports.default = GoogleFontsList;
@@ -0,0 +1 @@
1
+ export default function useDebounce<T>(value: T, delay?: number): T;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var react_1 = require("react");
4
+ function useDebounce(value, delay) {
5
+ var _a = (0, react_1.useState)(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
6
+ (0, react_1.useEffect)(function () {
7
+ var timer = setTimeout(function () { return setDebouncedValue(value); }, delay || 500);
8
+ return function () {
9
+ clearTimeout(timer);
10
+ };
11
+ }, [value, delay]);
12
+ return debouncedValue;
13
+ }
14
+ exports.default = useDebounce;
@@ -0,0 +1,6 @@
1
+ import { RefObject } from 'react';
2
+ interface Args extends IntersectionObserverInit {
3
+ freezeOnceVisible?: boolean;
4
+ }
5
+ declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args): IntersectionObserverEntry | undefined;
6
+ export default useIntersectionObserver;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var react_1 = require("react");
4
+ function useIntersectionObserver(elementRef, _a) {
5
+ var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
6
+ var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
7
+ var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
8
+ // eslint-disable-next-line @typescript-eslint/no-shadow
9
+ var updateEntry = function (_a) {
10
+ var entry = _a[0];
11
+ setEntry(entry);
12
+ };
13
+ (0, react_1.useEffect)(function () {
14
+ var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
15
+ var hasIOSupport = !!window.IntersectionObserver;
16
+ if (!hasIOSupport || frozen || !node)
17
+ return;
18
+ var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
19
+ var observer = new IntersectionObserver(updateEntry, observerParams);
20
+ observer.observe(node);
21
+ // eslint-disable-next-line consistent-return
22
+ return function () {
23
+ observer.disconnect();
24
+ };
25
+ // eslint-disable-next-line react-hooks/exhaustive-deps
26
+ }, [elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, threshold, root, rootMargin, frozen]);
27
+ return entry;
28
+ }
29
+ exports.default = useIntersectionObserver;
@@ -0,0 +1,2 @@
1
+ export { default as GoogleFontsList } from './headless/GoogleFontsList';
2
+ export { default as Example } from './GoogleFontsListExample';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Example = exports.GoogleFontsList = void 0;
7
+ var GoogleFontsList_1 = require("./headless/GoogleFontsList");
8
+ Object.defineProperty(exports, "GoogleFontsList", { enumerable: true, get: function () { return __importDefault(GoogleFontsList_1).default; } });
9
+ var GoogleFontsListExample_1 = require("./GoogleFontsListExample");
10
+ Object.defineProperty(exports, "Example", { enumerable: true, get: function () { return __importDefault(GoogleFontsListExample_1).default; } });
@@ -0,0 +1,44 @@
1
+ export type Category = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
2
+ export type Subset = 'arabic' | 'bengali' | 'chinese-simplified' | 'chinese-traditional' | 'cyrillic' | 'cyrillic-ext' | 'devanagari' | 'greek' | 'greek-ext' | 'gujarati' | 'gurmukhi' | 'hebrew' | 'japanese' | 'kannada' | 'khmer' | 'korean' | 'latin' | 'latin-ext' | 'malayalam' | 'myanmar' | 'oriya' | 'sinhala' | 'tamil' | '​telugu' | 'thai' | 'vietnamese';
3
+ export type SortOption = 'alpha' | 'popularity' | 'date' | 'trending';
4
+ export type Variant = '100' | '100italic' | '200' | '200italic' | '300' | '300italic' | 'regular' | 'italic' | '500' | '500italic' | '600' | '600italic' | '700' | '700italic' | '800' | '800italic' | '900' | '900italic';
5
+ export interface Font {
6
+ family: string;
7
+ id: string;
8
+ category: Category;
9
+ subsets: Subset[];
10
+ variants: Variant[];
11
+ kind?: string;
12
+ version?: string;
13
+ lastModified?: string;
14
+ files?: Record<Variant, string>;
15
+ }
16
+ export declare const FONT_FAMILY_DEFAULT = "Open Sans";
17
+ export type FontList = Map<string, Font>;
18
+ export interface Options {
19
+ pickerId: string;
20
+ families: string[];
21
+ categories: Category[];
22
+ scripts: Subset[];
23
+ variants: Variant[];
24
+ filter: (font: Font) => boolean;
25
+ limit: number;
26
+ sort: SortOption;
27
+ }
28
+ export declare const OPTIONS_DEFAULTS: Options;
29
+ export type FilterOptionHandlerArgType = {
30
+ name: 'searchQuery';
31
+ value: string;
32
+ } | {
33
+ name: 'categories';
34
+ value: Category[];
35
+ } | {
36
+ name: 'subsets';
37
+ value: Subset[];
38
+ };
39
+ export type ChangeFilterOptionHandler = (arg: FilterOptionHandlerArgType) => void;
40
+ export type FilterOptionType = {
41
+ searchQuery: string;
42
+ categories: Category[];
43
+ subsets: Subset[];
44
+ };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.OPTIONS_DEFAULTS = exports.FONT_FAMILY_DEFAULT = void 0;
4
+ exports.FONT_FAMILY_DEFAULT = 'Open Sans';
5
+ exports.OPTIONS_DEFAULTS = {
6
+ pickerId: '',
7
+ families: [],
8
+ categories: [],
9
+ scripts: ['latin'],
10
+ variants: ['regular'],
11
+ filter: function () { return true; },
12
+ limit: 50,
13
+ sort: 'alpha'
14
+ };
@@ -0,0 +1,5 @@
1
+ import type { Font } from '../types';
2
+ /**
3
+ * Add/update declaration for applying the current active font
4
+ */
5
+ export default function applyActiveFont(activeFont: Font, previousFontFamily: string, selectorSuffix: string): void;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var getActiveFontStylesheet_1 = __importDefault(require("./getActiveFontStylesheet"));
7
+ /**
8
+ * Add/update declaration for applying the current active font
9
+ */
10
+ function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
11
+ var style = "\n\t\t.apply-font".concat(selectorSuffix, " {\n\t\t\tfont-family: \"").concat(activeFont.family, "\"").concat(previousFontFamily ? ", \"".concat(previousFontFamily, "\"") : '', ";\n\t\t}\n\t");
12
+ var activeFontStylesheet = (0, getActiveFontStylesheet_1.default)(selectorSuffix);
13
+ activeFontStylesheet.innerHTML = style;
14
+ }
15
+ exports.default = applyActiveFont;
@@ -0,0 +1,2 @@
1
+ declare function callGoogleFontCSSAndApply(key: string, fontFamily: string): Promise<void>;
2
+ export default callGoogleFontCSSAndApply;
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ Object.defineProperty(exports, "__esModule", { value: true });
42
+ var getGoogleFontCss_1 = __importDefault(require("../api/getGoogleFontCss"));
43
+ var getGoogleWebFonts_1 = __importDefault(require("../api/getGoogleWebFonts"));
44
+ var createStyleSheet_1 = __importDefault(require("./createStyleSheet"));
45
+ var extractFontStyles_1 = __importDefault(require("./extractFontStyles"));
46
+ var fillStyleSheet_1 = __importDefault(require("./fillStyleSheet"));
47
+ var getFontId_1 = __importDefault(require("./getFontId"));
48
+ var isStyleSheetExists_1 = __importDefault(require("./isStyleSheetExists"));
49
+ var parseFontVariants_1 = __importDefault(require("./parseFontVariants"));
50
+ function callGoogleFontCSSAndApply(key, fontFamily) {
51
+ return __awaiter(this, void 0, void 0, function () {
52
+ var items, font, css, fontStyles;
53
+ return __generator(this, function (_a) {
54
+ switch (_a.label) {
55
+ case 0: return [4 /*yield*/, (0, getGoogleWebFonts_1.default)({
56
+ key: key,
57
+ family: fontFamily
58
+ })];
59
+ case 1:
60
+ items = (_a.sent()).items;
61
+ font = items[0];
62
+ font.id = (0, getFontId_1.default)(font.family);
63
+ if ((0, isStyleSheetExists_1.default)(font.id)) {
64
+ return [2 /*return*/];
65
+ }
66
+ (0, createStyleSheet_1.default)(font.id, false);
67
+ return [4 /*yield*/, (0, getGoogleFontCss_1.default)({
68
+ family: "".concat(font.family).concat((0, parseFontVariants_1.default)(font.variants, {
69
+ prefix: ':wght@',
70
+ separator: ';'
71
+ })),
72
+ 'font-display': 'swap'
73
+ })];
74
+ case 2:
75
+ css = _a.sent();
76
+ fontStyles = (0, extractFontStyles_1.default)(css);
77
+ (0, fillStyleSheet_1.default)(font.id, fontStyles[font.id]);
78
+ return [2 /*return*/];
79
+ }
80
+ });
81
+ });
82
+ }
83
+ exports.default = callGoogleFontCSSAndApply;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Attach a new font stylesheet to the document head using the provided content
3
+ */
4
+ export default function createStylesheet(fontId: string, isPreview: boolean): void;