@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/components/Permissions/PermissionsGroup.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface PermissionsGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+}
+declare const PermissionsGroup: ({ className, children, title, ...props }: PermissionsGroupProps) => React.JSX.Element;
+export { PermissionsGroup, type PermissionsGroupProps };

package/components/Permissions/PermissionsGroup.js

@@ -0,0 +1,12 @@
+import react from "react";
+import { Heading, cn } from "@webiny/admin-ui";
+const PermissionsGroup = ({ className, children, title, ...props })=>/*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn("mb-lg p-md-extra border-sm border-neutral-dimmed rounded-lg", className)
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "mb-sm"
+    }, title), children);
+export { PermissionsGroup };
+
+//# sourceMappingURL=PermissionsGroup.js.map

package/components/Permissions/PermissionsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Permissions/PermissionsGroup.js","sources":["../../../src/components/Permissions/PermissionsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, Heading } from \"@webiny/admin-ui\";\n\ninterface PermissionsGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n    title?: React.ReactNode;\n}\n\nconst PermissionsGroup = ({ className, children, title, ...props }: PermissionsGroupProps) => {\n    return (\n        <div\n            {...props}\n            className={cn(\"mb-lg p-md-extra border-sm border-neutral-dimmed rounded-lg\", className)}\n        >\n            <Heading level={6} className={\"mb-sm\"}>\n                {title}\n            </Heading>\n            {children}\n        </div>\n    );\n};\n\nexport { PermissionsGroup, type PermissionsGroupProps };\n"],"names":["PermissionsGroup","className","children","title","props","cn","Heading"],"mappings":";;AAOA,MAAMA,mBAAmB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAA8B,GAC9E,WAAP,GACI,oBAAC;QACI,GAAGA,KAAK;QACT,WAAWC,GAAG,+DAA+DJ;qBAE7E,oBAACK,SAAOA;QAAC,OAAO;QAAG,WAAW;OACzBH,QAEJD"}

package/components/Permissions/StyledComponents.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-export declare const flexClass: string;
-export declare const gridNoPaddingClass: string;
+export declare const gridWithPaddingClass: string;
 interface PermissionInfoProps {
     title: string;
 }
-export declare const PermissionInfo: React.FC<PermissionInfoProps>;
+export declare const PermissionInfo: ({ title }: PermissionInfoProps) => React.JSX.Element;
 export {};

package/components/Permissions/StyledComponents.js

@@ -1,36 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import react from "react";
+import { css } from "@emotion/css";
+import { Label } from "@webiny/admin-ui";
+const gridWithPaddingClass = css({
+    paddingTop: "var(--padding-md)"
 });
-exports.gridNoPaddingClass = exports.flexClass = exports.PermissionInfo = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emotion = require("emotion");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var flexClass = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  alignItems: "center",
-  height: "100%"
-}, "label:flexClass;");
-exports.flexClass = flexClass;
-var gridNoPaddingClass = /*#__PURE__*/(0, _emotion.css)({
-  padding: "0px !important"
-}, "label:gridNoPaddingClass;");
-exports.gridNoPaddingClass = gridNoPaddingClass;
-
-var PermissionInfo = function PermissionInfo(_ref) {
-  var title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: flexClass
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body2"
-  }, title));
-};
-
-exports.PermissionInfo = PermissionInfo;
+const PermissionInfo = ({ title })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center h-full"
+    }, /*#__PURE__*/ react.createElement(Label, {
+        text: title
+    }));
+export { PermissionInfo, gridWithPaddingClass };
+
+//# sourceMappingURL=StyledComponents.js.map

package/components/Permissions/StyledComponents.js.map

@@ -1 +1 @@
-{"version":3,"names":["flexClass","css","display","alignItems","height","gridNoPaddingClass","padding","PermissionInfo","title"],"sources":["StyledComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport const flexClass = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"100%\"\n});\n\nexport const gridNoPaddingClass = css({\n    padding: \"0px !important\"\n});\n\ninterface PermissionInfoProps {\n    title: string;\n}\nexport const PermissionInfo: React.FC<PermissionInfoProps> = ({ title }) => (\n    <div className={flexClass}>\n        <Typography use={\"body2\"}>{title}</Typography>\n    </div>\n);\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EACzBC,OAAO,EAAE,MADgB;EAEzBC,UAAU,EAAE,QAFa;EAGzBC,MAAM,EAAE;AAHiB,CAAJ,qBAAlB;;AAMA,IAAMC,kBAAkB,gBAAG,IAAAJ,YAAA,EAAI;EAClCK,OAAO,EAAE;AADyB,CAAJ,8BAA3B;;;AAOA,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,oBACzD;IAAK,SAAS,EAAER;EAAhB,gBACI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA2BQ,KAA3B,CADJ,CADyD;AAAA,CAAtD"}
+{"version":3,"file":"components/Permissions/StyledComponents.js","sources":["../../../src/components/Permissions/StyledComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport { Label } from \"@webiny/admin-ui\";\n\nexport const gridWithPaddingClass = css({\n    paddingTop: \"var(--padding-md)\"\n});\n\ninterface PermissionInfoProps {\n    title: string;\n}\nexport const PermissionInfo = ({ title }: PermissionInfoProps) => (\n    <div className={\"flex items-center h-full\"}>\n        <Label text={title} />\n    </div>\n);\n"],"names":["gridWithPaddingClass","css","PermissionInfo","title","Label"],"mappings":";;;AAIO,MAAMA,uBAAuBC,IAAI;IACpC,YAAY;AAChB;AAKO,MAAMC,iBAAiB,CAAC,EAAEC,KAAK,EAAuB,iBACzD,oBAAC;QAAI,WAAW;qBACZ,oBAACC,OAAKA;QAAC,MAAMD"}

package/components/Permissions/index.d.ts

@@ -1,2 +1,4 @@
-export * from "./StyledComponents";
-export { Permissions } from "./Permissions";
+export * from "./StyledComponents.js";
+export { Permissions } from "./Permissions.js";
+export { CannotUseAaclAlert } from "./CannotUseAaclAlert.js";
+export * from "./PermissionsGroup.js";

package/components/Permissions/index.js

@@ -1,30 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Permissions: true
-};
-Object.defineProperty(exports, "Permissions", {
-  enumerable: true,
-  get: function get() {
-    return _Permissions.Permissions;
-  }
-});
-
-var _StyledComponents = require("./StyledComponents");
-
-Object.keys(_StyledComponents).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _StyledComponents[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _StyledComponents[key];
-    }
-  });
-});
-
-var _Permissions = require("./Permissions");
+export * from "./StyledComponents.js";
+export * from "./PermissionsGroup.js";
+export { Permissions } from "./Permissions.js";
+export { CannotUseAaclAlert } from "./CannotUseAaclAlert.js";

package/components/RegisterFeature.d.ts

@@ -0,0 +1,11 @@
+import type { FeatureDefinition } from "@webiny/feature/admin";
+type ExtractOptions<TParams extends any[]> = TParams extends [infer First, ...any[]] ? First : never;
+type RegisterFeatureProps<TParams extends any[]> = {
+    feature: FeatureDefinition<any, TParams>;
+} & (TParams extends [] ? {
+    options?: never;
+} : {
+    options: ExtractOptions<TParams>;
+});
+export declare const RegisterFeature: <TParams extends any[]>(props: RegisterFeatureProps<TParams>) => null;
+export {};

package/components/RegisterFeature.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useContainer } from "@webiny/app";
+const RegisterFeatureImpl = ({ feature, options })=>{
+    const container = useContainer();
+    useMemo(()=>{
+        const register = feature.register;
+        if (void 0 !== options) register(container, options);
+        else register(container);
+    }, [
+        container,
+        feature,
+        options
+    ]);
+    return null;
+};
+const RegisterFeature = RegisterFeatureImpl;
+export { RegisterFeature };
+
+//# sourceMappingURL=RegisterFeature.js.map

package/components/RegisterFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/RegisterFeature.js","sources":["../../src/components/RegisterFeature.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useContainer } from \"@webiny/app\";\nimport type { FeatureDefinition } from \"@webiny/feature/admin\";\n\n// Extract the first parameter type from TParams tuple\ntype ExtractOptions<TParams extends any[]> = TParams extends [infer First, ...any[]]\n    ? First\n    : never;\n\n// Conditional props based on whether feature requires options\ntype RegisterFeatureProps<TParams extends any[]> = {\n    feature: FeatureDefinition<any, TParams>;\n} & (TParams extends [] ? { options?: never } : { options: ExtractOptions<TParams> });\n\nconst RegisterFeatureImpl = <TParams extends any[]>({\n    feature,\n    options\n}: RegisterFeatureProps<TParams>) => {\n    const container = useContainer();\n    useMemo(() => {\n        // Cast feature.register to accept ...any[] to avoid type narrowing issues\n        const register = feature.register as (container: any, ...args: any[]) => void;\n        if (options !== undefined) {\n            register(container, options);\n        } else {\n            register(container);\n        }\n    }, [container, feature, options]);\n    return null;\n};\n\nexport const RegisterFeature = RegisterFeatureImpl as <TParams extends any[]>(\n    props: RegisterFeatureProps<TParams>\n) => null;\n"],"names":["RegisterFeatureImpl","feature","options","container","useContainer","useMemo","register","undefined","RegisterFeature"],"mappings":";;AAcA,MAAMA,sBAAsB,CAAwB,EAChDC,OAAO,EACPC,OAAO,EACqB;IAC5B,MAAMC,YAAYC;IAClBC,QAAQ;QAEJ,MAAMC,WAAWL,QAAQ,QAAQ;QACjC,IAAIC,AAAYK,WAAZL,SACAI,SAASH,WAAWD;aAEpBI,SAASH;IAEjB,GAAG;QAACA;QAAWF;QAASC;KAAQ;IAChC,OAAO;AACX;AAEO,MAAMM,kBAAkBR"}

package/components/ResizablePanels/index.d.ts

@@ -0,0 +1 @@
+export { Group as PanelGroup, type GroupProps as PanelGroupProps, Panel, type PanelProps, Separator as PanelResizeHandle, type Layout } from "react-resizable-panels";

package/components/ResizablePanels/index.js

@@ -0,0 +1 @@
+export { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels";

package/components/RoleAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_ROLES: import("graphql").DocumentNode;

package/components/RoleAutocomplete/graphql.js

@@ -0,0 +1,19 @@
+import graphql_tag from "graphql-tag";
+const LIST_ROLES = graphql_tag`
+    query ListRoles {
+        security {
+            roles: listRoles {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+            }
+        }
+    }
+`;
+export { LIST_ROLES };
+
+//# sourceMappingURL=graphql.js.map

package/components/RoleAutocomplete/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/RoleAutocomplete/graphql.js","sources":["../../../src/components/RoleAutocomplete/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_ROLES = gql`\n    query ListRoles {\n        security {\n            roles: listRoles {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_ROLES","gql"],"mappings":";AAEO,MAAMA,aAAaC,WAAG,CAAC;;;;;;;;;;;;;;AAc9B,CAAC"}

package/components/RoleAutocomplete/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+type RoleAutocompleteProps = Omit<React.ComponentProps<typeof AutoComplete>, "options" | "onValueChange"> & {
+    onChange?: (value: string) => void;
+};
+export declare const RoleAutocomplete: ({ onChange, value, ...props }: RoleAutocompleteProps) => React.JSX.Element;
+export {};

package/components/RoleAutocomplete/index.js

@@ -0,0 +1,26 @@
+import react, { useCallback, useMemo } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+import { LIST_ROLES } from "./graphql.js";
+import { useQuery } from "@apollo/react-hooks";
+const RoleAutocomplete = ({ onChange, value, ...props })=>{
+    const { data, loading } = useQuery(LIST_ROLES);
+    const rawOptions = loading || !data ? [] : data.security.roles.data;
+    const options = useMemo(()=>rawOptions.map((role)=>({
+                label: role.name,
+                value: role.id
+            })), [
+        rawOptions
+    ]);
+    const onValueChange = useCallback((id)=>onChange?.(id), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        ...props,
+        options: options,
+        value: loading ? void 0 : value,
+        onValueChange: onValueChange
+    });
+};
+export { RoleAutocomplete };
+
+//# sourceMappingURL=index.js.map

package/components/RoleAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/RoleAutocomplete/index.js","sources":["../../../src/components/RoleAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_ROLES } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype RoleAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const RoleAutocomplete = ({ onChange, value, ...props }: RoleAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_ROLES);\n    const rawOptions = loading || !data ? [] : data.security.roles.data;\n\n    const options = useMemo(\n        () => rawOptions.map((role: any) => ({ label: role.name, value: role.id })),\n        [rawOptions]\n    );\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            value={loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n};\n"],"names":["RoleAutocomplete","onChange","value","props","data","loading","useQuery","LIST_ROLES","rawOptions","options","useMemo","role","onValueChange","useCallback","id","AutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAA8B;IACjF,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAEnE,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,gBAAgBC,YAAY,CAACC,KAAeb,WAAWa,KAAK;QAACb;KAAS;IAE5E,OAAO,WAAP,GACI,oBAACc,cAAYA;QACR,GAAGZ,KAAK;QACT,SAASM;QACT,OAAOJ,UAAUW,SAAad;QAC9B,eAAeU;;AAG3B"}

package/components/RolesMultiAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_ROLES: import("graphql").DocumentNode;

package/components/RolesMultiAutocomplete/graphql.js

@@ -0,0 +1,24 @@
+import graphql_tag from "graphql-tag";
+const LIST_ROLES = graphql_tag`
+    query ListRoles {
+        security {
+            roles: listRoles {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+                error {
+                    data
+                    message
+                    code
+                }
+            }
+        }
+    }
+`;
+export { LIST_ROLES };
+
+//# sourceMappingURL=graphql.js.map

package/components/RolesMultiAutocomplete/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/RolesMultiAutocomplete/graphql.js","sources":["../../../src/components/RolesMultiAutocomplete/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_ROLES = gql`\n    query ListRoles {\n        security {\n            roles: listRoles {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n                error {\n                    data\n                    message\n                    code\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_ROLES","gql"],"mappings":";AAEO,MAAMA,aAAaC,WAAG,CAAC;;;;;;;;;;;;;;;;;;;AAmB9B,CAAC"}

package/components/RolesMultiAutocomplete/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+type RolesMultiAutocompleteProps = Omit<React.ComponentProps<typeof MultiAutoComplete>, "options" | "onValuesChange"> & {
+    onChange?: (values: string[]) => void;
+};
+export declare const RolesMultiAutocomplete: ({ onChange, values, ...props }: RolesMultiAutocompleteProps) => React.JSX.Element;
+export {};

package/components/RolesMultiAutocomplete/index.js

@@ -0,0 +1,26 @@
+import react, { useCallback, useMemo } from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+import { LIST_ROLES } from "./graphql.js";
+import { useQuery } from "@apollo/react-hooks";
+const RolesMultiAutocomplete = ({ onChange, values, ...props })=>{
+    const { data, loading } = useQuery(LIST_ROLES);
+    const rawOptions = loading || !data ? [] : data.security.roles.data;
+    const options = useMemo(()=>rawOptions.map((role)=>({
+                label: role.name,
+                value: role.id
+            })), [
+        rawOptions
+    ]);
+    const onValuesChange = useCallback((ids)=>onChange?.(ids), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        ...props,
+        options: options,
+        values: loading ? void 0 : values,
+        onValuesChange: onValuesChange
+    });
+};
+export { RolesMultiAutocomplete };
+
+//# sourceMappingURL=index.js.map

package/components/RolesMultiAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/RolesMultiAutocomplete/index.js","sources":["../../../src/components/RolesMultiAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_ROLES } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype RolesMultiAutocompleteProps = Omit<\n    React.ComponentProps<typeof MultiAutoComplete>,\n    \"options\" | \"onValuesChange\"\n> & {\n    onChange?: (values: string[]) => void;\n};\n\nexport const RolesMultiAutocomplete = ({\n    onChange,\n    values,\n    ...props\n}: RolesMultiAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_ROLES);\n    const rawOptions = loading || !data ? [] : data.security.roles.data;\n\n    const options = useMemo(\n        () => rawOptions.map((role: any) => ({ label: role.name, value: role.id })),\n        [rawOptions]\n    );\n\n    const onValuesChange = useCallback((ids: string[]) => onChange?.(ids), [onChange]);\n\n    return (\n        <MultiAutoComplete\n            {...props}\n            options={options}\n            values={loading ? undefined : (values as string[] | undefined)}\n            onValuesChange={onValuesChange}\n        />\n    );\n};\n"],"names":["RolesMultiAutocomplete","onChange","values","props","data","loading","useQuery","LIST_ROLES","rawOptions","options","useMemo","role","onValuesChange","useCallback","ids","MultiAutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,yBAAyB,CAAC,EACnCC,QAAQ,EACRC,MAAM,EACN,GAAGC,OACuB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAEnE,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,iBAAiBC,YAAY,CAACC,MAAkBb,WAAWa,MAAM;QAACb;KAAS;IAEjF,OAAO,WAAP,GACI,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAASM;QACT,QAAQJ,UAAUW,SAAad;QAC/B,gBAAgBU;;AAG5B"}

package/components/SearchUI.d.ts

@@ -2,7 +2,8 @@ import React from "react";
 export interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    onEnter?: () => any;
     inputPlaceholder?: string;
+    dataTestId?: string;
 }
-declare const Search: React.FC<SearchProps>;
-export default Search;
+export declare const SearchUI: ({ value, onChange, onEnter, dataTestId, inputPlaceholder }: SearchProps) => React.JSX.Element;

package/components/SearchUI.js

@@ -1,73 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _InputField = _interopRequireDefault(require("./SimpleUI/InputField"));
-
-var _search24px = require("../assets/icons/search-24px.svg");
-
-var SearchWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "epa3kz70",
-  label: "SearchWrapper"
-})({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  "& .search__icon": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    paddingLeft: "0.25rem",
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  },
-  "& .search__input": {
-    width: "100%",
-    padding: "0.5rem 0.5rem 0.5rem 2.25rem",
-    outline: "none",
-    border: "none",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&:focus": {
-      outline: "none"
-    },
-    "&::placeholder": {
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-  }
-});
-
-var Search = function Search(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      _ref$inputPlaceholder = _ref.inputPlaceholder,
-      inputPlaceholder = _ref$inputPlaceholder === void 0 ? "Search..." : _ref$inputPlaceholder;
-  return /*#__PURE__*/_react.default.createElement(SearchWrapper, {
-    "data-testid": "default-data-list.search"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "search__icon"
-  }, /*#__PURE__*/_react.default.createElement(_search24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_InputField.default, {
-    className: "search__input",
-    placeholder: inputPlaceholder,
-    value: value,
-    onChange: onChange,
-    autoComplete: "off"
-  }));
-};
-
-var _default = Search;
-exports.default = _default;
+import react from "react";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { Icon, InputPrimitive } from "@webiny/admin-ui";
+const SearchUI = ({ value, onChange, onEnter, dataTestId, inputPlaceholder = "Search..." })=>/*#__PURE__*/ react.createElement(InputPrimitive, {
+        id: "search-input",
+        placeholder: inputPlaceholder,
+        value: value,
+        onChange: onChange,
+        onEnter: onEnter,
+        autoComplete: "off",
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Search",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        variant: "ghost",
+        size: "md",
+        "data-testid": dataTestId
+    });
+export { SearchUI };
+
+//# sourceMappingURL=SearchUI.js.map

package/components/SearchUI.js.map

@@ -1 +1 @@
-{"version":3,"names":["SearchWrapper","styled","width","height","display","position","top","left","bottom","pointerEvents","alignItems","paddingLeft","color","padding","outline","border","textTransform","letterSpacing","Search","value","onChange","inputPlaceholder"],"sources":["SearchUI.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport InputField from \"./SimpleUI/InputField\";\nimport { ReactComponent as SearchIcon } from \"../assets/icons/search-24px.svg\";\n\nconst SearchWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    position: \"relative\",\n\n    \"& .search__icon\": {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        bottom: 0,\n        pointerEvents: \"none\",\n        display: \"flex\",\n        alignItems: \"center\",\n        paddingLeft: \"0.25rem\",\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n\n    \"& .search__input\": {\n        width: \"100%\",\n        padding: \"0.5rem 0.5rem 0.5rem 2.25rem\",\n        outline: \"none\",\n        border: \"none\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&:focus\": {\n            outline: \"none\"\n        },\n        \"&::placeholder\": {\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.05em\",\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    }\n});\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    inputPlaceholder?: string;\n}\nconst Search: React.FC<SearchProps> = ({ value, onChange, inputPlaceholder = \"Search...\" }) => {\n    return (\n        <SearchWrapper data-testid={\"default-data-list.search\"}>\n            <div className=\"search__icon\">\n                <SearchIcon />\n            </div>\n            <InputField\n                className=\"search__input\"\n                placeholder={inputPlaceholder}\n                value={value}\n                onChange={onChange}\n                autoComplete=\"off\"\n            />\n        </SearchWrapper>\n    );\n};\n\nexport default Search;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,KAAK,EAAE,MADyB;EAEhCC,MAAM,EAAE,MAFwB;EAGhCC,OAAO,EAAE,MAHuB;EAIhCC,QAAQ,EAAE,UAJsB;EAMhC,mBAAmB;IACfA,QAAQ,EAAE,UADK;IAEfC,GAAG,EAAE,CAFU;IAGfC,IAAI,EAAE,CAHS;IAIfC,MAAM,EAAE,CAJO;IAKfC,aAAa,EAAE,MALA;IAMfL,OAAO,EAAE,MANM;IAOfM,UAAU,EAAE,QAPG;IAQfC,WAAW,EAAE,SARE;IASfC,KAAK,EAAE;EATQ,CANa;EAkBhC,oBAAoB;IAChBV,KAAK,EAAE,MADS;IAEhBW,OAAO,EAAE,8BAFO;IAGhBC,OAAO,EAAE,MAHO;IAIhBC,MAAM,EAAE,MAJQ;IAKhBH,KAAK,EAAE,6CALS;IAMhB,WAAW;MACPE,OAAO,EAAE;IADF,CANK;IAShB,kBAAkB;MACdE,aAAa,EAAE,WADD;MAEdC,aAAa,EAAE,QAFD;MAGdL,KAAK,EAAE;IAHO;EATF;AAlBY,CAAjB,CAAnB;;AAwCA,IAAMM,MAA6B,GAAG,SAAhCA,MAAgC,OAAyD;EAAA,IAAtDC,KAAsD,QAAtDA,KAAsD;EAAA,IAA/CC,QAA+C,QAA/CA,QAA+C;EAAA,iCAArCC,gBAAqC;EAAA,IAArCA,gBAAqC,sCAAlB,WAAkB;EAC3F,oBACI,6BAAC,aAAD;IAAe,eAAa;EAA5B,gBACI;IAAK,SAAS,EAAC;EAAf,gBACI,6BAAC,0BAAD,OADJ,CADJ,eAII,6BAAC,mBAAD;IACI,SAAS,EAAC,eADd;IAEI,WAAW,EAAEA,gBAFjB;IAGI,KAAK,EAAEF,KAHX;IAII,QAAQ,EAAEC,QAJd;IAKI,YAAY,EAAC;EALjB,EAJJ,CADJ;AAcH,CAfD;;eAiBeF,M"}
+{"version":3,"file":"components/SearchUI.js","sources":["../../src/components/SearchUI.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { Icon, InputPrimitive } from \"@webiny/admin-ui\";\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    onEnter?: () => any;\n    inputPlaceholder?: string;\n    dataTestId?: string;\n}\n\nexport const SearchUI = ({\n    value,\n    onChange,\n    onEnter,\n    dataTestId,\n    inputPlaceholder = \"Search...\"\n}: SearchProps) => {\n    return (\n        <InputPrimitive\n            id={\"search-input\"}\n            placeholder={inputPlaceholder}\n            value={value}\n            onChange={onChange}\n            onEnter={onEnter}\n            autoComplete=\"off\"\n            startIcon={<Icon label={\"Search\"} icon={<SearchIcon />} />}\n            variant={\"ghost\"}\n            size={\"md\"}\n            data-testid={dataTestId}\n        />\n    );\n};\n"],"names":["SearchUI","value","onChange","onEnter","dataTestId","inputPlaceholder","InputPrimitive","Icon","SearchIcon"],"mappings":";;;AAaO,MAAMA,WAAW,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,mBAAmB,WAAW,EACpB,GACH,WAAP,GACI,oBAACC,gBAAcA;QACX,IAAI;QACJ,aAAaD;QACb,OAAOJ;QACP,UAAUC;QACV,SAASC;QACT,cAAa;QACb,yBAAW,oBAACI,MAAIA;YAAC,OAAO;YAAU,oBAAM,oBAACC,gBAAUA;;QACnD,SAAS;QACT,MAAM;QACN,eAAaJ"}

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,21 +1,32 @@
 import * as React from "react";
-interface SimpleFormProps {
+import { type VariantProps } from "@webiny/admin-ui";
+declare const simpleFormInnerVariants: (props?: ({
+    size?: "full" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;
-    "data-testid"?: string;
     noElevation?: boolean;
     className?: string;
 }
-export declare const SimpleForm: React.FC<SimpleFormProps>;
-interface SimpleFormHeaderProps {
+export declare const SimpleForm: ({ children, className, size, ...props }: SimpleFormProps) => React.JSX.Element;
+declare const simpleFormHeaderVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SimpleFormHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof simpleFormHeaderVariants> {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;
     children?: React.ReactNode;
+    ["data-testid"]?: string;
 }
-export declare const SimpleFormHeader: React.FC<SimpleFormHeaderProps>;
-interface SimpleFormFooterProps {
+export declare const SimpleFormHeader: ({ children, icon, title, className, rounded, ...props }: SimpleFormHeaderProps) => React.JSX.Element;
+export interface SimpleFormFooterProps {
     children: React.ReactNode;
     className?: string;
 }
-export declare const SimpleFormFooter: React.FC<SimpleFormFooterProps>;
-export declare const SimpleFormContent: React.FC;
+export declare const SimpleFormFooter: ({ children, className }: SimpleFormFooterProps) => React.JSX.Element;
+interface SimpleFormContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const SimpleFormContent: ({ children, className }: SimpleFormContentProps) => React.JSX.Element;
 export {};