@squiz/resource-browser 3.0.1-pre-alpha.0 → 3.0.1-pre-alpha.2

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 (85) hide show
  1. package/.eslintrc +40 -0
  2. package/.storybook/main.ts +26 -0
  3. package/.storybook/preview-body.html +1 -0
  4. package/.storybook/preview-head.html +12 -0
  5. package/.storybook/preview.ts +16 -0
  6. package/CHANGELOG.md +281 -0
  7. package/README_DEVS.md +18 -0
  8. package/build.js +21 -0
  9. package/jest.config.ts +30 -0
  10. package/lib/BrowseToSource/BrowseToSource.js +52 -26
  11. package/lib/Hooks/useAuth.js +15 -11
  12. package/lib/Hooks/useSelectedState.js +7 -3
  13. package/lib/Hooks/useSources.js +7 -3
  14. package/lib/Icons/AdsClickIcon.js +11 -4
  15. package/lib/Icons/ArrowDownIcon.js +11 -4
  16. package/lib/Icons/CircledLoopIcon.js +11 -4
  17. package/lib/MainContainer/MainContainer.js +55 -27
  18. package/lib/Plugin/Plugin.js +14 -7
  19. package/lib/ResourceBrowserContext/AuthProvider.js +37 -9
  20. package/lib/ResourceBrowserContext/ResourceBrowserContext.js +39 -9
  21. package/lib/ResourceBrowserInput/ResourceBrowserInput.js +12 -5
  22. package/lib/ResourceLauncher/ResourceLauncher.js +13 -8
  23. package/lib/ResourcePicker/ResourcePicker.js +27 -20
  24. package/lib/ResourcePicker/States/Error.js +13 -6
  25. package/lib/ResourcePicker/States/Loading.js +11 -4
  26. package/lib/ResourcePicker/States/Selected.js +19 -12
  27. package/lib/SourceDropdown/SourceDropdown.js +48 -22
  28. package/lib/SourceDropdownContainer/SourceDropdownContainer.js +16 -10
  29. package/lib/SourceList/SourceList.js +16 -11
  30. package/lib/index.js +66 -26
  31. package/lib/types.js +5 -2
  32. package/lib/utils/authUtils.js +16 -9
  33. package/package.json +4 -16
  34. package/postcss.config.js +21 -0
  35. package/tailwind.config.cjs +99 -0
  36. package/tsconfig.json +22 -0
  37. package/tsconfig.storybook.json +4 -0
  38. package/tsconfig.test.json +12 -0
  39. package/vite.config.js +20 -0
  40. package/lib-esm/BrowseToSource/BrowseToSource.d.ts +0 -8
  41. package/lib-esm/BrowseToSource/BrowseToSource.js +0 -50
  42. package/lib-esm/Hooks/useAuth.d.ts +0 -7
  43. package/lib-esm/Hooks/useAuth.js +0 -54
  44. package/lib-esm/Hooks/useSelectedState.d.ts +0 -15
  45. package/lib-esm/Hooks/useSelectedState.js +0 -12
  46. package/lib-esm/Hooks/useSources.d.ts +0 -14
  47. package/lib-esm/Hooks/useSources.js +0 -44
  48. package/lib-esm/Icons/AdsClickIcon.d.ts +0 -4
  49. package/lib-esm/Icons/AdsClickIcon.js +0 -5
  50. package/lib-esm/Icons/ArrowDownIcon.d.ts +0 -4
  51. package/lib-esm/Icons/ArrowDownIcon.js +0 -5
  52. package/lib-esm/Icons/CircledLoopIcon.d.ts +0 -4
  53. package/lib-esm/Icons/CircledLoopIcon.js +0 -5
  54. package/lib-esm/MainContainer/MainContainer.d.ts +0 -19
  55. package/lib-esm/MainContainer/MainContainer.js +0 -43
  56. package/lib-esm/Plugin/Plugin.d.ts +0 -13
  57. package/lib-esm/Plugin/Plugin.js +0 -12
  58. package/lib-esm/ResourceBrowserContext/AuthProvider.d.ts +0 -16
  59. package/lib-esm/ResourceBrowserContext/AuthProvider.js +0 -18
  60. package/lib-esm/ResourceBrowserContext/ResourceBrowserContext.d.ts +0 -15
  61. package/lib-esm/ResourceBrowserContext/ResourceBrowserContext.js +0 -26
  62. package/lib-esm/ResourceBrowserInput/ResourceBrowserInput.d.ts +0 -26
  63. package/lib-esm/ResourceBrowserInput/ResourceBrowserInput.js +0 -9
  64. package/lib-esm/ResourceLauncher/ResourceLauncher.d.ts +0 -8
  65. package/lib-esm/ResourceLauncher/ResourceLauncher.js +0 -12
  66. package/lib-esm/ResourcePicker/ResourcePicker.d.ts +0 -16
  67. package/lib-esm/ResourcePicker/ResourcePicker.js +0 -25
  68. package/lib-esm/ResourcePicker/States/Error.d.ts +0 -7
  69. package/lib-esm/ResourcePicker/States/Error.js +0 -6
  70. package/lib-esm/ResourcePicker/States/Loading.d.ts +0 -2
  71. package/lib-esm/ResourcePicker/States/Loading.js +0 -4
  72. package/lib-esm/ResourcePicker/States/Selected.d.ts +0 -15
  73. package/lib-esm/ResourcePicker/States/Selected.js +0 -20
  74. package/lib-esm/SourceDropdown/SourceDropdown.d.ts +0 -7
  75. package/lib-esm/SourceDropdown/SourceDropdown.js +0 -46
  76. package/lib-esm/SourceDropdownContainer/SourceDropdownContainer.d.ts +0 -5
  77. package/lib-esm/SourceDropdownContainer/SourceDropdownContainer.js +0 -12
  78. package/lib-esm/SourceList/SourceList.d.ts +0 -8
  79. package/lib-esm/SourceList/SourceList.js +0 -16
  80. package/lib-esm/index.d.ts +0 -18
  81. package/lib-esm/index.js +0 -79
  82. package/lib-esm/types.d.ts +0 -97
  83. package/lib-esm/types.js +0 -5
  84. package/lib-esm/utils/authUtils.d.ts +0 -5
  85. package/lib-esm/utils/authUtils.js +0 -31
@@ -1,10 +1,13 @@
1
- import { useAsync } from '@squiz/generic-browser-lib';
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useSources = void 0;
4
+ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
2
5
  /**
3
6
  * Loads and caches the source list when a component using the hook is mounted.
4
7
  */
5
- export const useSources = ({ onRequestSources, plugins }) => {
8
+ const useSources = ({ onRequestSources, plugins }) => {
6
9
  const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
7
- return useAsync({
10
+ return (0, generic_browser_lib_1.useAsync)({
8
11
  callback: () => {
9
12
  return new Promise((resolve, reject) => {
10
13
  // Get all the sources from the outer context
@@ -42,3 +45,4 @@ export const useSources = ({ onRequestSources, plugins }) => {
42
45
  defaultValue: [],
43
46
  }, [onRequestSources, pluginsKey]);
44
47
  };
48
+ exports.useSources = useSources;
@@ -1,5 +1,12 @@
1
- import React from 'react';
2
- export const AdsClickIcon = (props) => {
3
- return (React.createElement("svg", { fill: "#4f4f4f", height: "24", width: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props },
4
- React.createElement("path", { d: "M11.56 17.845C8.38001 17.695 5.85001 15.075 5.85001 11.855C5.85001 8.54501 8.54001 5.85501 11.85 5.85501C15.07 5.85501 17.69 8.38501 17.84 11.565L15.74 10.935C15.33 9.16501 13.74 7.85501 11.85 7.85501C9.64001 7.85501 7.85001 9.64501 7.85001 11.855C7.85001 13.745 9.16001 15.335 10.93 15.745L11.56 17.845ZM21.85 11.855C21.85 12.155 21.84 12.455 21.81 12.755L19.84 12.165C19.85 12.065 19.85 11.955 19.85 11.855C19.85 7.43501 16.27 3.85501 11.85 3.85501C7.43001 3.85501 3.85001 7.43501 3.85001 11.855C3.85001 16.275 7.43001 19.855 11.85 19.855C11.95 19.855 12.06 19.855 12.16 19.845L12.75 21.815C12.45 21.845 12.15 21.855 11.85 21.855C6.33001 21.855 1.85001 17.375 1.85001 11.855C1.85001 6.33501 6.33001 1.85501 11.85 1.85501C17.37 1.85501 21.85 6.33501 21.85 11.855ZM18.08 16.115L20.35 15.355C20.81 15.205 20.8 14.545 20.34 14.405L12.74 12.125C12.36 12.015 12 12.365 12.12 12.745L14.4 20.345C14.54 20.815 15.2 20.825 15.35 20.355L16.11 18.085L20.02 21.995C20.22 22.195 20.53 22.195 20.73 21.995L22 20.725C22.2 20.525 22.2 20.215 22 20.015L18.08 16.115Z" })));
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
4
  };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.AdsClickIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const AdsClickIcon = (props) => {
9
+ return (react_1.default.createElement("svg", { fill: "#4f4f4f", height: "24", width: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props },
10
+ react_1.default.createElement("path", { d: "M11.56 17.845C8.38001 17.695 5.85001 15.075 5.85001 11.855C5.85001 8.54501 8.54001 5.85501 11.85 5.85501C15.07 5.85501 17.69 8.38501 17.84 11.565L15.74 10.935C15.33 9.16501 13.74 7.85501 11.85 7.85501C9.64001 7.85501 7.85001 9.64501 7.85001 11.855C7.85001 13.745 9.16001 15.335 10.93 15.745L11.56 17.845ZM21.85 11.855C21.85 12.155 21.84 12.455 21.81 12.755L19.84 12.165C19.85 12.065 19.85 11.955 19.85 11.855C19.85 7.43501 16.27 3.85501 11.85 3.85501C7.43001 3.85501 3.85001 7.43501 3.85001 11.855C3.85001 16.275 7.43001 19.855 11.85 19.855C11.95 19.855 12.06 19.855 12.16 19.845L12.75 21.815C12.45 21.845 12.15 21.855 11.85 21.855C6.33001 21.855 1.85001 17.375 1.85001 11.855C1.85001 6.33501 6.33001 1.85501 11.85 1.85501C17.37 1.85501 21.85 6.33501 21.85 11.855ZM18.08 16.115L20.35 15.355C20.81 15.205 20.8 14.545 20.34 14.405L12.74 12.125C12.36 12.015 12 12.365 12.12 12.745L14.4 20.345C14.54 20.815 15.2 20.825 15.35 20.355L16.11 18.085L20.02 21.995C20.22 22.195 20.53 22.195 20.73 21.995L22 20.725C22.2 20.525 22.2 20.215 22 20.015L18.08 16.115Z" })));
11
+ };
12
+ exports.AdsClickIcon = AdsClickIcon;
@@ -1,5 +1,12 @@
1
- import React from 'react';
2
- export const ArrowDownIcon = (props) => {
3
- return (React.createElement("svg", { fill: "#4f4f4f", height: "25", width: "24", viewBox: "0 0 24 25", xmlns: "http://www.w3.org/2000/svg", ...props },
4
- React.createElement("path", { d: "M8.12459 9.49953L12.0046 13.3795L15.8846 9.49953C16.2746 9.10953 16.9046 9.10953 17.2946 9.49953C17.6846 9.88953 17.6846 10.5195 17.2946 10.9095L12.7046 15.4995C12.3146 15.8895 11.6846 15.8895 11.2946 15.4995L6.70459 10.9095C6.51734 10.7227 6.41211 10.469 6.41211 10.2045C6.41211 9.94001 6.51734 9.68636 6.70459 9.49953C7.09459 9.11953 7.73459 9.10953 8.12459 9.49953Z" })));
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
4
  };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ArrowDownIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const ArrowDownIcon = (props) => {
9
+ return (react_1.default.createElement("svg", { fill: "#4f4f4f", height: "25", width: "24", viewBox: "0 0 24 25", xmlns: "http://www.w3.org/2000/svg", ...props },
10
+ react_1.default.createElement("path", { d: "M8.12459 9.49953L12.0046 13.3795L15.8846 9.49953C16.2746 9.10953 16.9046 9.10953 17.2946 9.49953C17.6846 9.88953 17.6846 10.5195 17.2946 10.9095L12.7046 15.4995C12.3146 15.8895 11.6846 15.8895 11.2946 15.4995L6.70459 10.9095C6.51734 10.7227 6.41211 10.469 6.41211 10.2045C6.41211 9.94001 6.51734 9.68636 6.70459 9.49953C7.09459 9.11953 7.73459 9.10953 8.12459 9.49953Z" })));
11
+ };
12
+ exports.ArrowDownIcon = ArrowDownIcon;
@@ -1,5 +1,12 @@
1
- import React from 'react';
2
- export const CircledLoopIcon = (props) => {
3
- return (React.createElement("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", ...props },
4
- React.createElement("path", { d: "M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z", fill: "#949494" })));
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
4
  };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CircledLoopIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const CircledLoopIcon = (props) => {
9
+ return (react_1.default.createElement("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", ...props },
10
+ react_1.default.createElement("path", { d: "M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z", fill: "#949494" })));
11
+ };
12
+ exports.CircledLoopIcon = CircledLoopIcon;
@@ -1,43 +1,71 @@
1
- import React, { useCallback, useState } from 'react';
2
- import SourceList from '../SourceList/SourceList';
3
- import ResourceLauncher from '../ResourceLauncher/ResourceLauncher';
4
- import SourceDropdownContainer from '../SourceDropdownContainer/SourceDropdownContainer';
5
- import SourceDropdown from '../SourceDropdown/SourceDropdown';
6
- import { PluginLaunchModeType, } from '../types';
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ const react_1 = __importStar(require("react"));
30
+ const SourceList_1 = __importDefault(require("../SourceList/SourceList"));
31
+ const ResourceLauncher_1 = __importDefault(require("../ResourceLauncher/ResourceLauncher"));
32
+ const SourceDropdownContainer_1 = __importDefault(require("../SourceDropdownContainer/SourceDropdownContainer"));
33
+ const SourceDropdown_1 = __importDefault(require("../SourceDropdown/SourceDropdown"));
34
+ const types_1 = require("../types");
7
35
  function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedSource, onSourceSelect, onChange, onClose, preselectedResource, plugin, pluginMode, searchEnabled, }) {
8
- const [headerPortal, setHeaderPortal] = useState(null);
9
- const pluginToRender = pluginMode ? pluginMode.type : PluginLaunchModeType.Browse; // Cant default a 'null' property in signature so set it here
36
+ const [headerPortal, setHeaderPortal] = (0, react_1.useState)(null);
37
+ const pluginToRender = pluginMode ? pluginMode.type : types_1.PluginLaunchModeType.Browse; // Cant default a 'null' property in signature so set it here
10
38
  const SourceBrowser = plugin?.sourceBrowserComponent();
11
39
  const SourceSearch = plugin?.sourceSearchComponent();
12
40
  // Can't use a useRef as it wont update on change when a source is selected, so need to use a ref callback to store in state
13
- const setHeaderPortalRef = useCallback((node) => {
41
+ const setHeaderPortalRef = (0, react_1.useCallback)((node) => {
14
42
  if (node !== null) {
15
43
  setHeaderPortal(node);
16
44
  }
17
45
  }, [setHeaderPortal]);
18
46
  // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
19
- return (React.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
20
- React.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
21
- React.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
22
- plugin && selectedSource && (React.createElement(React.Fragment, null,
23
- plugin.createHeaderPortal && React.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin" }),
24
- !plugin.createHeaderPortal && sources.length > 1 && (React.createElement(SourceDropdownContainer, { isCollapsed: false, onExpand: () => { } },
25
- React.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
26
- React.createElement(SourceDropdown, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
27
- React.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
28
- React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
29
- React.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
30
- React.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
31
- plugin && selectedSource && (React.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
32
- pluginToRender === PluginLaunchModeType.Browse && SourceBrowser && (React.createElement(SourceBrowser, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, preselectedResource: preselectedResource || undefined, browseTo: pluginMode?.args?.browseTo, onSelected: (resource) => {
47
+ return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
48
+ react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
49
+ react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
50
+ plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
51
+ plugin.createHeaderPortal && react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin" }),
52
+ !plugin.createHeaderPortal && sources.length > 1 && (react_1.default.createElement(SourceDropdownContainer_1.default, { isCollapsed: false, onExpand: () => { } },
53
+ react_1.default.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
54
+ react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
55
+ react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
56
+ react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
57
+ react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
58
+ react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
59
+ plugin && selectedSource && (react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
60
+ pluginToRender === types_1.PluginLaunchModeType.Browse && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, preselectedResource: preselectedResource || undefined, browseTo: pluginMode?.args?.browseTo, onSelected: (resource) => {
33
61
  onChange(resource);
34
62
  onClose();
35
63
  } })),
36
- pluginToRender === PluginLaunchModeType.Search && SourceSearch && (React.createElement(SourceSearch, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, query: pluginMode?.args?.query, onSelected: (resource) => {
64
+ pluginToRender === types_1.PluginLaunchModeType.Search && SourceSearch && (react_1.default.createElement(SourceSearch, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, query: pluginMode?.args?.query, onSelected: (resource) => {
37
65
  onChange(resource);
38
66
  onClose();
39
67
  } })))),
40
- !selectedSource && searchEnabled && React.createElement(ResourceLauncher, { sources: sources, onSourceSelect: onSourceSelect }),
41
- !selectedSource && !searchEnabled && React.createElement(SourceList, { sources: sources, onSourceSelect: onSourceSelect }))));
68
+ !selectedSource && searchEnabled && react_1.default.createElement(ResourceLauncher_1.default, { sources: sources, onSourceSelect: onSourceSelect }),
69
+ !selectedSource && !searchEnabled && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
42
70
  }
43
- export default MainContainer;
71
+ exports.default = MainContainer;
@@ -1,12 +1,19 @@
1
- import React from 'react';
2
- import { ResourceBrowserInput } from '../ResourceBrowserInput/ResourceBrowserInput';
3
- import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
4
- export const PluginRender = ({ render, ...props }) => {
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.PluginRender = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
9
+ const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
10
+ const PluginRender = ({ render, ...props }) => {
5
11
  if (render) {
6
- return (React.createElement(AuthProvider, { authConfig: props.source },
7
- React.createElement(ResourceBrowserInput, { ...props })));
12
+ return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
13
+ react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props })));
8
14
  }
9
15
  else {
10
- return React.createElement(React.Fragment, null);
16
+ return react_1.default.createElement(react_1.default.Fragment, null);
11
17
  }
12
18
  };
19
+ exports.PluginRender = PluginRender;
@@ -1,18 +1,46 @@
1
- import React, { createContext, useContext } from 'react';
2
- import { useAuth } from '../Hooks/useAuth';
3
- export const AuthContext = createContext(undefined);
4
- export const useAuthContext = () => {
5
- const context = useContext(AuthContext);
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.AuthProvider = exports.useAuthContext = exports.AuthContext = void 0;
27
+ const react_1 = __importStar(require("react"));
28
+ const useAuth_1 = require("../Hooks/useAuth");
29
+ exports.AuthContext = (0, react_1.createContext)(undefined);
30
+ const useAuthContext = () => {
31
+ const context = (0, react_1.useContext)(exports.AuthContext);
6
32
  if (!context) {
7
33
  throw new Error('useAuthContext must be used within an AuthProvider');
8
34
  }
9
35
  return context;
10
36
  };
11
- export const AuthProvider = ({ children, authConfig }) => {
37
+ exports.useAuthContext = useAuthContext;
38
+ const AuthProvider = ({ children, authConfig }) => {
12
39
  const authConfiguration = authConfig;
13
- const auth = useAuth(authConfiguration?.configuration);
40
+ const auth = (0, useAuth_1.useAuth)(authConfiguration?.configuration);
14
41
  if (!authConfiguration?.configuration) {
15
- return React.createElement(React.Fragment, null, children);
42
+ return react_1.default.createElement(react_1.default.Fragment, null, children);
16
43
  }
17
- return React.createElement(AuthContext.Provider, { value: auth }, children);
44
+ return react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children);
18
45
  };
46
+ exports.AuthProvider = AuthProvider;
@@ -1,26 +1,56 @@
1
- import React, { useMemo } from 'react';
2
- import pMemoize from 'p-memoize';
3
- import ExpiryMap from 'expiry-map';
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const p_memoize_1 = __importDefault(require("p-memoize"));
32
+ const expiry_map_1 = __importDefault(require("expiry-map"));
4
33
  /**
5
34
  * @internal Direct usage of this object is discouraged. It will be privated in a future major version.
6
35
  * Please use ResourceBrowserContextProvider instead.
7
36
  */
8
- export const ResourceBrowserContext = React.createContext({
37
+ exports.ResourceBrowserContext = react_1.default.createContext({
9
38
  onRequestSources: () => {
10
39
  throw new Error('onRequestSources has not been configured.');
11
40
  },
12
41
  searchEnabled: false,
13
42
  plugins: [],
14
43
  });
15
- export const ResourceBrowserContextProvider = (props) => {
44
+ const ResourceBrowserContextProvider = (props) => {
16
45
  const CACHE_DURATION = 30000; // 30 seconds
17
46
  const { value: { onRequestSources, ...other }, children, } = props;
18
- const cache = new ExpiryMap(CACHE_DURATION);
19
- const memoized = useMemo(() => ({
20
- onRequestSources: pMemoize(onRequestSources, {
47
+ const cache = new expiry_map_1.default(CACHE_DURATION);
48
+ const memoized = (0, react_1.useMemo)(() => ({
49
+ onRequestSources: (0, p_memoize_1.default)(onRequestSources, {
21
50
  cache,
22
51
  cacheKey: () => 'onRequestSources',
23
52
  }),
24
53
  }), [onRequestSources]);
25
- return React.createElement(ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
54
+ return react_1.default.createElement(exports.ResourceBrowserContext.Provider, { value: { ...memoized, ...other } }, children);
26
55
  };
56
+ exports.ResourceBrowserContextProvider = ResourceBrowserContextProvider;
@@ -1,9 +1,16 @@
1
- import React from 'react';
2
- import MainContainer from '../MainContainer/MainContainer';
3
- import { ResourcePicker } from '../ResourcePicker/ResourcePicker';
4
- export const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
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.ResourceBrowserInput = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const MainContainer_1 = __importDefault(require("../MainContainer/MainContainer"));
9
+ const ResourcePicker_1 = require("../ResourcePicker/ResourcePicker");
10
+ const ResourceBrowserInput = ({ modalTitle, allowedTypes, onChange, value, useResource, isDisabled, onClear, plugin, pluginMode, searchEnabled, source, sources, isLoading, error, setSource, isModalOpen, onModalStateChange, }) => {
5
11
  const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
6
12
  const defaultOnClear = () => onChange(null);
7
13
  const onClearFunction = onClear ?? defaultOnClear;
8
- return (React.createElement(ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (React.createElement(MainContainer, { selectedSource: source, sources: sources, preselectedResource: resource, plugin: plugin, pluginMode: pluginMode, searchEnabled: searchEnabled, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))));
14
+ return (react_1.default.createElement(ResourcePicker_1.ResourcePicker, { resource: resource, plugin: plugin, allowedTypes: allowedTypes, error: resourceError || error, isLoading: isResourceLoading || isLoading, isDisabled: isDisabled, onClear: onClearFunction, isModalOpen: isModalOpen, onModalStateChange: onModalStateChange }, (onClose, titleProps) => (react_1.default.createElement(MainContainer_1.default, { selectedSource: source, sources: sources, preselectedResource: resource, plugin: plugin, pluginMode: pluginMode, searchEnabled: searchEnabled, title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onSourceSelect: setSource, onClose: onClose, onChange: onChange }))));
9
15
  };
16
+ exports.ResourceBrowserInput = ResourceBrowserInput;
@@ -1,12 +1,17 @@
1
- import React from 'react';
2
- import { PluginLaunchModeType } from '../types';
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
+ const react_1 = __importDefault(require("react"));
7
+ const types_1 = require("../types");
3
8
  function ResourceLauncher({ sources, onSourceSelect }) {
4
- return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
5
- React.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
9
+ return (react_1.default.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
10
+ react_1.default.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
6
11
  const SourceLauncher = source.plugin.renderResourceLauncher();
7
- return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
8
- React.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
9
- React.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } }) }))));
12
+ return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
13
+ react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
14
+ react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }))));
10
15
  }))));
11
16
  }
12
- export default ResourceLauncher;
17
+ exports.default = ResourceLauncher;
@@ -1,25 +1,32 @@
1
- import React from 'react';
2
- import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
3
- import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
4
- import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
5
- import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
6
- import { ErrorState } from './States/Error';
7
- import { LoadingState } from './States/Loading';
8
- import { SelectedState } from './States/Selected';
9
- import { useSelectedState } from '../Hooks/useSelectedState';
10
- import clsx from 'clsx';
11
- export const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
12
- const { data: selectedState, error, isLoading } = useSelectedState({ resource, plugin });
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.ResourcePicker = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
9
+ const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
10
+ const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
11
+ const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
12
+ const Error_1 = require("./States/Error");
13
+ const Loading_1 = require("./States/Loading");
14
+ const Selected_1 = require("./States/Selected");
15
+ const useSelectedState_1 = require("../Hooks/useSelectedState");
16
+ const clsx_1 = __importDefault(require("clsx"));
17
+ const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
18
+ const { data: selectedState, error, isLoading } = (0, useSelectedState_1.useSelectedState)({ resource, plugin });
13
19
  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
14
20
  const isEmpty = resource === null && !isExternalLoading && !externalError;
15
- return (React.createElement("div", { className: clsx('resource-picker', isDisabled && 'resource-picker--disabled') },
16
- isImagePicker ? (React.createElement(PhotoLibraryRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })) : (React.createElement(AdsClickRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })),
17
- isEmpty ? (React.createElement(ModalTrigger, { overlayTriggerState: {
21
+ return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
22
+ isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
23
+ isEmpty ? (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
18
24
  isOpen: isModalOpen,
19
25
  onOpenChange: onModalStateChange,
20
- }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: React.createElement(AddCircleOutlineRoundedIcon, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (React.createElement("div", { className: "resource-picker-info" },
21
- React.createElement("div", { className: "resource-picker-info__layout" },
22
- (isExternalLoading || isLoading) && React.createElement(LoadingState, null),
23
- (externalError || error) && (React.createElement(ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
24
- !isExternalLoading && resource && selectedState && (React.createElement(SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
26
+ }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
27
+ react_1.default.createElement("div", { className: "resource-picker-info__layout" },
28
+ (isExternalLoading || isLoading) && react_1.default.createElement(Loading_1.LoadingState, null),
29
+ (externalError || error) && (react_1.default.createElement(Error_1.ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
30
+ !isExternalLoading && resource && selectedState && (react_1.default.createElement(Selected_1.SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
25
31
  };
32
+ exports.ResourcePicker = ResourcePicker;
@@ -1,6 +1,13 @@
1
- import React from 'react';
2
- import { Icon, ResetButton } from '@squiz/generic-browser-lib';
3
- export const ErrorState = ({ error, isDisabled, onClear }) => (React.createElement(React.Fragment, null,
4
- React.createElement(Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
5
- React.createElement("div", { className: "text-red-300 w-full" }, error.message),
6
- React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear })));
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.ErrorState = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
9
+ const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
10
+ react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
11
+ react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
12
+ react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
13
+ exports.ErrorState = ErrorState;
@@ -1,4 +1,11 @@
1
- import React from 'react';
2
- import { Spinner } from '@squiz/generic-browser-lib';
3
- export const LoadingState = () => (React.createElement("div", { className: "col-start-2 col-end-2" },
4
- React.createElement(Spinner, { label: "Loading selection", className: "m-2" })));
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.LoadingState = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
9
+ const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
10
+ react_1.default.createElement(generic_browser_lib_1.Spinner, { label: "Loading selection", className: "m-2" })));
11
+ exports.LoadingState = LoadingState;
@@ -1,20 +1,27 @@
1
- import React from 'react';
2
- import { ResetButton } from '@squiz/generic-browser-lib';
3
- import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
4
- import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
5
- export const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
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.SelectedState = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
9
+ const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
10
+ const CircledLoopIcon_1 = require("../../Icons/CircledLoopIcon");
11
+ const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
6
12
  const modalController = {
7
13
  isOpen: isModalOpen,
8
14
  onOpenChange: onModalStateChange,
9
15
  };
10
- const replaceAsset = (React.createElement(ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: React.createElement(CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
11
- return (React.createElement(React.Fragment, null,
12
- showThumbnail && resource.squizImage ? (React.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
13
- React.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (React.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
14
- React.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
16
+ const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
17
+ return (react_1.default.createElement(react_1.default.Fragment, null,
18
+ showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
19
+ react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
20
+ react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
15
21
  label,
16
22
  description),
17
- React.createElement("div", { className: "flex" },
23
+ react_1.default.createElement("div", { className: "flex" },
18
24
  replaceAsset,
19
- React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
25
+ react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
20
26
  };
27
+ exports.SelectedState = SelectedState;