@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/RichTextEditor/RichTextEditorPrimitive.stories.js

@@ -0,0 +1,105 @@
+import { RichTextEditorPrimitive } from "./RichTextEditorPrimitive";
+const meta = {
+  title: "Components/Form Primitives/RichTextEditor",
+  component: RichTextEditorPrimitive,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onReady: {
+      action: "onReady"
+    }
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {};
+export const MediumSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "md"
+  }
+};
+export const LargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "lg"
+  }
+};
+export const ExtraLargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "xl"
+  }
+};
+export const PrimaryVariant = {
+  args: {
+    variant: "primary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const PrimaryVariantDisabled = {
+  args: {
+    ...PrimaryVariant.args,
+    disabled: true
+  }
+};
+export const PrimaryVariantInvalid = {
+  args: {
+    ...PrimaryVariant.args,
+    invalid: true
+  }
+};
+export const SecondaryVariant = {
+  args: {
+    variant: "secondary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const SecondaryVariantDisabled = {
+  args: {
+    ...SecondaryVariant.args,
+    disabled: true
+  }
+};
+export const SecondaryVariantInvalid = {
+  args: {
+    ...SecondaryVariant.args,
+    invalid: true
+  }
+};
+export const GhostVariant = {
+  args: {
+    variant: "ghost",
+    placeholder: "Custom placeholder"
+  }
+};
+export const GhostVariantDisabled = {
+  args: {
+    ...GhostVariant.args,
+    disabled: true
+  }
+};
+export const GhostVariantInvalid = {
+  args: {
+    ...GhostVariant.args,
+    invalid: true
+  }
+};
+export const WithCustomValue = {
+  args: {
+    ...Default.args,
+    value: [{
+      type: "paragraph",
+      data: {
+        text: "Custom value",
+        id: "any-custom-id",
+        type: "paragraph"
+      }
+    }]
+  }
+};
+
+//# sourceMappingURL=RichTextEditorPrimitive.stories.js.map

package/RichTextEditor/RichTextEditorPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RichTextEditorPrimitive","meta","title","component","argTypes","onChange","action","onReady","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithCustomValue","value","type","data","text","id"],"sources":["RichTextEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { RichTextEditorPrimitive } from \"./RichTextEditorPrimitive\";\n\nconst meta: Meta<typeof RichTextEditorPrimitive> = {\n    title: \"Components/Form Primitives/RichTextEditor\",\n    component: RichTextEditorPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onReady: { action: \"onReady\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RichTextEditorPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithCustomValue: Story = {\n    args: {\n        ...Default.args,\n        value: [\n            {\n                type: \"paragraph\",\n                data: { text: \"Custom value\", id: \"any-custom-id\", type: \"paragraph\" }\n            }\n        ]\n    }\n};\n"],"mappings":"AACA,SAASA,uBAAuB;AAEhC,MAAMC,IAA0C,GAAG;EAC/CC,KAAK,EAAE,2CAA2C;EAClDC,SAAS,EAAEH,uBAAuB;EAClCI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW,CAAC;IAChCC,OAAO,EAAE;MAAED,MAAM,EAAE;IAAU;EACjC,CAAC;EACDE,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMS,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,UAAiB,GAAG;EAC7BC,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5BH,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAME,cAAqB,GAAG;EACjCJ,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMG,cAAqB,GAAG;EACjCL,IAAI,EAAE;IACFM,OAAO,EAAE,SAAS;IAClBL,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMM,sBAA6B,GAAG;EACzCP,IAAI,EAAE;IACF,GAAGK,cAAc,CAACL,IAAI;IACtBQ,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCT,IAAI,EAAE;IACF,GAAGK,cAAc,CAACL,IAAI;IACtBU,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnCX,IAAI,EAAE;IACFM,OAAO,EAAE,WAAW;IACpBL,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMW,wBAA+B,GAAG;EAC3CZ,IAAI,EAAE;IACF,GAAGW,gBAAgB,CAACX,IAAI;IACxBQ,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMK,uBAA8B,GAAG;EAC1Cb,IAAI,EAAE;IACF,GAAGW,gBAAgB,CAACX,IAAI;IACxBU,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMI,YAAmB,GAAG;EAC/Bd,IAAI,EAAE;IACFM,OAAO,EAAE,OAAO;IAChBL,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMc,oBAA2B,GAAG;EACvCf,IAAI,EAAE;IACF,GAAGc,YAAY,CAACd,IAAI;IACpBQ,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,mBAA0B,GAAG;EACtChB,IAAI,EAAE;IACF,GAAGc,YAAY,CAACd,IAAI;IACpBU,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMO,eAAsB,GAAG;EAClCjB,IAAI,EAAE;IACF,GAAGF,OAAO,CAACE,IAAI;IACfkB,KAAK,EAAE,CACH;MACIC,IAAI,EAAE,WAAW;MACjBC,IAAI,EAAE;QAAEC,IAAI,EAAE,cAAc;QAAEC,EAAE,EAAE,eAAe;QAAEH,IAAI,EAAE;MAAY;IACzE,CAAC;EAET;AACJ,CAAC","ignoreList":[]}

package/RichTextEditor/createPropsFromConfig.d.ts

@@ -0,0 +1,15 @@
+import type { ToolSettings } from "@editorjs/editorjs";
+import { type RichTextEditorPrimitiveProps } from "./RichTextEditorPrimitive";
+interface CreatePropsFromConfigResult {
+    onReady: (editor: any) => void;
+    tools: {
+        [key: string]: ToolSettings;
+    };
+}
+/**
+ * Creates RichTextEditor props from the given config (or array of configs).
+ *
+ * TODO: figure out types for editor and return type of the function.
+ */
+export declare const createPropsFromConfig: (config: RichTextEditorPrimitiveProps[]) => CreatePropsFromConfigResult;
+export {};

package/RichTextEditor/createPropsFromConfig.js

@@ -0,0 +1,25 @@
+/**
+ * Creates RichTextEditor props from the given config (or array of configs).
+ *
+ * TODO: figure out types for editor and return type of the function.
+ */
+export const createPropsFromConfig = config => {
+  const configs = Array.isArray(config) ? config : [config];
+  return {
+    onReady(params) {
+      configs.forEach(config => {
+        if (typeof config.onReady === "function") {
+          config.onReady(params);
+        }
+      });
+    },
+    tools: configs.reduce((tools, config) => {
+      return {
+        ...tools,
+        ...config.tools
+      };
+    }, {})
+  };
+};
+
+//# sourceMappingURL=createPropsFromConfig.js.map

package/RichTextEditor/createPropsFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createPropsFromConfig","config","configs","Array","isArray","onReady","params","forEach","tools","reduce"],"sources":["createPropsFromConfig.ts"],"sourcesContent":["import type { RichTextEditorProps } from \"./RichTextEditor\";\nimport type { ToolSettings } from \"@editorjs/editorjs\";\nimport type { OutputData } from \"@editorjs/editorjs/types\";\nimport { type RichTextEditorPrimitiveProps } from \"./RichTextEditorPrimitive\";\n\ninterface CreatePropsFromConfigResult {\n    onReady: (editor: any) => void;\n    tools: {\n        [key: string]: ToolSettings;\n    };\n}\n\ninterface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n/**\n * Creates RichTextEditor props from the given config (or array of configs).\n *\n * TODO: figure out types for editor and return type of the function.\n */\nexport const createPropsFromConfig = (\n    config: RichTextEditorPrimitiveProps[]\n): CreatePropsFromConfigResult => {\n    const configs = (Array.isArray(config) ? config : [config]) as RichTextEditorProps[];\n\n    return {\n        onReady(params: OnReadyParams) {\n            configs.forEach(config => {\n                if (typeof config.onReady === \"function\") {\n                    config.onReady(params);\n                }\n            });\n        },\n        tools: configs.reduce((tools, config) => {\n            return {\n                ...tools,\n                ...config.tools\n            };\n        }, {} as Record<string, ToolSettings>)\n    };\n};\n"],"mappings":"AAgBA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,qBAAqB,GAC9BC,MAAsC,IACR;EAC9B,MAAMC,OAAO,GAAIC,KAAK,CAACC,OAAO,CAACH,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,CAA2B;EAEpF,OAAO;IACHI,OAAOA,CAACC,MAAqB,EAAE;MAC3BJ,OAAO,CAACK,OAAO,CAACN,MAAM,IAAI;QACtB,IAAI,OAAOA,MAAM,CAACI,OAAO,KAAK,UAAU,EAAE;UACtCJ,MAAM,CAACI,OAAO,CAACC,MAAM,CAAC;QAC1B;MACJ,CAAC,CAAC;IACN,CAAC;IACDE,KAAK,EAAEN,OAAO,CAACO,MAAM,CAAC,CAACD,KAAK,EAAEP,MAAM,KAAK;MACrC,OAAO;QACH,GAAGO,KAAK;QACR,GAAGP,MAAM,CAACO;MACd,CAAC;IACL,CAAC,EAAE,CAAC,CAAiC;EACzC,CAAC;AACL,CAAC","ignoreList":[]}

package/RichTextEditor/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RichTextEditor";
+export * from "./RichTextEditorPrimitive";
+export { createPropsFromConfig } from "./createPropsFromConfig";

package/RichTextEditor/index.js

@@ -0,0 +1,5 @@
+export * from "./RichTextEditor";
+export * from "./RichTextEditorPrimitive";
+export { createPropsFromConfig } from "./createPropsFromConfig";
+
+//# sourceMappingURL=index.js.map

package/RichTextEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createPropsFromConfig"],"sources":["index.ts"],"sourcesContent":["export * from \"./RichTextEditor\";\nexport * from \"./RichTextEditorPrimitive\";\nexport { createPropsFromConfig } from \"./createPropsFromConfig\";\n"],"mappings":"AAAA;AACA;AACA,SAASA,qBAAqB","ignoreList":[]}

package/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type ScrollbarProps as ReactCustomScrollbarProps } from "react-custom-scrollbars";
+interface ScrollbarProps extends ReactCustomScrollbarProps {
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Scrollbar: (props: ScrollbarProps) => React.JSX.Element;
+export { Scrollbar, type ScrollbarProps };

package/Scrollbar/Scrollbar.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+const Scrollbar = props => {
+  return /*#__PURE__*/React.createElement(Scrollbars, props);
+};
+export { Scrollbar };
+
+//# sourceMappingURL=Scrollbar.js.map

package/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Scrollbars","Scrollbar","props","createElement"],"sources":["Scrollbar.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type ScrollbarProps as ReactCustomScrollbarProps,\n    Scrollbars\n} from \"react-custom-scrollbars\";\n\ninterface ScrollbarProps extends ReactCustomScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\nconst Scrollbar = (props: ScrollbarProps) => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar, type ScrollbarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEIC,UAAU,QACP,yBAAyB;AAOhC,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EACzC,oBAAOH,KAAA,CAAAI,aAAA,CAACH,UAAU,EAAKE,KAAQ,CAAC;AACpC,CAAC;AAED,SAASD,SAAS","ignoreList":[]}

package/Scrollbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Scrollbar";

package/Scrollbar/index.js

@@ -0,0 +1,3 @@
+export * from "./Scrollbar";
+
+//# sourceMappingURL=index.js.map

package/Scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Scrollbar\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { SelectPrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+type SelectProps = SelectPrimitiveProps & FormComponentProps;
+declare const Select: (({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Select, type SelectProps };

package/Select/Select.js

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils";
+import { SelectPrimitive } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableSelect = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(SelectPrimitive, Object.assign({}, props, {
+    disabled: disabled,
+    invalid: invalid
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const Select = makeDecoratable("Select", DecoratableSelect);
+export { Select };
+
+//# sourceMappingURL=Select.js.map

package/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","SelectPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableSelect","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","Select"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { SelectPrimitiveProps } from \"./primitives\";\nimport { SelectPrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype SelectProps = SelectPrimitiveProps & FormComponentProps;\n\nconst DecoratableSelect = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SelectProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <SelectPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst Select = makeDecoratable(\"Select\", DecoratableSelect);\n\nexport { Select, type SelectProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,eAAe;AAExB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,eAAe,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACpEpB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,MAAM,GAAGxB,eAAe,CAAC,QAAQ,EAAEM,iBAAiB,CAAC;AAE3D,SAASkB,MAAM","ignoreList":[]}

package/Select/Select.mdx

@@ -0,0 +1,116 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SelectStories from './Select.stories';
+
+<Meta of={SelectStories} />
+
+# Select
+
+The Select component is a user interface element that allows users to choose one or multiple options from a predefined list. It simplifies data input by presenting a structured selection, reducing errors, and improving usability.
+
+## Usage
+
+<Canvas of={SelectStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Select } from "@webiny/admin-ui";
+
+const SelectExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Select
+            label="Time Zone"
+            description="Select your preferred time zone"
+            note="This setting will affect how times are displayed throughout the application"
+            required={true}
+            options={[
+                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+                { value: "CST", label: "Central Standard Time (UTC-6)" },
+                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+                { value: "CET", label: "Central European Time (UTC+1)" },
+                { value: "IST", label: "India Standard Time (UTC+5:30)" }
+            ]}
+            value={value}
+            onChange={setValue}
+        />
+    );
+};
+
+export default SelectExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Select/Select.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={SelectStories.Documentation} exclude={["onChange", "onOpenChange"]}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Select } from "@webiny/admin-ui";
+
+const SelectExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Select
+            label="Time Zone"
+            description="Select your preferred time zone"
+            note="This setting will affect how times are displayed throughout the application"
+            required={true}
+            options={[
+                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+                { value: "CST", label: "Central Standard Time (UTC-6)" },
+                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+                { value: "CET", label: "Central European Time (UTC+1)" },
+                { value: "IST", label: "India Standard Time (UTC+5:30)" }
+            ]}
+            value={value}
+            onChange={setValue}
+        />
+    );
+};
+
+export default SelectExample;
+```
+
+## Anatomy
+
+### Select Anatomy
+<img src="/images/storybook/select/anatomy.png" alt="Select Anatomy"/>
+
+### Styles
+<img src="/images/storybook/select/styles.png" alt="Styles"/>
+
+### Options
+<img src="/images/storybook/select/options.png" alt="Options"/>
+
+### States and Styles
+<img src="/images/storybook/select/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/select/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/select/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/select/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/select/used-in-forms.png" alt="Used in forms"/>

package/Select/Select.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "./";
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithRequiredLabel: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/Select/Select.stories.js

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { Select } from "./";
+const meta = {
+  title: "Components/Form/Select",
+  component: Select,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onOpenChange: {
+      action: "onOpenChange"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(Select, Object.assign({}, args, {
+      value: value,
+      onChange: setValue
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    options: [{
+      value: "EST",
+      label: "Eastern Standard Time (UTC-5)"
+    }, {
+      value: "CST",
+      label: "Central Standard Time (UTC-6)"
+    }, {
+      value: "PST",
+      label: "Pacific Standard Time (UTC-8)"
+    }, {
+      value: "GMT",
+      label: "Greenwich Mean Time (UTC+0)"
+    }, {
+      value: "CET",
+      label: "Central European Time (UTC+1)"
+    }, {
+      value: "CAT",
+      label: "Central Africa Time (UTC+2)"
+    }, {
+      value: "IST",
+      label: "India Standard Time (UTC+5:30)"
+    }, {
+      value: "CST_CHINA",
+      label: "China Standard Time (UTC+8)"
+    }, {
+      value: "JST",
+      label: "Japan Standard Time (UTC+9)"
+    }, {
+      value: "AWST",
+      label: "Australian Western Standard Time (UTC+8)"
+    }, {
+      value: "NZST",
+      label: "New Zealand Standard Time (UTC+12)"
+    }, {
+      value: "FJT",
+      label: "Fiji Time (UTC+12)"
+    }, {
+      value: "ART",
+      label: "Argentina Time (UTC-3)"
+    }, {
+      value: "BOT",
+      label: "Bolivia Time (UTC-4)"
+    }, {
+      value: "BRT",
+      label: "Brasilia Time (UTC-3)"
+    }]
+  }
+};
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label"
+  }
+};
+export const WithRequiredLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState("");
+    return /*#__PURE__*/React.createElement(Select, Object.assign({}, args, {
+      value: value,
+      onChange: newValue => setValue(newValue)
+    }));
+  },
+  args: {
+    label: "Time Zone",
+    description: "Select your preferred time zone",
+    note: "This setting will affect how times are displayed throughout the application",
+    required: true,
+    disabled: false,
+    options: [{
+      value: "EST",
+      label: "Eastern Standard Time (UTC-5)"
+    }, {
+      value: "CST",
+      label: "Central Standard Time (UTC-6)"
+    }, {
+      value: "PST",
+      label: "Pacific Standard Time (UTC-8)"
+    }, {
+      value: "GMT",
+      label: "Greenwich Mean Time (UTC+0)"
+    }, {
+      value: "CET",
+      label: "Central European Time (UTC+1)"
+    }, {
+      value: "IST",
+      label: "India Standard Time (UTC+5:30)"
+    }]
+  }
+};
+
+//# sourceMappingURL=Select.stories.js.map

package/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Select","meta","title","component","argTypes","onChange","action","onOpenChange","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","options","label","WithLabel","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","newValue"],"sources":["Select.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Select } from \"~/Select\";\n\nconst meta: Meta<typeof Select> = {\n    title: \"Components/Form/Select\",\n    component: Select,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Select {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"CAT\", label: \"Central Africa Time (UTC+2)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" },\n            { value: \"CST_CHINA\", label: \"China Standard Time (UTC+8)\" },\n            { value: \"JST\", label: \"Japan Standard Time (UTC+9)\" },\n            { value: \"AWST\", label: \"Australian Western Standard Time (UTC+8)\" },\n            { value: \"NZST\", label: \"New Zealand Standard Time (UTC+12)\" },\n            { value: \"FJT\", label: \"Fiji Time (UTC+12)\" },\n            { value: \"ART\", label: \"Argentina Time (UTC-3)\" },\n            { value: \"BOT\", label: \"Bolivia Time (UTC-4)\" },\n            { value: \"BRT\", label: \"Brasilia Time (UTC-3)\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Time Zone\",\n        description: \"Select your preferred time zone\",\n        note: \"This setting will affect how times are displayed throughout the application\",\n        required: true,\n        disabled: false,\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" }\n        ]\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Select/domains/SelectOption.d.ts

@@ -0,0 +1,22 @@
+import type { SelectOptionDto } from "./SelectOptionDto";
+export declare class SelectOption {
+    private readonly _label;
+    private readonly _value;
+    private readonly _options;
+    private readonly _disabled;
+    private readonly _separator;
+    protected constructor(data: {
+        label: string;
+        value: string | null;
+        options: SelectOptionDto[];
+        disabled: boolean;
+        separator: boolean;
+    });
+    static create(data: SelectOptionDto): SelectOption;
+    static createFromString(value: string): SelectOption;
+    get label(): string;
+    get value(): string | null;
+    get options(): SelectOption[];
+    get disabled(): boolean;
+    get separator(): boolean;
+}