@pega/cosmos-react-core 3.3.0 → 3.3.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AASzF,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,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,mBAAmB,EAAE,CAAC;IAC9B;;;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,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,qNAkB3B,CAAC;AAYF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwHnE,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,aAKtB,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useCallback, useState
|
|
2
|
+
import { forwardRef, useCallback, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { hideVisually } from 'polished';
|
|
5
5
|
import { useOverride, useConsolidatedRef, useI18n, useUID, useDirection, useTheme } from '../../hooks';
|
|
@@ -56,7 +56,6 @@ const BaseFileInput = forwardRef((props, ref) => {
|
|
|
56
56
|
const { base: { 'content-width': { md } } } = useTheme();
|
|
57
57
|
const icon = _jsx(Icon, { name: 'paper-clip' });
|
|
58
58
|
const inputRef = useConsolidatedRef(ref);
|
|
59
|
-
const containerRef = useRef(null);
|
|
60
59
|
const onChange = useCallback((e) => {
|
|
61
60
|
if (e.target.files) {
|
|
62
61
|
onFilesAdded?.(Array.from(e.target.files));
|
|
@@ -87,7 +86,7 @@ const BaseFileInput = forwardRef((props, ref) => {
|
|
|
87
86
|
}, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
|
|
88
87
|
_jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
|
|
89
88
|
]), "\u00A0"] }), rtl && icon] })] }));
|
|
90
|
-
return (_jsxs(Grid, {
|
|
89
|
+
return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { container: {
|
|
91
90
|
gap: 1,
|
|
92
91
|
cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
|
|
93
92
|
}, as: 'ul', children: files.map(({ name, ...file }, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport {\n useOverride,\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTheme\n} from '../../hooks';\nimport FormControl, { 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';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp {\n /**\n * Called when files are added either via the input or drop zone.\n */\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?: FileUploadItemProps[];\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 /** 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 BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n const uid = useUID();\n const {\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 ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\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 {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\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 ref={containerRef} container={{ rowGap: 1 }}>\n {label ? (\n <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,WAAW,EAGX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACT,MAAM,aAAa,CAAC;AACrB,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAC/D,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;AAE3B,OAAO,cAAuC,MAAM,kBAAkB,CAAC;AAEvE,YAAY,CAAC,aAAa,CAAC,CAAC;AAyC5B,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,aAAa,GAAqD,UAAU,CAChF,CAAC,KAAsC,EAAE,GAA0B,EAAE,EAAE;IACrE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,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,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,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,mBACM,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,GAClB,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,OAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,YACxE,SAAS,GACA,CACb,CAAC,CAAC,CAAC,CACF,SAAS,CACV,EACA,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,CAClB,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,gCAAgC,EAAE,iBAAiB;iBAC1D,EACD,EAAE,EAAC,IAAI,YAEN,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE;oBACtC,oDAAoD;oBACpD,OAAO,KAAC,cAAc,IAAa,IAAI,EAAE,IAAI,KAAM,IAAI,IAA3B,KAAK,CAA0B,CAAC;gBAC9D,CAAC,CAAC,GACG,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAyB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,QAAQ,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAC1C,IAAI,QAAQ;QAAE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IAEvD,OAAO,KAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport {\n useOverride,\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTheme\n} from '../../hooks';\nimport FormControl, { 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';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp {\n /**\n * Called when files are added either via the input or drop zone.\n */\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?: FileUploadItemProps[];\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 /** 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 BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n const uid = useUID();\n const {\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 ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\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 {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\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 {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|