@pega/cosmos-react-core 7.0.0-build.7.1 → 7.0.0-build.8.0
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/lib/components/File/FileDisplay.d.ts.map +1 -1
- package/lib/components/File/FileDisplay.js +1 -1
- package/lib/components/File/FileDisplay.js.map +1 -1
- package/lib/components/File/FileInput.d.ts.map +1 -1
- package/lib/components/File/FileInput.js +35 -21
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/components/File/FileItem.d.ts +2 -4
- package/lib/components/File/FileItem.d.ts.map +1 -1
- package/lib/components/File/FileItem.js +3 -4
- package/lib/components/File/FileItem.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-down.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-down.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-down.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-left.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-left.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-left.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-down.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-down.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-left.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-left.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-right.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-right.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-up.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-micro-up.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-right.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-right.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-right.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-up.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/arrow-up.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/arrow-up.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-down.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-down.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/caret-down.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-left.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-left.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/caret-left.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-right.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-right.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/caret-right.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-up.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/caret-up.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/caret-up.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/case-solid.icon.d.ts +1 -1
- package/lib/components/Icon/streamline-icons/case-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/case-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/case-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/clock-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/clock-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/clock-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/drag.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/drag.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/information-solid.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/information-solid.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/information-solid.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/information-solid.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/minus.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/minus.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/minus.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/open.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/open.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/open.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/plus.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/plus.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/plus.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/rule-library-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/rule-library-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/rule-library-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/times.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/times.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/times.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/warn-solid.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/warn-solid.icon.js +2 -2
- package/lib/components/Icon/streamline-icons/warn-solid.icon.js.map +1 -1
- package/lib/components/Icon/streamlineIconNames.d.ts +1 -1
- package/lib/components/Icon/streamlineIconNames.d.ts.map +1 -1
- package/lib/components/Icon/streamlineIconNames.js +5 -0
- package/lib/components/Icon/streamlineIconNames.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.js +8 -6
- package/lib/components/Lightbox/Lightbox.js.map +1 -1
- package/lib/components/Location/utils.d.ts +18 -0
- package/lib/components/Location/utils.d.ts.map +1 -1
- package/lib/components/Location/utils.js +132 -18
- package/lib/components/Location/utils.js.map +1 -1
- package/lib/i18n/default.js +1 -1
- package/lib/i18n/default.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,YAAY,CAAC,EAC5D,SAAS,EACT,cAAc;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,YAAY,CAAC,EAC5D,SAAS,EACT,cAAc;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -9,7 +9,7 @@ const FileDisplay = forwardRef(function FileDisplay({ id, displayText, value, va
|
|
|
9
9
|
}
|
|
10
10
|
if (variant === 'link')
|
|
11
11
|
return (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayText || value }));
|
|
12
|
-
return (_jsx(FileItem, { ...restProps, id: id, ref: ref, format: value.split('.').pop() ?? value, name: displayText || value,
|
|
12
|
+
return (_jsx(FileItem, { ...restProps, id: id, ref: ref, format: value.split('.').pop() ?? value, name: displayText || value, thumbnail: thumbnail, onDownload: onDownload, onPreview: onPreview }));
|
|
13
13
|
});
|
|
14
14
|
export default FileDisplay;
|
|
15
15
|
//# sourceMappingURL=FileDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,EAAE,EACF,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAA0B,EAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,EACvC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,
|
|
1
|
+
{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,EAAE,EACF,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAA0B,EAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,EACvC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n extends Pick<FileItemProps, 'id' | 'onPreview' | 'onDownload'>,\n BaseProps,\n NoChildrenProp {\n /** URL address */\n value?: string;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Display value either as file, link only or textual representation.\n * @default 'file'\n */\n variant?: 'file' | 'link' | 'text';\n /** Thumbnail image. */\n thumbnail?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n function FileDisplay(\n {\n id,\n displayText,\n value,\n variant,\n thumbnail,\n onPreview,\n onDownload,\n ...restProps\n }: PropsWithoutRef<FileDisplayProps>,\n ref: FileDisplayProps['ref']\n ) {\n if (variant === 'text' || !value) {\n return (\n <span ref={ref} {...restProps}>\n {value ? displayText || value : <NoValue />}\n </span>\n );\n }\n\n if (variant === 'link')\n return (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n {displayText || value}\n </Link>\n );\n\n return (\n <FileItem\n {...restProps}\n id={id}\n ref={ref as Ref<HTMLDivElement>}\n format={value.split('.').pop() ?? value}\n name={displayText || value}\n thumbnail={thumbnail}\n onDownload={onDownload}\n onPreview={onPreview}\n />\n );\n }\n);\n\nexport default FileDisplay;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAOhD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAOhD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAoBpE,CAAC;AAIF,eAAO,MAAM,eAAe,wMAc3B,CAAC;;;;AA8KF,wBAA2D"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createElement as _createElement } from "react";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef, useCallback, useState } from 'react';
|
|
3
|
+
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { hideVisually } from 'polished';
|
|
6
6
|
import { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds, useTheme } from '../../hooks';
|
|
@@ -12,23 +12,24 @@ import Icon, { registerIcon } from '../Icon';
|
|
|
12
12
|
import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
|
|
13
13
|
import FormField from '../FormField';
|
|
14
14
|
import Grid from '../Grid';
|
|
15
|
-
import { withTestIds } from '../../utils';
|
|
15
|
+
import { getFocusables, withTestIds } from '../../utils';
|
|
16
16
|
import FileItem from './FileItem';
|
|
17
17
|
import { getFileInputTestIds } from './File.test-ids';
|
|
18
18
|
registerIcon(paperClipIcon);
|
|
19
|
-
export const StyledDropZone = styled(FormControl)(({ dragOver, theme }) => {
|
|
19
|
+
export const StyledDropZone = styled(FormControl)(({ dragOver, theme: { base: { spacing }, components } }) => {
|
|
20
20
|
return css `
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
padding: calc(2 * ${spacing});
|
|
22
|
+
height: ${components.input.height};
|
|
23
|
+
border-style: dashed;
|
|
24
|
+
cursor: pointer;
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
${dragOver &&
|
|
27
27
|
css `
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
border-style: solid;
|
|
29
|
+
`}
|
|
30
|
+
`;
|
|
31
31
|
});
|
|
32
|
+
StyledDropZone.defaultProps = defaultThemeProp;
|
|
32
33
|
export const StyledFileInput = styled.div(({ theme }) => {
|
|
33
34
|
return css `
|
|
34
35
|
position: relative;
|
|
@@ -40,10 +41,6 @@ export const StyledFileInput = styled.div(({ theme }) => {
|
|
|
40
41
|
input:enabled:focus + ${StyledDropZone} {
|
|
41
42
|
box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
|
|
42
43
|
}
|
|
43
|
-
|
|
44
|
-
input[hidden] + ${StyledDropZone} {
|
|
45
|
-
display: none;
|
|
46
|
-
}
|
|
47
44
|
`;
|
|
48
45
|
});
|
|
49
46
|
StyledFileInput.defaultProps = defaultThemeProp;
|
|
@@ -60,6 +57,9 @@ const FileInput = forwardRef(function FileInput(props, ref) {
|
|
|
60
57
|
const testIds = useTestIds(testId, getFileInputTestIds);
|
|
61
58
|
const icon = _jsx(Icon, { name: 'paper-clip' });
|
|
62
59
|
const inputRef = useConsolidatedRef(ref);
|
|
60
|
+
const fileItemListRef = useRef(null);
|
|
61
|
+
// Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted
|
|
62
|
+
const isFilesAdded = useRef(false);
|
|
63
63
|
const onChange = useCallback((e) => {
|
|
64
64
|
if (e.target.files) {
|
|
65
65
|
onFilesAdded?.(Array.from(e.target.files));
|
|
@@ -78,6 +78,7 @@ const FileInput = forwardRef(function FileInput(props, ref) {
|
|
|
78
78
|
const t = useI18n();
|
|
79
79
|
const [dragOver, setDragOver] = useState(false);
|
|
80
80
|
const { ltr, rtl } = useDirection();
|
|
81
|
+
const hideFileInput = !multiple && files && files.length > 0;
|
|
81
82
|
const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
|
|
82
83
|
inputRef.current?.focus();
|
|
83
84
|
inputRef.current?.click();
|
|
@@ -90,12 +91,25 @@ const FileInput = forwardRef(function FileInput(props, ref) {
|
|
|
90
91
|
}, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
|
|
91
92
|
_jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
|
|
92
93
|
]), "\u00A0"] }), rtl && icon] })] }));
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
const fileItemList = (_jsx(Grid, { "data-testid": testIds.files, container: {
|
|
95
|
+
gap: 1,
|
|
96
|
+
cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
|
|
97
|
+
}, as: 'ul', ref: fileItemListRef, children: files?.map(file => {
|
|
98
|
+
return _createElement(FileItem, { ...file, key: file.id });
|
|
99
|
+
}) }));
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
if (files && files.length > 0 && !isFilesAdded.current)
|
|
102
|
+
isFilesAdded.current = true;
|
|
103
|
+
else if (files?.length === 0 && isFilesAdded.current) {
|
|
104
|
+
isFilesAdded.current = false;
|
|
105
|
+
inputRef.current?.focus();
|
|
106
|
+
}
|
|
107
|
+
if (hideFileInput && fileItemListRef.current) {
|
|
108
|
+
getFocusables(fileItemListRef)[0]?.focus();
|
|
109
|
+
}
|
|
110
|
+
}, [files]);
|
|
111
|
+
const renderElement = hideFileInput ? fileItemList : fileInput;
|
|
112
|
+
return (_jsxs(Grid, { container: { rowGap: hideFileInput ? undefined : 1 }, children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: !hideFileInput && disabled, status: status, additionalInfo: additionalInfo, children: renderElement })) : (renderElement), !hideFileInput && fileItemList] }));
|
|
99
113
|
});
|
|
100
114
|
export default withTestIds(FileInput, getFileInputTestIds);
|
|
101
115
|
//# sourceMappingURL=FileInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,OAAO,EACL,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,MAAM,aAAa,CAAC;AACrB,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,YAAY,CAAC,aAAa,CAAC,CAAC;AA8C5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;MAKpC,QAAQ;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACZ,OAAO,GAAG,CAAA;;;;UAIJ,YAAY;;;8BAGQ,cAAc;sBACtB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;wBAGtD,cAAc;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,KAAsC,EACtC,GAA0B;IAE1B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,cAAc,EACd,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEzC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgC,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;QACD;;;;;;;WAOG;QACH,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACpD,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,CAChB,MAAC,eAAe,eACd,+BACe,OAAO,CAAC,OAAO,KACxB,SAAS,EACb,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GACzD,EACF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,cAAc,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC1B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC,EACD,UAAU,EAAE,CAAC,CAA4B,EAAE,EAAE;oBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACpC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,MAAM,EAAE,CAAC,CAA4B,EAAE,EAAE;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;gBACnD,CAAC,aAEA,GAAG,IAAI,IAAI,EACZ,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,uBAEpB,CAAC,CAAC,uBAAuB,EAAE;gCAC1B,KAAC,qBAAqB,cACnB,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAC7C;6BACzB,CAAC,cAEG,EACN,GAAG,IAAI,IAAI,IACP,IACS,CACnB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC3B,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,YAE7B,SAAS,GACA,CACb,CAAC,CAAC,CAAC,CACF,SAAS,CACV,EACA,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,CAClB,KAAC,IAAI,mBACU,OAAO,CAAC,KAAK,EAC1B,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,gCAAgC,EAAE,iBAAiB;iBAC1D,EACD,EAAE,EAAC,IAAI,YAEN,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAChB,OAAO,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAC;gBAC9C,CAAC,CAAC,GACG,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTestIds,\n useTheme\n} from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { withTestIds } from '../../utils';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileItemProps[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n min-height: 4rem;\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n input[hidden] + ${StyledDropZone} {\n display: none;\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n \n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n \n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid container={{ rowGap: 1 }}>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n status={status}\n additionalInfo={additionalInfo}\n >\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n data-testid={testIds.files}\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n >\n {files.map(file => {\n return <FileItem {...file} key={file.id} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTestIds,\n useTheme\n} from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { getFocusables, withTestIds } from '../../utils';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileItemProps[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(\n ({\n dragOver,\n theme: {\n base: { spacing },\n components\n }\n }) => {\n return css`\n padding: calc(2 * ${spacing});\n height: ${components.input.height};\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n }\n);\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLElement | null>(null);\n\n // Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted\n const isFilesAdded = useRef(false);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n \n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n \n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n const fileItemList = (\n <Grid\n data-testid={testIds.files}\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n ref={fileItemListRef}\n >\n {files?.map(file => {\n return <FileItem {...file} key={file.id} />;\n })}\n </Grid>\n );\n\n useEffect(() => {\n if (files && files.length > 0 && !isFilesAdded.current) isFilesAdded.current = true;\n else if (files?.length === 0 && isFilesAdded.current) {\n isFilesAdded.current = false;\n inputRef.current?.focus();\n }\n\n if (hideFileInput && fileItemListRef.current) {\n getFocusables(fileItemListRef)[0]?.focus();\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n return (\n <Grid container={{ rowGap: hideFileInput ? undefined : 1 }}>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={!hideFileInput && disabled}\n status={status}\n additionalInfo={additionalInfo}\n >\n {renderElement}\n </FormField>\n ) : (\n renderElement\n )}\n {!hideFileInput && fileItemList}\n </Grid>\n );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
|
|
@@ -6,8 +6,6 @@ export interface FileItemProps extends BaseProps {
|
|
|
6
6
|
id: string;
|
|
7
7
|
/** Name of the file. */
|
|
8
8
|
name: string;
|
|
9
|
-
/** Url of the file. */
|
|
10
|
-
url: string;
|
|
11
9
|
/** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */
|
|
12
10
|
thumbnail?: FileVisualProps['thumbnail'];
|
|
13
11
|
/** File extension. Use 'url' for link */
|
|
@@ -16,9 +14,9 @@ export interface FileItemProps extends BaseProps {
|
|
|
16
14
|
onCancel?: (id: FileItemProps['id']) => void;
|
|
17
15
|
/** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
|
|
18
16
|
onEdit?: (id: FileItemProps['id']) => void;
|
|
19
|
-
/** When passed, will be called on click of the name. Passes file
|
|
17
|
+
/** When passed, will be called on click of the name. Passes file id as the parameter. */
|
|
20
18
|
onPreview?: (id: FileItemProps['id']) => void;
|
|
21
|
-
/** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file
|
|
19
|
+
/** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */
|
|
22
20
|
onDownload?: (id: FileItemProps['id']) => void;
|
|
23
21
|
/** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
|
|
24
22
|
onDelete?: (id: FileItemProps['id']) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAanE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,
|
|
1
|
+
{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAanE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,yFAAyF;IACzF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAqFD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAwJ7C,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -76,14 +76,13 @@ const StyledFileItem = styled.div(({ theme: { base: { palette, 'border-radius':
|
|
|
76
76
|
});
|
|
77
77
|
StyledFileItem.defaultProps = defaultThemeProp;
|
|
78
78
|
const FileItem = forwardRef(function FileItem(props, ref) {
|
|
79
|
-
const { id, name,
|
|
79
|
+
const { id, name, thumbnail, format, error, onCancel, onEdit, onPreview, onDownload, onDelete, progress, ...restProps } = props;
|
|
80
80
|
const [thumbnailError, setThumbnailError] = useState(false);
|
|
81
81
|
const [textTarget, setTextTarget] = useElement();
|
|
82
82
|
const [metaTarget, setMetaTarget] = useElement();
|
|
83
83
|
const { locale } = useConfiguration();
|
|
84
84
|
const t = useI18n();
|
|
85
85
|
const uploading = typeof progress === 'number' && progress < 100;
|
|
86
|
-
const text = name || url;
|
|
87
86
|
let metaMessage;
|
|
88
87
|
if (uploading) {
|
|
89
88
|
metaMessage = formatNumber(progress, {
|
|
@@ -123,7 +122,7 @@ const FileItem = forwardRef(function FileItem(props, ref) {
|
|
|
123
122
|
visual = _jsx(StyledErrorIcon, { name: 'warn-solid' });
|
|
124
123
|
}
|
|
125
124
|
else {
|
|
126
|
-
visual =
|
|
125
|
+
visual = (_jsx(FileVisual, { type: format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
|
|
127
126
|
setThumbnailError(true);
|
|
128
127
|
} }));
|
|
129
128
|
}
|
|
@@ -134,7 +133,7 @@ const FileItem = forwardRef(function FileItem(props, ref) {
|
|
|
134
133
|
gap: 1
|
|
135
134
|
}, ref: ref, children: [visual, onPreview && !(error || uploading) ? (_jsxs(Button, { ...restProps, as: StyledPreviewTitle, variant: 'link', ref: setTextTarget, onClick: () => {
|
|
136
135
|
onPreview(id);
|
|
137
|
-
}, "aria-label": t('preview_file', [
|
|
136
|
+
}, "aria-label": t('preview_file', [name]), children: [name, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: name })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${name}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name }) })), textTarget && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: name }))] }));
|
|
138
137
|
});
|
|
139
138
|
export default FileItem;
|
|
140
139
|
//# sourceMappingURL=FileItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { useI18n, useElement, useConfiguration } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n /** Unique id for item. */\n id: string;\n /** Name of the file. */\n name: string;\n /** Url of the file. */\n url: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: FileVisualProps['thumbnail'];\n /** File extension. Use 'url' for link */\n format?: string;\n /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n onCancel?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onEdit?: (id: FileItemProps['id']) => void;\n /** When passed, will be called on click of the name. Passes file url as the parameter. */\n onPreview?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file url as the parameter. */\n onDownload?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onDelete?: (id: FileItemProps['id']) => void;\n /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n progress?: number;\n /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n error?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n flex-shrink: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n return css`\n /* min width to show percentage in full */\n min-width: 4ch;\n margin-inline-start: auto;\n ${titleEllipsisStyle}\n ${error &&\n css`\n color: ${theme.base.palette.urgent};\n `}\n `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n return css`\n margin-inline-start: ${meta ? 'unset' : 'auto'};\n `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFileItem = styled.div(\n ({\n theme: {\n base: {\n palette,\n 'border-radius': borderRadius,\n spacing,\n 'hit-area': { compact }\n },\n components\n }\n }) => {\n return css`\n border-radius: calc(0.5 * ${borderRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n height: ${components.input.height};\n min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n > ${StyledProgressRing} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n\n > ${StyledFileVisual}, > ${StyledIconShape} {\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n width: ${components.input.height};\n flex-shrink: 0;\n }\n `;\n }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n props: PropsWithoutRef<FileItemProps>,\n ref: FileItemProps['ref']\n) {\n const {\n id,\n name,\n url,\n thumbnail,\n format,\n error,\n onCancel,\n onEdit,\n onPreview,\n onDownload,\n onDelete,\n progress,\n ...restProps\n } = props;\n\n const [thumbnailError, setThumbnailError] = useState(false);\n const [textTarget, setTextTarget] = useElement();\n const [metaTarget, setMetaTarget] = useElement();\n const { locale } = useConfiguration();\n const t = useI18n();\n\n const uploading = typeof progress === 'number' && progress < 100;\n\n const text = name || url;\n\n let metaMessage;\n\n if (uploading) {\n metaMessage = formatNumber(progress, {\n locale,\n options: {\n style: 'unit',\n unit: 'percent',\n maximumFractionDigits: 0\n }\n });\n } else if (error) {\n metaMessage = error;\n }\n\n const definedActions: Action[] = [\n { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n { onClick: onDownload, text: t('download'), icon: 'download' },\n { onClick: onDelete, text: t('delete'), icon: 'trash' }\n ]\n .filter(action => {\n return !!action.onClick;\n })\n .map(({ text: actiontext, icon, onClick }) => ({\n id: actiontext,\n text: actiontext,\n icon,\n onClick: () => {\n if (onClick) onClick(id);\n }\n }));\n\n let visual;\n\n if (uploading) {\n visual = <Progress variant='ring' placement='inline' value={progress} />;\n } else if (error) {\n visual = <StyledErrorIcon name='warn-solid' />;\n } else {\n visual = format && (\n <FileVisual\n type={format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format) ?? '')}\n thumbnail={thumbnailError ? undefined : thumbnail}\n onThumbnailError={() => {\n setThumbnailError(true);\n }}\n />\n );\n }\n\n return (\n <Flex\n as={StyledFileItem}\n container={{\n pad: [undefined, 0.5, undefined, undefined],\n alignItems: 'center',\n justify: 'start',\n gap: 1\n }}\n ref={ref}\n >\n {visual}\n\n {onPreview && !(error || uploading) ? (\n <Button\n {...restProps}\n as={StyledPreviewTitle}\n variant='link'\n ref={setTextTarget}\n onClick={() => {\n onPreview(id);\n }}\n aria-label={t('preview_file', [text])}\n >\n {text}\n {format === 'url' && <Icon name='open' />}\n </Button>\n ) : (\n <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n {text}\n </Text>\n )}\n {metaMessage && (\n <>\n <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n {metaMessage}\n </Text>\n\n {metaTarget && (\n <Tooltip target={metaTarget} describeTarget={false} smart>\n {metaMessage}\n </Tooltip>\n )}\n </>\n )}\n\n {(error || uploading) && onCancel && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Button\n label={t('cancel')}\n aria-label={`${t('cancel')} - ${text}`}\n variant='simple'\n compact\n icon\n onClick={() => onCancel(id)}\n >\n <Icon name='times' />\n </Button>\n </StyledActionsWrapper>\n )}\n\n {!(error || uploading) && !!definedActions.length && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Actions items={definedActions} compact iconOnly contextualLabel={name} />\n </StyledActionsWrapper>\n )}\n\n {textTarget && (\n <Tooltip target={textTarget} smart describeTarget={false}>\n {text}\n </Tooltip>\n )}\n </Flex>\n );\n});\n\nexport default FileItem;\n"]}
|
|
1
|
+
{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { useI18n, useElement, useConfiguration } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n /** Unique id for item. */\n id: string;\n /** Name of the file. */\n name: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: FileVisualProps['thumbnail'];\n /** File extension. Use 'url' for link */\n format?: string;\n /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n onCancel?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onEdit?: (id: FileItemProps['id']) => void;\n /** When passed, will be called on click of the name. Passes file id as the parameter. */\n onPreview?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */\n onDownload?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onDelete?: (id: FileItemProps['id']) => void;\n /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n progress?: number;\n /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n error?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n flex-shrink: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n return css`\n /* min width to show percentage in full */\n min-width: 4ch;\n margin-inline-start: auto;\n ${titleEllipsisStyle}\n ${error &&\n css`\n color: ${theme.base.palette.urgent};\n `}\n `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n return css`\n margin-inline-start: ${meta ? 'unset' : 'auto'};\n `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFileItem = styled.div(\n ({\n theme: {\n base: {\n palette,\n 'border-radius': borderRadius,\n spacing,\n 'hit-area': { compact }\n },\n components\n }\n }) => {\n return css`\n border-radius: calc(0.5 * ${borderRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n height: ${components.input.height};\n min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n > ${StyledProgressRing} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n\n > ${StyledFileVisual}, > ${StyledIconShape} {\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n width: ${components.input.height};\n flex-shrink: 0;\n }\n `;\n }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n props: PropsWithoutRef<FileItemProps>,\n ref: FileItemProps['ref']\n) {\n const {\n id,\n name,\n thumbnail,\n format,\n error,\n onCancel,\n onEdit,\n onPreview,\n onDownload,\n onDelete,\n progress,\n ...restProps\n } = props;\n\n const [thumbnailError, setThumbnailError] = useState(false);\n const [textTarget, setTextTarget] = useElement();\n const [metaTarget, setMetaTarget] = useElement();\n const { locale } = useConfiguration();\n const t = useI18n();\n const uploading = typeof progress === 'number' && progress < 100;\n\n let metaMessage;\n\n if (uploading) {\n metaMessage = formatNumber(progress, {\n locale,\n options: {\n style: 'unit',\n unit: 'percent',\n maximumFractionDigits: 0\n }\n });\n } else if (error) {\n metaMessage = error;\n }\n\n const definedActions: Action[] = [\n { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n { onClick: onDownload, text: t('download'), icon: 'download' },\n { onClick: onDelete, text: t('delete'), icon: 'trash' }\n ]\n .filter(action => {\n return !!action.onClick;\n })\n .map(({ text: actiontext, icon, onClick }) => ({\n id: actiontext,\n text: actiontext,\n icon,\n onClick: () => {\n if (onClick) onClick(id);\n }\n }));\n\n let visual;\n\n if (uploading) {\n visual = <Progress variant='ring' placement='inline' value={progress} />;\n } else if (error) {\n visual = <StyledErrorIcon name='warn-solid' />;\n } else {\n visual = (\n <FileVisual\n type={\n format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? '')\n }\n thumbnail={thumbnailError ? undefined : thumbnail}\n onThumbnailError={() => {\n setThumbnailError(true);\n }}\n />\n );\n }\n\n return (\n <Flex\n as={StyledFileItem}\n container={{\n pad: [undefined, 0.5, undefined, undefined],\n alignItems: 'center',\n justify: 'start',\n gap: 1\n }}\n ref={ref}\n >\n {visual}\n\n {onPreview && !(error || uploading) ? (\n <Button\n {...restProps}\n as={StyledPreviewTitle}\n variant='link'\n ref={setTextTarget}\n onClick={() => {\n onPreview(id);\n }}\n aria-label={t('preview_file', [name])}\n >\n {name}\n {format === 'url' && <Icon name='open' />}\n </Button>\n ) : (\n <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n {name}\n </Text>\n )}\n {metaMessage && (\n <>\n <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n {metaMessage}\n </Text>\n\n {metaTarget && (\n <Tooltip target={metaTarget} describeTarget={false} smart>\n {metaMessage}\n </Tooltip>\n )}\n </>\n )}\n\n {(error || uploading) && onCancel && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Button\n label={t('cancel')}\n aria-label={`${t('cancel')} - ${name}`}\n variant='simple'\n compact\n icon\n onClick={() => onCancel(id)}\n >\n <Icon name='times' />\n </Button>\n </StyledActionsWrapper>\n )}\n\n {!(error || uploading) && !!definedActions.length && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Actions items={definedActions} compact iconOnly contextualLabel={name} />\n </StyledActionsWrapper>\n )}\n\n {textTarget && (\n <Tooltip target={textTarget} smart describeTarget={false}>\n {name}\n </Tooltip>\n )}\n </Flex>\n );\n});\n\nexport default FileItem;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"arrow-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-down';
|
|
5
|
-
export const Component = () => (_jsx("path", {
|
|
5
|
+
export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 3v13m6-6.067L9 16 3 9.933' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-down.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,
|
|
1
|
+
{"version":3,"file":"arrow-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,8BAA8B,GAChC,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-down';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 3v13m6-6.067L9 16 3 9.933'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-left.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"arrow-left.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-left';
|
|
5
|
-
export const Component = () => (_jsx("path", {
|
|
5
|
+
export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M15 9H2m6.067-6L2 9l6.067 6' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-left.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,
|
|
1
|
+
{"version":3,"file":"arrow-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6BAA6B,GAC/B,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-left';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M15 9H2m6.067-6L2 9l6.067 6'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-micro-down';
|
|
5
|
-
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: '
|
|
5
|
+
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M11.585 8h-5.17c-.31 0-.517.147-.362.265l2.585 2.625a.654.654 0 0 0 .62.059c.052-.03.104-.03.104-.06l2.585-2.624c.155-.118-.051-.265-.362-.265z' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-micro-down.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-micro-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC
|
|
1
|
+
{"version":3,"file":"arrow-micro-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,iJAAiJ,GACnJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-down';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M11.585 8h-5.17c-.31 0-.517.147-.362.265l2.585 2.625a.654.654 0 0 0 .62.059c.052-.03.104-.03.104-.06l2.585-2.624c.155-.118-.051-.265-.362-.265z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-micro-left';
|
|
5
|
-
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: '
|
|
5
|
+
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10 11.585v-5.17c0-.31-.147-.517-.265-.362L7.11 8.638a.654.654 0 0 0-.059.62c.03.052.03.104.06.104l2.624 2.585c.118.155.265-.051.265-.362z' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-micro-left.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-micro-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC
|
|
1
|
+
{"version":3,"file":"arrow-micro-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,4IAA4I,GAC9I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-left';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M10 11.585v-5.17c0-.31-.147-.517-.265-.362L7.11 8.638a.654.654 0 0 0-.059.62c.03.052.03.104.06.104l2.624 2.585c.118.155.265-.051.265-.362z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-micro-right';
|
|
5
|
-
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: '
|
|
5
|
+
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 6.415v5.17c0 .31.147.517.265.362L9.89 9.362a.654.654 0 0 0 .059-.62c-.03-.052-.03-.104-.06-.104L7.266 6.053C7.147 5.898 7 6.104 7 6.415z' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-micro-right.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-micro-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"arrow-micro-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6IAA6I,GAC/I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-right';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M7 6.415v5.17c0 .31.147.517.265.362L9.89 9.362a.654.654 0 0 0 .059-.62c-.03-.052-.03-.104-.06-.104L7.266 6.053C7.147 5.898 7 6.104 7 6.415z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-micro-up';
|
|
5
|
-
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: '
|
|
5
|
+
export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.415 11h5.17c.31 0 .517-.147.362-.265L9.362 8.11a.654.654 0 0 0-.62-.059c-.052.03-.104.03-.104.06l-2.585 2.624c-.155.118.051.265.362.265z' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-micro-up.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-micro-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"arrow-micro-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6IAA6I,GAC/I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-up';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M6.415 11h5.17c.31 0 .517-.147.362-.265L9.362 8.11a.654.654 0 0 0-.62-.059c-.052.03-.104.03-.104.06l-2.585 2.624c-.155.118.051.265.362.265z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-right.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,gBAAgB,CAAC;AAElC,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"arrow-right.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,gBAAgB,CAAC;AAElC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-right';
|
|
5
|
-
export const Component = () => (_jsx("path", {
|
|
5
|
+
export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2 9h13M8.933 3 15 9l-6.067 6' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-right.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,
|
|
1
|
+
{"version":3,"file":"arrow-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+BAA+B,GACjC,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-right';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M2 9h13M8.933 3 15 9l-6.067 6'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-up.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,aAAa,CAAC;AAE/B,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"arrow-up.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,aAAa,CAAC;AAE/B,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'arrow-up';
|
|
5
|
-
export const Component = () => (_jsx("path", {
|
|
5
|
+
export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 16V3M3 9.067 9 3l6 6.067' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=arrow-up.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,
|
|
1
|
+
{"version":3,"file":"arrow-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6BAA6B,GAC/B,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-up';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 16V3M3 9.067 9 3l6 6.067'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"caret-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"caret-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'streamline';
|
|
4
4
|
export const name = 'caret-down';
|
|
5
|
-
export const Component = () => (_jsx("path", {
|
|
5
|
+
export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'm14 7-4.764 4.9A.333.333 0 0 1 9 12a.326.326 0 0 1-.236-.1L4 7' }));
|
|
6
6
|
export const viewBox = '0 0 18 18';
|
|
7
7
|
//# sourceMappingURL=caret-down.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"caret-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,
|
|
1
|
+
{"version":3,"file":"caret-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,gEAAgE,GAClE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'caret-down';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='m14 7-4.764 4.9A.333.333 0 0 1 9 12a.326.326 0 0 1-.236-.1L4 7'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
|