@frontify/fondue 12.0.0-beta.7 → 12.0.0-beta.8
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.
- package/dist/components/AssetInput/AssetInput.es.js +5 -5
- package/dist/components/AssetInput/AssetInput.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -84,7 +84,7 @@ import "../../foundation/Icon/Generated/IconArrowCircleDown16.es.js";
|
|
|
84
84
|
import "../../foundation/Icon/Generated/IconArrowCircleDown20.es.js";
|
|
85
85
|
import "../../foundation/Icon/Generated/IconArrowCircleDown24.es.js";
|
|
86
86
|
import "../../foundation/Icon/Generated/IconArrowCircleDown32.es.js";
|
|
87
|
-
import
|
|
87
|
+
import v from "../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
|
|
88
88
|
import "../../foundation/Icon/Generated/IconArrowCircleUp12.es.js";
|
|
89
89
|
import "../../foundation/Icon/Generated/IconArrowCircleUp16.es.js";
|
|
90
90
|
import "../../foundation/Icon/Generated/IconArrowCircleUp20.es.js";
|
|
@@ -814,7 +814,7 @@ import "../../foundation/Icon/Generated/IconImage16.es.js";
|
|
|
814
814
|
import "../../foundation/Icon/Generated/IconImage20.es.js";
|
|
815
815
|
import "../../foundation/Icon/Generated/IconImage24.es.js";
|
|
816
816
|
import "../../foundation/Icon/Generated/IconImage32.es.js";
|
|
817
|
-
import
|
|
817
|
+
import x from "../../foundation/Icon/Generated/IconImageStack.es.js";
|
|
818
818
|
import "../../foundation/Icon/Generated/IconImageStack12.es.js";
|
|
819
819
|
import "../../foundation/Icon/Generated/IconImageStack16.es.js";
|
|
820
820
|
import "../../foundation/Icon/Generated/IconImageStack20.es.js";
|
|
@@ -1690,11 +1690,11 @@ const n3 = ({
|
|
|
1690
1690
|
className: p(["tw-flex tw-flex-col tw-h-8", o && "tw-pr-3"]),
|
|
1691
1691
|
"data-test-id": "asset-input-upload"
|
|
1692
1692
|
}, /* @__PURE__ */ t.createElement("label", {
|
|
1693
|
-
className: "tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s
|
|
1693
|
+
className: "tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black",
|
|
1694
1694
|
htmlFor: w
|
|
1695
1695
|
}, /* @__PURE__ */ t.createElement("span", {
|
|
1696
1696
|
className: "tw--ml-1 tw-mr-1.5"
|
|
1697
|
-
}, /* @__PURE__ */ t.createElement(
|
|
1697
|
+
}, /* @__PURE__ */ t.createElement(v, {
|
|
1698
1698
|
size: E.Size20
|
|
1699
1699
|
})), "Upload"), /* @__PURE__ */ t.createElement("input", {
|
|
1700
1700
|
id: w,
|
|
@@ -1710,7 +1710,7 @@ const n3 = ({
|
|
|
1710
1710
|
style: b.Default,
|
|
1711
1711
|
onClick: o,
|
|
1712
1712
|
emphasis: g.Weak,
|
|
1713
|
-
icon: /* @__PURE__ */ t.createElement(
|
|
1713
|
+
icon: /* @__PURE__ */ t.createElement(x, null)
|
|
1714
1714
|
}, "Browse")));
|
|
1715
1715
|
};
|
|
1716
1716
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, FC, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n name: string;\n};\n\nexport type ImageAsset = {\n type: 'image' | 'logo';\n name: string;\n extension: string;\n src?: string;\n alt?: string;\n icon?: undefined;\n size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n type: 'audio';\n extension: string;\n src?: undefined;\n alt?: undefined;\n icon?: undefined;\n size: number;\n};\n\ntype IconAsset = BaseAsset & {\n type: 'icon';\n extension?: undefined;\n src?: undefined;\n alt?: undefined;\n icon: ReactElement<IconProps>;\n size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type AssetType =\n | (ImageAsset & UploadSource)\n | (ImageAsset & LibrarySource)\n | (IconAsset & UploadSource)\n | (IconAsset & LibrarySource)\n | (OtherAsset & UploadSource)\n | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n assets?: AssetType[];\n size: AssetInputSize;\n numberOfLocations?: number;\n actions?: ActionMenuProps['menuBlocks'];\n isLoading?: boolean;\n onUploadClick?: (files: FileList) => void;\n onLibraryClick?: () => void;\n onMultiAssetClick?: () => void;\n acceptFileType?: string;\n};\n\nexport const AssetInput: FC<AssetInputProps> = ({\n assets = [],\n numberOfLocations = 1,\n actions = [],\n size = AssetInputSize.Small,\n isLoading = false,\n onLibraryClick,\n onUploadClick,\n onMultiAssetClick,\n acceptFileType,\n}) => {\n const assetsLength = assets.length;\n const id = useMemoizedId();\n\n const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files;\n\n if (files && onUploadClick) {\n onUploadClick(files);\n }\n };\n\n if ((isLoading || assetsLength === 1) && actions) {\n return <SelectedAsset asset={assets[0]} size={size} actions={actions} isLoading={isLoading} />;\n }\n\n if (assetsLength > 1 && onMultiAssetClick) {\n return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n }\n\n return (\n <div\n data-test-id=\"asset-input-placeholder\"\n className={merge([\n 'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n ])}\n >\n {onUploadClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n data-test-id=\"asset-input-upload\"\n >\n <label\n className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s
|
|
1
|
+
{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, FC, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n name: string;\n};\n\nexport type ImageAsset = {\n type: 'image' | 'logo';\n name: string;\n extension: string;\n src?: string;\n alt?: string;\n icon?: undefined;\n size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n type: 'audio';\n extension: string;\n src?: undefined;\n alt?: undefined;\n icon?: undefined;\n size: number;\n};\n\ntype IconAsset = BaseAsset & {\n type: 'icon';\n extension?: undefined;\n src?: undefined;\n alt?: undefined;\n icon: ReactElement<IconProps>;\n size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type AssetType =\n | (ImageAsset & UploadSource)\n | (ImageAsset & LibrarySource)\n | (IconAsset & UploadSource)\n | (IconAsset & LibrarySource)\n | (OtherAsset & UploadSource)\n | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n assets?: AssetType[];\n size: AssetInputSize;\n numberOfLocations?: number;\n actions?: ActionMenuProps['menuBlocks'];\n isLoading?: boolean;\n onUploadClick?: (files: FileList) => void;\n onLibraryClick?: () => void;\n onMultiAssetClick?: () => void;\n acceptFileType?: string;\n};\n\nexport const AssetInput: FC<AssetInputProps> = ({\n assets = [],\n numberOfLocations = 1,\n actions = [],\n size = AssetInputSize.Small,\n isLoading = false,\n onLibraryClick,\n onUploadClick,\n onMultiAssetClick,\n acceptFileType,\n}) => {\n const assetsLength = assets.length;\n const id = useMemoizedId();\n\n const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files;\n\n if (files && onUploadClick) {\n onUploadClick(files);\n }\n };\n\n if ((isLoading || assetsLength === 1) && actions) {\n return <SelectedAsset asset={assets[0]} size={size} actions={actions} isLoading={isLoading} />;\n }\n\n if (assetsLength > 1 && onMultiAssetClick) {\n return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n }\n\n return (\n <div\n data-test-id=\"asset-input-placeholder\"\n className={merge([\n 'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n ])}\n >\n {onUploadClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n data-test-id=\"asset-input-upload\"\n >\n <label\n className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black\"\n htmlFor={id}\n >\n <span className=\"tw--ml-1 tw-mr-1.5\">\n <IconArrowCircleUp size={IconSize.Size20} />\n </span>\n Upload\n </label>\n <input\n id={id}\n className=\"tw-hidden\"\n type=\"file\"\n accept={acceptFileType}\n multiple={!!onMultiAssetClick}\n onChange={onFileChange}\n />\n </div>\n )}\n {onLibraryClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n data-test-id=\"asset-input-library\"\n >\n <Button\n style={ButtonStyle.Default}\n onClick={onLibraryClick}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconImageStack />}\n >\n Browse\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDY,IAAA,sBAAA,MACA,GAAA,QAAA,SACA,EAAA,QAAA,SAFA,IAAA,KAAA,CAAA,CAAA;AAyBL,MAAM,KAAkC,CAAC;AAAA,EAC5C,YAAS,CAAC;AAAA,EACV,uBAAoB;AAAA,EACpB,aAAU,CAAC;AAAA,EACX,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACE;AACF,QAAM,IAAe,EAAO,QACtB,IAAK,KAEL,IAAe,CAAC,MAAyC;AACrD,UAAA,IAAQ,EAAM,OAAO;AAE3B,IAAI,KAAS,KACT,EAAc,CAAK;AAAA,EACvB;AAGC,SAAA,MAAa,MAAiB,MAAM,IAC7B,kBAAA,cAAA,GAAA;AAAA,IAAc,OAAO,EAAO;AAAA,IAAI;AAAA,IAAY;AAAA,IAAkB;AAAA,EAAA,CAAsB,IAG5F,IAAe,KAAK,IACZ,kBAAA,cAAA,GAAA;AAAA,IAAkB;AAAA,IAAgB,SAAS;AAAA,IAAmB;AAAA,EAAA,CAAsC,IAI3G,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAiB,IAAiB,kDAAkD;AAAA,IAAA,CACvF;AAAA,EAAA,GAEA,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAkB,SAAS,CAAC;AAAA,IAC5E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,SAAA;AAAA,IACG,WAAU;AAAA,IACV,SAAS;AAAA,EAAA,GAER,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,GAAA;AAAA,IAAkB,MAAM,EAAS;AAAA,EAAQ,CAAA,CAC9C,GAAO,QAEX,GACC,kBAAA,cAAA,SAAA;AAAA,IACG;AAAA,IACA,WAAU;AAAA,IACV,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU,CAAC,CAAC;AAAA,IACZ,UAAU;AAAA,EACd,CAAA,CACJ,GAEH,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAiB,SAAS,CAAC;AAAA,IAC3E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO,EAAY;AAAA,IACnB,SAAS;AAAA,IACT,UAAU,EAAe;AAAA,IACzB,sCAAO,GAAe,IAAA;AAAA,EAAA,GACzB,QAED,CACJ,CAER;AAER;"}
|