@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12
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/_internal/{8fcceef3.js → 0420e67b.js} +13 -14
- package/_internal/{8fcceef3.js.map → 0420e67b.js.map} +1 -1
- package/_internal/{7b214f74.js → 0a490b07.js} +29 -24
- package/_internal/{7b214f74.js.map → 0a490b07.js.map} +1 -1
- package/_internal/{4d92e13b.js → 0be1006e.js} +25 -25
- package/_internal/{4d92e13b.js.map → 0be1006e.js.map} +1 -1
- package/_internal/{dd0a245d.js → 0d1a078c.js} +44 -42
- package/_internal/{dd0a245d.js.map → 0d1a078c.js.map} +1 -1
- package/_internal/{1eab656b.js → 15eab19b.js} +25 -25
- package/_internal/{1eab656b.js.map → 15eab19b.js.map} +1 -1
- package/_internal/{87bada02.js → 179a84d1.js} +64 -67
- package/_internal/{87bada02.js.map → 179a84d1.js.map} +1 -1
- package/_internal/{4c5a7b63.js → 193521fa.js} +11 -12
- package/_internal/{4c5a7b63.js.map → 193521fa.js.map} +1 -1
- package/_internal/{f57d4eb8.js → 1a90ea3d.js} +15 -17
- package/_internal/{f57d4eb8.js.map → 1a90ea3d.js.map} +1 -1
- package/_internal/1deba7d7.js +224 -0
- package/_internal/{2d6bde7d.js.map → 1deba7d7.js.map} +1 -1
- package/_internal/{2938a251.js → 1ea72630.js} +16 -17
- package/_internal/{2938a251.js.map → 1ea72630.js.map} +1 -1
- package/_internal/21b83d16.js +137 -0
- package/_internal/{5ba8fae8.js.map → 21b83d16.js.map} +1 -1
- package/_internal/297bed8f.js +457 -0
- package/_internal/{e53b5a39.js.map → 297bed8f.js.map} +1 -1
- package/_internal/{432c85a7.js → 2c2b6a89.js} +9 -7
- package/_internal/{432c85a7.js.map → 2c2b6a89.js.map} +1 -1
- package/_internal/{bba7d4c4.js → 2f1716fa.js} +75 -63
- package/_internal/{bba7d4c4.js.map → 2f1716fa.js.map} +1 -1
- package/_internal/{2c7942af.js → 2f6c7f84.js} +16 -21
- package/_internal/{2c7942af.js.map → 2f6c7f84.js.map} +1 -1
- package/_internal/{64046d7a.js → 329b5f12.js} +10 -12
- package/_internal/{64046d7a.js.map → 329b5f12.js.map} +1 -1
- package/_internal/332e9844.js +2 -0
- package/_internal/332e9844.js.map +1 -0
- package/_internal/{85d992d2.js → 34c59f5b.js} +101 -98
- package/_internal/{85d992d2.js.map → 34c59f5b.js.map} +1 -1
- package/_internal/{30f4c83c.js → 370bdaed.js} +7 -5
- package/_internal/{30f4c83c.js.map → 370bdaed.js.map} +1 -1
- package/_internal/{7c4f4643.js → 37b007a4.js} +2 -2
- package/_internal/{7c4f4643.js.map → 37b007a4.js.map} +1 -1
- package/_internal/{07e0bd90.js → 3a4e4636.js} +51 -36
- package/_internal/{07e0bd90.js.map → 3a4e4636.js.map} +1 -1
- package/_internal/{3683d267.js → 3e653144.js} +8 -11
- package/_internal/{3683d267.js.map → 3e653144.js.map} +1 -1
- package/_internal/{c43d098b.js → 3f86608e.js} +5 -2
- package/_internal/{c43d098b.js.map → 3f86608e.js.map} +1 -1
- package/_internal/{b3bfbe72.js → 478b5c92.js} +2 -2
- package/_internal/{b3bfbe72.js.map → 478b5c92.js.map} +1 -1
- package/_internal/4962be5b.js +121 -0
- package/_internal/{70cf341b.js.map → 4962be5b.js.map} +1 -1
- package/_internal/{407735b4.js → 4cd870a5.js} +2 -2
- package/_internal/{407735b4.js.map → 4cd870a5.js.map} +1 -1
- package/_internal/{e4613195.js → 501f2f9f.js} +8 -9
- package/_internal/{e4613195.js.map → 501f2f9f.js.map} +1 -1
- package/_internal/5e7b90e2.js +2 -0
- package/_internal/5e7b90e2.js.map +1 -0
- package/_internal/{18334f0d.js → 5ec059fe.js} +48 -43
- package/_internal/{18334f0d.js.map → 5ec059fe.js.map} +1 -1
- package/_internal/{fc47f2da.js → 5f8f9454.js} +10 -12
- package/_internal/{fc47f2da.js.map → 5f8f9454.js.map} +1 -1
- package/_internal/{3f3de25e.js → 5fe09341.js} +3 -3
- package/_internal/{3f3de25e.js.map → 5fe09341.js.map} +1 -1
- package/_internal/{714809cc.js → 628468c4.js} +47 -46
- package/_internal/{714809cc.js.map → 628468c4.js.map} +1 -1
- package/_internal/{d3321a86.js → 6589b796.js} +2 -12
- package/_internal/{d3321a86.js.map → 6589b796.js.map} +1 -1
- package/_internal/{2368cb68.js → 65f91970.js} +43 -43
- package/_internal/{2368cb68.js.map → 65f91970.js.map} +1 -1
- package/_internal/66f691d3.js +74 -0
- package/_internal/{1921f348.js.map → 66f691d3.js.map} +1 -1
- package/_internal/{bdd41804.js → 68c10f98.js} +50 -41
- package/_internal/{bdd41804.js.map → 68c10f98.js.map} +1 -1
- package/_internal/{9cfa3e10.js → 690ca33e.js} +36 -35
- package/_internal/{9cfa3e10.js.map → 690ca33e.js.map} +1 -1
- package/_internal/6ca04271.js +108 -0
- package/_internal/{a67f26a8.js.map → 6ca04271.js.map} +1 -1
- package/_internal/{cdc3efab.js → 6da19518.js} +24 -32
- package/_internal/{cdc3efab.js.map → 6da19518.js.map} +1 -1
- package/_internal/{bcce6ceb.js → 7093ba23.js} +6 -4
- package/_internal/{bcce6ceb.js.map → 7093ba23.js.map} +1 -1
- package/_internal/{bc4cb4c0.js → 74a4a214.js} +29 -33
- package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map} +1 -1
- package/_internal/{95a2e851.js → 76be70dd.js} +3 -3
- package/_internal/{95a2e851.js.map → 76be70dd.js.map} +1 -1
- package/_internal/{60f8e509.js → 7f54e947.js} +114 -101
- package/_internal/{60f8e509.js.map → 7f54e947.js.map} +1 -1
- package/_internal/{72407886.js → 84dfe68f.js} +50 -44
- package/_internal/{72407886.js.map → 84dfe68f.js.map} +1 -1
- package/_internal/{e2440593.js → 85e3a5ca.js} +32 -35
- package/_internal/{e2440593.js.map → 85e3a5ca.js.map} +1 -1
- package/_internal/{742d4906.js → 86aa4aa4.js} +60 -54
- package/_internal/{742d4906.js.map → 86aa4aa4.js.map} +1 -1
- package/_internal/{4e1dde79.js → 8ab42752.js} +25 -26
- package/_internal/{4e1dde79.js.map → 8ab42752.js.map} +1 -1
- package/_internal/{0f4b35b2.js → 95cfd814.js} +14 -20
- package/_internal/{0f4b35b2.js.map → 95cfd814.js.map} +1 -1
- package/_internal/{d6b3a3c0.js → 9a4dfad0.js} +48 -39
- package/_internal/{d6b3a3c0.js.map → 9a4dfad0.js.map} +1 -1
- package/_internal/{80e5c950.js → 9c9df5f2.js} +19 -19
- package/_internal/{80e5c950.js.map → 9c9df5f2.js.map} +1 -1
- package/_internal/{21aeb1c7.js → 9d1336a1.js} +6 -6
- package/_internal/{21aeb1c7.js.map → 9d1336a1.js.map} +1 -1
- package/_internal/{ee64ab0d.js → 9fdc715b.js} +37 -34
- package/_internal/{ee64ab0d.js.map → 9fdc715b.js.map} +1 -1
- package/_internal/a003602b.js +116 -0
- package/_internal/{32698205.js.map → a003602b.js.map} +1 -1
- package/_internal/{baa0a23b.js → a34639bd.js} +31 -29
- package/_internal/{baa0a23b.js.map → a34639bd.js.map} +1 -1
- package/_internal/{cb036703.js → a84f4981.js} +35 -26
- package/_internal/{cb036703.js.map → a84f4981.js.map} +1 -1
- package/_internal/{9210e2f3.js → b0a7a999.js} +10 -12
- package/_internal/{9210e2f3.js.map → b0a7a999.js.map} +1 -1
- package/_internal/{3646abc3.js → b0b2e33d.js} +117 -104
- package/_internal/{3646abc3.js.map → b0b2e33d.js.map} +1 -1
- package/_internal/{1aaa0341.js → b1af5979.js} +168 -160
- package/_internal/{1aaa0341.js.map → b1af5979.js.map} +1 -1
- package/_internal/{21cf275f.js → b477da26.js} +63 -57
- package/_internal/{21cf275f.js.map → b477da26.js.map} +1 -1
- package/_internal/{60923026.js → b8667090.js} +2 -2
- package/_internal/{60923026.js.map → b8667090.js.map} +1 -1
- package/_internal/{1e4b7ad5.js → bae266a9.js} +19 -18
- package/_internal/{1e4b7ad5.js.map → bae266a9.js.map} +1 -1
- package/_internal/{9d8130ae.js → be6da9b0.js} +69 -74
- package/_internal/{9d8130ae.js.map → be6da9b0.js.map} +1 -1
- package/_internal/{9452daf7.js → c0414b89.js} +10 -12
- package/_internal/{9452daf7.js.map → c0414b89.js.map} +1 -1
- package/_internal/{e566d502.js → c2388b10.js} +21 -17
- package/_internal/{e566d502.js.map → c2388b10.js.map} +1 -1
- package/_internal/{9cf0d217.js → c459a04d.js} +55 -54
- package/_internal/{9cf0d217.js.map → c459a04d.js.map} +1 -1
- package/_internal/c6ca7494.js +2 -0
- package/_internal/c6ca7494.js.map +1 -0
- package/_internal/{01bc8fcf.js → cdddaed8.js} +20 -18
- package/_internal/{01bc8fcf.js.map → cdddaed8.js.map} +1 -1
- package/_internal/{0361b7fb.js → d45e3f16.js} +2 -2
- package/_internal/{0361b7fb.js.map → d45e3f16.js.map} +1 -1
- package/_internal/{d66c4375.js → d5f316cb.js} +2 -2
- package/_internal/{d66c4375.js.map → d5f316cb.js.map} +1 -1
- package/_internal/{0a31e895.js → db4fdc7b.js} +63 -57
- package/_internal/{0a31e895.js.map → db4fdc7b.js.map} +1 -1
- package/_internal/dbe0cf24.js +75 -0
- package/_internal/{803945f7.js.map → dbe0cf24.js.map} +1 -1
- package/_internal/{4ceaf17c.js → e2afb13f.js} +2 -2
- package/_internal/{4ceaf17c.js.map → e2afb13f.js.map} +1 -1
- package/_internal/{b925072d.js → e52f0d3f.js} +37 -34
- package/_internal/{b925072d.js.map → e52f0d3f.js.map} +1 -1
- package/_internal/{aa8c5d9b.js → e6dd117e.js} +2 -2
- package/_internal/{aa8c5d9b.js.map → e6dd117e.js.map} +1 -1
- package/_internal/{077b7bef.js → ea04260d.js} +6 -6
- package/_internal/{077b7bef.js.map → ea04260d.js.map} +1 -1
- package/_internal/{77eb8ef3.js → eaa8b1d8.js} +39 -38
- package/_internal/{77eb8ef3.js.map → eaa8b1d8.js.map} +1 -1
- package/_internal/{aafcf80e.js → edab29ce.js} +61 -65
- package/_internal/{aafcf80e.js.map → edab29ce.js.map} +1 -1
- package/_internal/{38b3ecf3.js → f0900583.js} +54 -45
- package/_internal/{38b3ecf3.js.map → f0900583.js.map} +1 -1
- package/_internal/{881714a1.js → f23cdf84.js} +45 -51
- package/_internal/{881714a1.js.map → f23cdf84.js.map} +1 -1
- package/_internal/f52e979e.js +3 -0
- package/_internal/f52e979e.js.map +1 -0
- package/_internal/{1ce667fb.js → f5508d3d.js} +53 -51
- package/_internal/{1ce667fb.js.map → f5508d3d.js.map} +1 -1
- package/_internal/{43262bfe.js → f93fe83e.js} +11 -13
- package/_internal/{43262bfe.js.map → f93fe83e.js.map} +1 -1
- package/index.js +63 -63
- package/package.json +3 -11
- package/utils/index.js +3 -3
- package/_internal/1921f348.js +0 -72
- package/_internal/286fc728.js +0 -2
- package/_internal/286fc728.js.map +0 -1
- package/_internal/2d6bde7d.js +0 -209
- package/_internal/32698205.js +0 -107
- package/_internal/5ba8fae8.js +0 -120
- package/_internal/70cf341b.js +0 -117
- package/_internal/803945f7.js +0 -65
- package/_internal/a67f26a8.js +0 -98
- package/_internal/ac3bc511.js +0 -2
- package/_internal/ac3bc511.js.map +0 -1
- package/_internal/cc995526.js +0 -2
- package/_internal/cc995526.js.map +0 -1
- package/_internal/e2122a37.js +0 -3
- package/_internal/e2122a37.js.map +0 -1
- package/_internal/e53b5a39.js +0 -407
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ee64ab0d.js","sources":["../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n square: 'square',\n rounded: 'rounded',\n circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Extend native HTML input props with specialized `onChange` providing the a `File` array.\n */\ninterface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {\n onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Icon (SVG path). */\n icon?: string;\n /** Disabled state */\n isDisabled?: boolean;\n /** Label text. */\n label?: string;\n /** Size variant. */\n size?: UploaderSize;\n /** Variant. */\n variant?: UploaderVariant;\n /** On click callback. */\n onClick?: MouseEventHandler;\n /** Handle file selection with a native input file. */\n fileInputProps?: FileInputProps;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UploaderProps> = {\n aspectRatio: AspectRatio.horizontal,\n size: Size.xl,\n variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Uploader = forwardRef<UploaderProps>((props, ref) => {\n const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n aspectRatio = DEFAULT_PROPS.aspectRatio,\n className,\n label,\n icon,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n fileInputProps,\n onClick,\n ...forwardedProps\n } = otherProps;\n // Adjust to square aspect ratio when using circle variants.\n const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n const handleClick: React.MouseEventHandler = React.useCallback(\n (evt) => {\n if (isAnyDisabled) {\n evt.preventDefault();\n } else {\n onClick?.(evt);\n }\n },\n [isAnyDisabled, onClick],\n );\n\n const generatedInputId = useId();\n const inputId = fileInputProps?.id || generatedInputId;\n const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);\n const wrapper = fileInputProps\n ? ({ Component: 'label', props: { htmlFor: inputId } } as const)\n : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);\n\n const onChange = React.useMemo(() => {\n if (isAnyDisabled || !fileInputProps?.onChange) return undefined;\n return (evt: React.ChangeEvent<HTMLInputElement>) => {\n const fileList = evt.target.files;\n const files = fileList ? Array.from(fileList) : [];\n fileInputProps.onChange(files, evt);\n };\n }, [isAnyDisabled, fileInputProps]);\n\n return (\n <wrapper.Component\n ref={ref as any}\n {...wrapper.props}\n {...forwardedProps}\n onClick={handleClick}\n className={classNames(\n className,\n handleBasicClasses({\n aspectRatio: adjustedAspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isDragHovering,\n isDisabled: isAnyDisabled,\n }),\n )}\n >\n <span className={`${CLASSNAME}__background`} />\n\n <span className={`${CLASSNAME}__wrapper`}>\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}\n\n {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n </span>\n\n {fileInputProps && (\n <input\n type=\"file\"\n id={inputId}\n className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}\n {...disabledStateProps}\n {...fileInputProps}\n readOnly={isAnyDisabled}\n onChange={onChange}\n onDragEnter={setDragHovering}\n onDragLeave={unsetDragHovering}\n onDrop={unsetDragHovering}\n />\n )}\n </wrapper.Component>\n );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","variant","Uploader","forwardRef","props","ref","disabledStateProps","otherProps","isAnyDisabled","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","label","icon","theme","fileInputProps","onClick","forwardedProps","adjustedAspectRatio","handleClick","React","useCallback","evt","preventDefault","generatedInputId","useId","inputId","id","isDragHovering","unsetDragHovering","setDragHovering","useBooleanState","wrapper","Component","htmlFor","type","onChange","useMemo","undefined","fileList","target","files","Array","from","createElement","_extends","classNames","handleBasicClasses","prefix","isDisabled","Icon","s","VISUALLY_HIDDEN","readOnly","onDragEnter","onDragLeave","onDrop","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"9fdc715b.js","sources":["../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n square: 'square',\n rounded: 'rounded',\n circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Extend native HTML input props with specialized `onChange` providing the a `File` array.\n */\ninterface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {\n onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Icon (SVG path). */\n icon?: string;\n /** Disabled state */\n isDisabled?: boolean;\n /** Label text. */\n label?: string;\n /** Size variant. */\n size?: UploaderSize;\n /** Variant. */\n variant?: UploaderVariant;\n /** On click callback. */\n onClick?: MouseEventHandler;\n /** Handle file selection with a native input file. */\n fileInputProps?: FileInputProps;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UploaderProps> = {\n aspectRatio: AspectRatio.horizontal,\n size: Size.xl,\n variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Uploader = forwardRef<UploaderProps>((props, ref) => {\n const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n aspectRatio = DEFAULT_PROPS.aspectRatio,\n className,\n label,\n icon,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n fileInputProps,\n onClick,\n ...forwardedProps\n } = otherProps;\n // Adjust to square aspect ratio when using circle variants.\n const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n const handleClick: React.MouseEventHandler = React.useCallback(\n (evt) => {\n if (isAnyDisabled) {\n evt.preventDefault();\n } else {\n onClick?.(evt);\n }\n },\n [isAnyDisabled, onClick],\n );\n\n const generatedInputId = useId();\n const inputId = fileInputProps?.id || generatedInputId;\n const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);\n const wrapper = fileInputProps\n ? ({ Component: 'label', props: { htmlFor: inputId } } as const)\n : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);\n\n const onChange = React.useMemo(() => {\n if (isAnyDisabled || !fileInputProps?.onChange) return undefined;\n return (evt: React.ChangeEvent<HTMLInputElement>) => {\n const fileList = evt.target.files;\n const files = fileList ? Array.from(fileList) : [];\n fileInputProps.onChange(files, evt);\n };\n }, [isAnyDisabled, fileInputProps]);\n\n return (\n <wrapper.Component\n ref={ref as any}\n {...wrapper.props}\n {...forwardedProps}\n onClick={handleClick}\n className={classNames(\n className,\n handleBasicClasses({\n aspectRatio: adjustedAspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isDragHovering,\n isDisabled: isAnyDisabled,\n }),\n )}\n >\n <span className={`${CLASSNAME}__background`} />\n\n <span className={`${CLASSNAME}__wrapper`}>\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}\n\n {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n </span>\n\n {fileInputProps && (\n <input\n type=\"file\"\n id={inputId}\n className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}\n {...disabledStateProps}\n {...fileInputProps}\n readOnly={isAnyDisabled}\n onChange={onChange}\n onDragEnter={setDragHovering}\n onDragLeave={unsetDragHovering}\n onDrop={unsetDragHovering}\n />\n )}\n </wrapper.Component>\n );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","variant","Uploader","forwardRef","props","ref","disabledStateProps","otherProps","isAnyDisabled","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","label","icon","theme","fileInputProps","onClick","forwardedProps","adjustedAspectRatio","handleClick","React","useCallback","evt","preventDefault","generatedInputId","useId","inputId","id","isDragHovering","unsetDragHovering","setDragHovering","useBooleanState","wrapper","Component","htmlFor","type","onChange","useMemo","undefined","fileList","target","files","Array","from","_jsxs","classNames","handleBasicClasses","prefix","isDisabled","children","_jsx","Icon","s","VISUALLY_HIDDEN","readOnly","onDragEnter","onDragLeave","onDrop","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { m as getRootClassName, c as Size, n as forwardRef, b as Theme, l as classNames, i as AspectRatio, j as ColorPalette, k as ColorVariant } from './6589b796.js';
|
|
2
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
|
+
import { u as useTheme } from './3181f000.js';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
import { Link } from './66f691d3.js';
|
|
6
|
+
import { T as Thumbnail } from './628468c4.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Component display name.
|
|
10
|
+
*/
|
|
11
|
+
const COMPONENT_NAME = 'LinkPreview';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Component default class name and class prefix.
|
|
15
|
+
*/
|
|
16
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Component default props.
|
|
20
|
+
*/
|
|
21
|
+
const DEFAULT_PROPS = {
|
|
22
|
+
size: Size.regular,
|
|
23
|
+
titleHeading: 'h2'
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* LinkPreview component.
|
|
28
|
+
*
|
|
29
|
+
* @param props Component props.
|
|
30
|
+
* @param ref Component ref.
|
|
31
|
+
* @return React element.
|
|
32
|
+
*/
|
|
33
|
+
const LinkPreview = forwardRef((props, ref) => {
|
|
34
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
35
|
+
const {
|
|
36
|
+
className,
|
|
37
|
+
description,
|
|
38
|
+
link,
|
|
39
|
+
linkAs,
|
|
40
|
+
linkProps,
|
|
41
|
+
size = DEFAULT_PROPS.size,
|
|
42
|
+
theme = defaultTheme,
|
|
43
|
+
thumbnailProps,
|
|
44
|
+
title,
|
|
45
|
+
titleHeading = DEFAULT_PROPS.titleHeading,
|
|
46
|
+
...forwardedProps
|
|
47
|
+
} = props;
|
|
48
|
+
// Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
|
|
49
|
+
const TitleHeading = titleHeading;
|
|
50
|
+
return /*#__PURE__*/jsx("article", {
|
|
51
|
+
ref: ref,
|
|
52
|
+
...forwardedProps,
|
|
53
|
+
className: classNames(className, handleBasicClasses({
|
|
54
|
+
prefix: CLASSNAME,
|
|
55
|
+
size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
|
|
56
|
+
theme
|
|
57
|
+
})),
|
|
58
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
59
|
+
className: `${CLASSNAME}__wrapper`,
|
|
60
|
+
children: [thumbnailProps && /*#__PURE__*/jsx("div", {
|
|
61
|
+
className: `${CLASSNAME}__thumbnail`,
|
|
62
|
+
children: /*#__PURE__*/jsx(Thumbnail, {
|
|
63
|
+
...thumbnailProps,
|
|
64
|
+
linkAs: linkAs,
|
|
65
|
+
linkProps: {
|
|
66
|
+
...linkProps,
|
|
67
|
+
href: link,
|
|
68
|
+
target: '_blank',
|
|
69
|
+
// Avoid redundant links in focus order
|
|
70
|
+
tabIndex: -1
|
|
71
|
+
},
|
|
72
|
+
aspectRatio: AspectRatio.free,
|
|
73
|
+
fillHeight: true
|
|
74
|
+
})
|
|
75
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
76
|
+
className: `${CLASSNAME}__container`,
|
|
77
|
+
children: [title && /*#__PURE__*/jsx(TitleHeading, {
|
|
78
|
+
className: `${CLASSNAME}__title`,
|
|
79
|
+
children: /*#__PURE__*/jsx(Link, {
|
|
80
|
+
...linkProps,
|
|
81
|
+
linkAs: linkAs,
|
|
82
|
+
target: "_blank",
|
|
83
|
+
href: link,
|
|
84
|
+
color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
|
|
85
|
+
colorVariant: ColorVariant.N,
|
|
86
|
+
children: title
|
|
87
|
+
})
|
|
88
|
+
}), description && /*#__PURE__*/jsx("p", {
|
|
89
|
+
className: `${CLASSNAME}__description`,
|
|
90
|
+
children: description
|
|
91
|
+
}), /*#__PURE__*/jsx("div", {
|
|
92
|
+
className: `${CLASSNAME}__link`,
|
|
93
|
+
children: /*#__PURE__*/jsx(Link, {
|
|
94
|
+
...linkProps,
|
|
95
|
+
linkAs: linkAs,
|
|
96
|
+
className: classNames(`${CLASSNAME}__link`, linkProps?.className),
|
|
97
|
+
target: "_blank",
|
|
98
|
+
href: link,
|
|
99
|
+
color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
|
|
100
|
+
colorVariant: ColorVariant.N
|
|
101
|
+
// Avoid redundant links in focus order
|
|
102
|
+
,
|
|
103
|
+
tabIndex: title ? '-1' : undefined,
|
|
104
|
+
children: link
|
|
105
|
+
})
|
|
106
|
+
})]
|
|
107
|
+
})]
|
|
108
|
+
})
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
LinkPreview.displayName = COMPONENT_NAME;
|
|
112
|
+
LinkPreview.className = CLASSNAME;
|
|
113
|
+
LinkPreview.defaultProps = DEFAULT_PROPS;
|
|
114
|
+
|
|
115
|
+
export { LinkPreview };
|
|
116
|
+
//# sourceMappingURL=a003602b.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"a003602b.js","sources":["../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport {\n AspectRatio,\n ColorPalette,\n ColorVariant,\n Link,\n LinkProps,\n Size,\n Theme,\n Thumbnail,\n ThumbnailProps,\n} from '@lumx/react';\n\nimport { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkPreviewProps extends GenericProps, HasTheme {\n /** Description. */\n description?: string;\n /** Link URL. */\n link: string;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Props to pass to the link (minus those already set by the LinkPreview props). */\n linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;\n /** Size variant. */\n size?: Extract<Size, 'regular' | 'big'>;\n /** Thumbnail for the link preview. */\n thumbnailProps?: ThumbnailProps;\n /** Title. */\n title?: string;\n /** Customize the title heading tag. */\n titleHeading?: HeadingElement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'LinkPreview';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {\n size: Size.regular,\n titleHeading: 'h2',\n} as const;\n\n/**\n * LinkPreview component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n className,\n description,\n link,\n linkAs,\n linkProps,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n thumbnailProps,\n title,\n titleHeading = DEFAULT_PROPS.titleHeading,\n ...forwardedProps\n } = props;\n // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).\n const TitleHeading = titleHeading as HeadingElement;\n\n return (\n <article\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n size: size === Size.big && thumbnailProps ? Size.big : Size.regular,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n {thumbnailProps && (\n <div className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail\n {...thumbnailProps}\n linkAs={linkAs}\n linkProps={{\n ...linkProps,\n href: link,\n target: '_blank',\n // Avoid redundant links in focus order\n tabIndex: -1,\n }}\n aspectRatio={AspectRatio.free}\n fillHeight\n />\n </div>\n )}\n\n <div className={`${CLASSNAME}__container`}>\n {title && (\n <TitleHeading className={`${CLASSNAME}__title`}>\n <Link\n {...linkProps}\n linkAs={linkAs}\n target=\"_blank\"\n href={link}\n color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}\n colorVariant={ColorVariant.N}\n >\n {title}\n </Link>\n </TitleHeading>\n )}\n\n {description && <p className={`${CLASSNAME}__description`}>{description}</p>}\n\n <div className={`${CLASSNAME}__link`}>\n <Link\n {...linkProps}\n linkAs={linkAs}\n className={classNames(`${CLASSNAME}__link`, linkProps?.className)}\n target=\"_blank\"\n href={link}\n color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}\n colorVariant={ColorVariant.N}\n // Avoid redundant links in focus order\n tabIndex={title ? '-1' : undefined}\n >\n {link}\n </Link>\n </div>\n </div>\n </div>\n </article>\n );\n});\n\nLinkPreview.displayName = COMPONENT_NAME;\nLinkPreview.className = CLASSNAME;\nLinkPreview.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","titleHeading","LinkPreview","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","description","link","linkAs","linkProps","theme","thumbnailProps","title","forwardedProps","TitleHeading","_jsx","classNames","handleBasicClasses","prefix","big","children","_jsxs","Thumbnail","href","target","tabIndex","aspectRatio","AspectRatio","free","fillHeight","Link","color","ColorPalette","dark","colorVariant","ColorVariant","N","primary","undefined","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import { d as Emphasis, m as getRootClassName, c as Size, n as forwardRef, b as Theme, l as classNames
|
|
1
|
+
import { d as Emphasis, m as getRootClassName, c as Size, n as forwardRef, b as Theme, l as classNames } from './6589b796.js';
|
|
2
2
|
import isEmpty from 'lodash/isEmpty';
|
|
3
3
|
import { i as isComponent } from './78df9309.js';
|
|
4
|
-
import { g as getBasicClass } from './
|
|
4
|
+
import { g as getBasicClass } from './e2afb13f.js';
|
|
5
5
|
import { u as useTheme, T as ThemeProvider } from './3181f000.js';
|
|
6
|
-
import { B as ButtonRoot } from './
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
6
|
+
import { B as ButtonRoot } from './cdddaed8.js';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { T as Text } from './0420e67b.js';
|
|
9
|
+
import { I as Icon } from './8ab42752.js';
|
|
9
10
|
|
|
10
|
-
/**
|
|
11
|
-
* Button emphasis definition.
|
|
12
|
-
* @deprecated Use Emphasis instead.
|
|
13
|
-
*/
|
|
14
11
|
const ButtonEmphasis = Emphasis;
|
|
15
12
|
|
|
16
13
|
/**
|
|
@@ -63,33 +60,38 @@ const Button = forwardRef((props, ref) => {
|
|
|
63
60
|
type: 'hasRightIcon',
|
|
64
61
|
value: !isEmpty(rightIcon)
|
|
65
62
|
}));
|
|
66
|
-
return /*#__PURE__*/
|
|
63
|
+
return /*#__PURE__*/jsxs(ButtonRoot, {
|
|
67
64
|
ref: ref,
|
|
68
65
|
emphasis,
|
|
69
66
|
size,
|
|
70
|
-
theme
|
|
71
|
-
|
|
67
|
+
theme,
|
|
68
|
+
...forwardedProps,
|
|
72
69
|
className: buttonClassName,
|
|
73
|
-
variant: "button"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
70
|
+
variant: "button",
|
|
71
|
+
children: [leftIcon && !isEmpty(leftIcon) &&
|
|
72
|
+
/*#__PURE__*/
|
|
73
|
+
// Theme is handled in the button scss
|
|
74
|
+
jsx(ThemeProvider, {
|
|
75
|
+
value: undefined,
|
|
76
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
77
|
+
icon: leftIcon
|
|
78
|
+
})
|
|
79
|
+
}), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
|
|
80
|
+
children: children
|
|
81
|
+
})), rightIcon && !isEmpty(rightIcon) &&
|
|
82
|
+
/*#__PURE__*/
|
|
83
|
+
// Theme is handled in the button scss
|
|
84
|
+
jsx(ThemeProvider, {
|
|
85
|
+
value: undefined,
|
|
86
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
87
|
+
icon: rightIcon
|
|
88
|
+
})
|
|
89
|
+
})]
|
|
90
|
+
});
|
|
89
91
|
});
|
|
90
92
|
Button.displayName = COMPONENT_NAME;
|
|
91
93
|
Button.className = CLASSNAME;
|
|
92
94
|
Button.defaultProps = DEFAULT_PROPS;
|
|
93
95
|
|
|
94
96
|
export { ButtonEmphasis as B, Button as a };
|
|
95
|
-
//# sourceMappingURL=
|
|
97
|
+
//# sourceMappingURL=a34639bd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"a34639bd.js","sources":["../../src/components/button/Button.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Emphasis, Icon, Size, Theme, Text, ThemeProvider } from '@lumx/react';\nimport { isComponent } from '@lumx/react/utils/type';\nimport { getBasicClass, getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { BaseButtonProps, ButtonRoot } from './ButtonRoot';\n\n/**\n * Button emphasis definition.\n * @deprecated Use Emphasis instead.\n */\nexport const ButtonEmphasis = Emphasis;\n\n/**\n * Defines the props of the component.\n */\nexport interface ButtonProps extends BaseButtonProps {\n /** Left icon (SVG path). */\n leftIcon?: string;\n /** Right icon (SVG path). */\n rightIcon?: string;\n /** When `true`, the button gets as large as possible. */\n fullWidth?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Button';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ButtonProps> = {\n emphasis: Emphasis.high,\n size: Size.m,\n};\n\n/**\n * Button component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n children,\n className,\n emphasis = DEFAULT_PROPS.emphasis,\n leftIcon,\n rightIcon,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n ...forwardedProps\n } = props;\n\n const buttonClassName = classNames(\n className,\n getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !isEmpty(leftIcon) }),\n getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !isEmpty(rightIcon) }),\n );\n\n return (\n <ButtonRoot\n ref={ref}\n {...{ emphasis, size, theme, ...forwardedProps }}\n className={buttonClassName}\n variant=\"button\"\n >\n {leftIcon && !isEmpty(leftIcon) && (\n // Theme is handled in the button scss\n <ThemeProvider value={undefined}>\n <Icon icon={leftIcon} />\n </ThemeProvider>\n )}\n {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}\n {rightIcon && !isEmpty(rightIcon) && (\n // Theme is handled in the button scss\n <ThemeProvider value={undefined}>\n <Icon icon={rightIcon} />\n </ThemeProvider>\n )}\n </ButtonRoot>\n );\n});\nButton.displayName = COMPONENT_NAME;\nButton.className = CLASSNAME;\nButton.defaultProps = DEFAULT_PROPS;\n"],"names":["ButtonEmphasis","Emphasis","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","high","size","Size","m","Button","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","leftIcon","rightIcon","theme","forwardedProps","buttonClassName","classNames","getBasicClass","prefix","type","value","isEmpty","_jsxs","ButtonRoot","variant","_jsx","ThemeProvider","undefined","Icon","icon","isComponent","Text","displayName","defaultProps"],"mappings":";;;;;;;;;;AAeO,MAAMA,cAAc,GAAGC,SAAQ;;AAEtC;AACA;AACA;;AAYA;AACA;AACA;AACA,MAAMC,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,QAAQ,EAAEL,QAAQ,CAACM,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAAqD,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjG,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,QAAQ;IACRC,SAAS;IACTd,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCe,QAAQ;IACRC,SAAS;IACTd,IAAI,GAAGH,aAAa,CAACG,IAAI;AACzBe,IAAAA,KAAK,GAAGR,YAAY;IACpB,GAAGS,cAAAA;AACP,GAAC,GAAGX,KAAK,CAAA;AAET,EAAA,MAAMY,eAAe,GAAGC,UAAU,CAC9BN,SAAS,EACTO,aAAa,CAAC;AAAEC,IAAAA,MAAM,EAAEzB,SAAS;AAAE0B,IAAAA,IAAI,EAAE,aAAa;AAAEC,IAAAA,KAAK,EAAE,CAACC,OAAO,CAACV,QAAQ,CAAA;GAAG,CAAC,EACpFM,aAAa,CAAC;AAAEC,IAAAA,MAAM,EAAEzB,SAAS;AAAE0B,IAAAA,IAAI,EAAE,cAAc;AAAEC,IAAAA,KAAK,EAAE,CAACC,OAAO,CAACT,SAAS,CAAA;AAAE,GAAC,CACzF,CAAC,CAAA;EAED,oBACIU,IAAA,CAACC,UAAU,EAAA;AACPnB,IAAAA,GAAG,EAAEA,GAAI;IACHR,QAAQ;IAAEE,IAAI;IAAEe,KAAK;AAAE,IAAA,GAAGC,cAAc;AAC9CJ,IAAAA,SAAS,EAAEK,eAAgB;AAC3BS,IAAAA,OAAO,EAAC,QAAQ;AAAAf,IAAAA,QAAA,GAEfE,QAAQ,IAAI,CAACU,OAAO,CAACV,QAAQ,CAAC;AAAA;AAC3B;AACAc,IAAAA,GAAA,CAACC,aAAa,EAAA;AAACN,MAAAA,KAAK,EAAEO,SAAU;MAAAlB,QAAA,eAC5BgB,GAAA,CAACG,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAElB,QAAAA;OAAW,CAAA;AAAC,KACb,CAClB,EACAF,QAAQ,KAAKqB,WAAW,CAACC,IAAI,CAAC,CAACtB,QAAQ,CAAC,GAAGA,QAAQ,gBAAGgB,GAAA,CAAA,MAAA,EAAA;AAAAhB,MAAAA,QAAA,EAAOA,QAAAA;KAAe,CAAC,CAAC,EAC9EG,SAAS,IAAI,CAACS,OAAO,CAACT,SAAS,CAAC;AAAA;AAC7B;AACAa,IAAAA,GAAA,CAACC,aAAa,EAAA;AAACN,MAAAA,KAAK,EAAEO,SAAU;MAAAlB,QAAA,eAC5BgB,GAAA,CAACG,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEjB,SAAAA;OAAY,CAAA;AAAC,KACd,CAClB,CAAA;AAAA,GACO,CAAC,CAAA;AAErB,CAAC,EAAC;AACFX,MAAM,CAAC+B,WAAW,GAAGxC,cAAc,CAAA;AACnCS,MAAM,CAACS,SAAS,GAAGjB,SAAS,CAAA;AAC5BQ,MAAM,CAACgC,YAAY,GAAGtC,aAAa;;;;"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { m as getRootClassName, c as Size, O as Orientation, n as forwardRef, _ as _extends, l as classNames } from './d3321a86.js';
|
|
2
1
|
import React__default, { Children } from 'react';
|
|
2
|
+
import { m as getRootClassName, c as Size, O as Orientation, n as forwardRef, l as classNames } from './6589b796.js';
|
|
3
3
|
import isEmpty from 'lodash/isEmpty';
|
|
4
4
|
import noop from 'lodash/noop';
|
|
5
5
|
import { i as isComponentType } from './e806b848.js';
|
|
6
6
|
import { p as partitionMulti } from './4daccdd5.js';
|
|
7
|
-
import {
|
|
7
|
+
import { jsxs } from 'react/jsx-runtime';
|
|
8
|
+
import { FlexBox } from './329b5f12.js';
|
|
8
9
|
import pick from 'lodash/pick';
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -68,32 +69,40 @@ const BaseGenericBlock = forwardRef((props, ref) => {
|
|
|
68
69
|
otherChildren: otherChildren.filter(child => !isEmpty(child))
|
|
69
70
|
};
|
|
70
71
|
}, [children]);
|
|
71
|
-
return /*#__PURE__*/
|
|
72
|
+
return /*#__PURE__*/jsxs(FlexBox, {
|
|
72
73
|
ref: ref,
|
|
73
74
|
className: classNames(className, CLASSNAME),
|
|
74
75
|
gap: gap,
|
|
75
|
-
orientation: orientation
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
76
|
+
orientation: orientation,
|
|
77
|
+
...forwardedProps,
|
|
78
|
+
children: [(figure || sections.figureChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
|
|
79
|
+
ref: sections.figureChild?.ref,
|
|
80
|
+
vAlign: forwardedProps.vAlign,
|
|
81
|
+
hAlign: forwardedProps.hAlign,
|
|
82
|
+
...figureProps,
|
|
83
|
+
...sections.figureChildProps,
|
|
84
|
+
className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME}__figure`),
|
|
85
|
+
children: [figure, sections.figureChildProps?.children]
|
|
86
|
+
}), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
|
|
87
|
+
ref: sections.contentChild?.ref,
|
|
88
|
+
orientation: Orientation.vertical,
|
|
89
|
+
fillSpace: true,
|
|
90
|
+
vAlign: forwardedProps.vAlign,
|
|
91
|
+
hAlign: forwardedProps.hAlign,
|
|
92
|
+
...contentProps,
|
|
93
|
+
...sections.contentChildProps,
|
|
94
|
+
className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME}__content`),
|
|
95
|
+
children: [sections.contentChildProps?.children, sections.otherChildren]
|
|
96
|
+
}), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
|
|
97
|
+
ref: sections.actionsChild?.ref,
|
|
98
|
+
vAlign: forwardedProps.vAlign,
|
|
99
|
+
hAlign: forwardedProps.hAlign,
|
|
100
|
+
...actionsProps,
|
|
101
|
+
...sections.actionsChildProps,
|
|
102
|
+
className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME}__actions`),
|
|
103
|
+
children: [actions, sections.actionsChildProps?.children]
|
|
104
|
+
})]
|
|
105
|
+
});
|
|
97
106
|
});
|
|
98
107
|
BaseGenericBlock.displayName = COMPONENT_NAME;
|
|
99
108
|
BaseGenericBlock.className = CLASSNAME;
|
|
@@ -110,4 +119,4 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
|
|
|
110
119
|
const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
|
|
111
120
|
|
|
112
121
|
export { GenericBlock, GenericBlockGapSize };
|
|
113
|
-
//# sourceMappingURL=
|
|
122
|
+
//# sourceMappingURL=a84f4981.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cb036703.js","sources":["../../src/components/generic-block/GenericBlock.tsx","../../src/components/generic-block/constants.ts"],"sourcesContent":["import React, { Children, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport noop from 'lodash/noop';\n\nimport { Comp, isComponentType } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { partitionMulti } from '@lumx/react/utils/partitionMulti';\nimport { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';\nimport { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n /**\n * Component to use as visual element.\n */\n figure?: ReactNode;\n /**\n * Actions to set after the main content.\n */\n actions?: ReactNode;\n /**\n * Main content to display or sections components\n * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n */\n children: ReactNode;\n /**\n * Orientation of the 3 sections\n */\n orientation?: FlexBoxProps['orientation'];\n /**\n * Horizontal alignment.\n */\n hAlign?: FlexBoxProps['hAlign'];\n /**\n * Vertical alignment.\n */\n vAlign?: FlexBoxProps['vAlign'];\n /**\n * The props to forward to the content.\n * By default, the content will have the same alignment as wrapper.\n */\n contentProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * props to forward to the actions element.\n */\n actionsProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * props to forward to the figure element.\n */\n figureProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * Gap space between sections.\n */\n gap?: GenericBlockGapSize;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n gap: Size.big,\n orientation: Orientation.horizontal,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlockSectionProps extends FlexBoxProps {\n /**\n * Gap space between items.\n */\n gap?: GenericBlockGapSize;\n}\n\ninterface GenericBlock extends BaseGenericBlock {\n /**\n * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n */\n Figure: Comp<GenericBlockSectionProps>;\n /**\n * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n */\n Content: Comp<GenericBlockSectionProps>;\n /**\n * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n */\n Actions: Comp<GenericBlockSectionProps>;\n}\n\nconst Figure = noop.bind({}) as Comp<FlexBoxProps>;\nconst isFigure = isComponentType(Figure);\n\nconst Content = noop.bind({}) as Comp<FlexBoxProps>;\nconst isContent = isComponentType(Content);\n\nconst Actions = noop.bind({}) as Comp<FlexBoxProps>;\nconst isActions = isComponentType(Actions);\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * - `Figure` => A visual element to display before the main content.\n * - `Content` => The main content displayed\n * - `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n const {\n className,\n figure,\n figureProps,\n children,\n actions,\n actionsProps,\n gap = DEFAULT_PROPS.gap,\n orientation = DEFAULT_PROPS.orientation,\n contentProps,\n ...forwardedProps\n } = props;\n\n const sections = React.useMemo(() => {\n // Split children by section type\n const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n Children.toArray(children),\n [isFigure, isContent, isActions],\n );\n return {\n figureChild,\n figureChildProps: (figureChild as ReactElement)?.props,\n contentChild,\n contentChildProps: (contentChild as ReactElement)?.props,\n actionsChild,\n actionsChildProps: (actionsChild as ReactElement)?.props,\n otherChildren: otherChildren.filter((child) => !isEmpty(child)),\n };\n }, [children]);\n\n return (\n <FlexBox\n ref={ref}\n className={classNames(className, CLASSNAME)}\n gap={gap}\n orientation={orientation}\n {...forwardedProps}\n >\n {(figure || sections.figureChildProps?.children) && (\n <FlexBox\n ref={(sections.figureChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...figureProps}\n {...sections.figureChildProps}\n className={classNames(\n figureProps?.className,\n sections.figureChildProps?.className,\n `${CLASSNAME}__figure`,\n )}\n >\n {figure}\n {sections.figureChildProps?.children}\n </FlexBox>\n )}\n\n {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (\n <FlexBox\n ref={(sections.contentChild as any)?.ref}\n orientation={Orientation.vertical}\n fillSpace\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...contentProps}\n {...sections.contentChildProps}\n className={classNames(\n contentProps?.className,\n sections.contentChildProps?.className,\n `${CLASSNAME}__content`,\n )}\n >\n {sections.contentChildProps?.children}\n {sections.otherChildren}\n </FlexBox>\n )}\n\n {(actions || sections.actionsChildProps?.children) && (\n <FlexBox\n ref={(sections.actionsChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...actionsProps}\n {...sections.actionsChildProps}\n className={classNames(\n actionsProps?.className,\n sections.actionsChildProps?.className,\n `${CLASSNAME}__actions`,\n )}\n >\n {actions}\n {sections.actionsChildProps?.children}\n </FlexBox>\n )}\n </FlexBox>\n );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n","import pick from 'lodash/pick';\nimport { Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils/type';\n\n/**\n * Accepted gap sizes for the generic block.\n */\nexport const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);\nexport type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","big","orientation","Orientation","horizontal","Figure","noop","bind","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","figureChild","contentChild","actionsChild","otherChildren","partitionMulti","Children","toArray","figureChildProps","contentChildProps","actionsChildProps","filter","child","isEmpty","createElement","FlexBox","_extends","classNames","vAlign","hAlign","length","vertical","fillSpace","displayName","defaultProps","GenericBlock","Object","assign","GenericBlockGapSize","pick"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"a84f4981.js","sources":["../../src/components/generic-block/GenericBlock.tsx","../../src/components/generic-block/constants.ts"],"sourcesContent":["import React, { Children, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport noop from 'lodash/noop';\n\nimport { Comp, isComponentType } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { partitionMulti } from '@lumx/react/utils/partitionMulti';\nimport { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';\nimport { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n /**\n * Component to use as visual element.\n */\n figure?: ReactNode;\n /**\n * Actions to set after the main content.\n */\n actions?: ReactNode;\n /**\n * Main content to display or sections components\n * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n */\n children: ReactNode;\n /**\n * Orientation of the 3 sections\n */\n orientation?: FlexBoxProps['orientation'];\n /**\n * Horizontal alignment.\n */\n hAlign?: FlexBoxProps['hAlign'];\n /**\n * Vertical alignment.\n */\n vAlign?: FlexBoxProps['vAlign'];\n /**\n * The props to forward to the content.\n * By default, the content will have the same alignment as wrapper.\n */\n contentProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * props to forward to the actions element.\n */\n actionsProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * props to forward to the figure element.\n */\n figureProps?: Omit<FlexBoxProps, 'children'>;\n /**\n * Gap space between sections.\n */\n gap?: GenericBlockGapSize;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n gap: Size.big,\n orientation: Orientation.horizontal,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlockSectionProps extends FlexBoxProps {\n /**\n * Gap space between items.\n */\n gap?: GenericBlockGapSize;\n}\n\ninterface GenericBlock extends BaseGenericBlock {\n /**\n * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n */\n Figure: Comp<GenericBlockSectionProps>;\n /**\n * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n */\n Content: Comp<GenericBlockSectionProps>;\n /**\n * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n */\n Actions: Comp<GenericBlockSectionProps>;\n}\n\nconst Figure = noop.bind({}) as Comp<FlexBoxProps>;\nconst isFigure = isComponentType(Figure);\n\nconst Content = noop.bind({}) as Comp<FlexBoxProps>;\nconst isContent = isComponentType(Content);\n\nconst Actions = noop.bind({}) as Comp<FlexBoxProps>;\nconst isActions = isComponentType(Actions);\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * - `Figure` => A visual element to display before the main content.\n * - `Content` => The main content displayed\n * - `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n const {\n className,\n figure,\n figureProps,\n children,\n actions,\n actionsProps,\n gap = DEFAULT_PROPS.gap,\n orientation = DEFAULT_PROPS.orientation,\n contentProps,\n ...forwardedProps\n } = props;\n\n const sections = React.useMemo(() => {\n // Split children by section type\n const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n Children.toArray(children),\n [isFigure, isContent, isActions],\n );\n return {\n figureChild,\n figureChildProps: (figureChild as ReactElement)?.props,\n contentChild,\n contentChildProps: (contentChild as ReactElement)?.props,\n actionsChild,\n actionsChildProps: (actionsChild as ReactElement)?.props,\n otherChildren: otherChildren.filter((child) => !isEmpty(child)),\n };\n }, [children]);\n\n return (\n <FlexBox\n ref={ref}\n className={classNames(className, CLASSNAME)}\n gap={gap}\n orientation={orientation}\n {...forwardedProps}\n >\n {(figure || sections.figureChildProps?.children) && (\n <FlexBox\n ref={(sections.figureChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...figureProps}\n {...sections.figureChildProps}\n className={classNames(\n figureProps?.className,\n sections.figureChildProps?.className,\n `${CLASSNAME}__figure`,\n )}\n >\n {figure}\n {sections.figureChildProps?.children}\n </FlexBox>\n )}\n\n {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (\n <FlexBox\n ref={(sections.contentChild as any)?.ref}\n orientation={Orientation.vertical}\n fillSpace\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...contentProps}\n {...sections.contentChildProps}\n className={classNames(\n contentProps?.className,\n sections.contentChildProps?.className,\n `${CLASSNAME}__content`,\n )}\n >\n {sections.contentChildProps?.children}\n {sections.otherChildren}\n </FlexBox>\n )}\n\n {(actions || sections.actionsChildProps?.children) && (\n <FlexBox\n ref={(sections.actionsChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...actionsProps}\n {...sections.actionsChildProps}\n className={classNames(\n actionsProps?.className,\n sections.actionsChildProps?.className,\n `${CLASSNAME}__actions`,\n )}\n >\n {actions}\n {sections.actionsChildProps?.children}\n </FlexBox>\n )}\n </FlexBox>\n );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n","import pick from 'lodash/pick';\nimport { Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils/type';\n\n/**\n * Accepted gap sizes for the generic block.\n */\nexport const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);\nexport type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","big","orientation","Orientation","horizontal","Figure","noop","bind","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","figureChild","contentChild","actionsChild","otherChildren","partitionMulti","Children","toArray","figureChildProps","contentChildProps","actionsChildProps","filter","child","isEmpty","_jsxs","FlexBox","classNames","vAlign","hAlign","length","vertical","fillSpace","displayName","defaultProps","GenericBlock","Object","assign","GenericBlockGapSize","pick"],"mappings":"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"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef, b as Theme,
|
|
2
|
-
import { h as handleBasicClasses } from './
|
|
1
|
+
import { m as getRootClassName, n as forwardRef, b as Theme, l as classNames } from './6589b796.js';
|
|
2
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
3
|
import { g as getTypographyClassName } from './d0dd1815.js';
|
|
4
4
|
import { u as useTheme } from './3181f000.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Defines the props of the component.
|
|
8
|
-
*/
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
9
6
|
|
|
10
7
|
/**
|
|
11
8
|
* Component display name.
|
|
@@ -41,21 +38,22 @@ const InputLabel = forwardRef((props, ref) => {
|
|
|
41
38
|
...forwardedProps
|
|
42
39
|
} = props;
|
|
43
40
|
const typographyClass = typography && getTypographyClassName(typography);
|
|
44
|
-
return /*#__PURE__*/
|
|
45
|
-
ref: ref
|
|
46
|
-
|
|
41
|
+
return /*#__PURE__*/jsx("label", {
|
|
42
|
+
ref: ref,
|
|
43
|
+
...forwardedProps,
|
|
47
44
|
htmlFor: htmlFor,
|
|
48
45
|
className: classNames(className, handleBasicClasses({
|
|
49
46
|
prefix: CLASSNAME,
|
|
50
47
|
isRequired,
|
|
51
48
|
theme,
|
|
52
49
|
hasCustomTypography: Boolean(typography)
|
|
53
|
-
}), typographyClass)
|
|
54
|
-
|
|
50
|
+
}), typographyClass),
|
|
51
|
+
children: children
|
|
52
|
+
});
|
|
55
53
|
});
|
|
56
54
|
InputLabel.displayName = COMPONENT_NAME;
|
|
57
55
|
InputLabel.className = CLASSNAME;
|
|
58
56
|
InputLabel.defaultProps = DEFAULT_PROPS;
|
|
59
57
|
|
|
60
58
|
export { InputLabel };
|
|
61
|
-
//# sourceMappingURL=
|
|
59
|
+
//# sourceMappingURL=b0a7a999.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"b0a7a999.js","sources":["../../src/components/input-label/InputLabel.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, Typography } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputLabelProps extends GenericProps, HasTheme {\n /** Typography variant. */\n typography?: Typography;\n /** Label content. */\n children: string | ReactNode;\n /** Native htmlFor property. */\n htmlFor: string;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputLabel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<InputLabelProps> = {};\n\n/**\n * InputLabel component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { children, className, htmlFor, isRequired, theme = defaultTheme, typography, ...forwardedProps } = props;\n const typographyClass = typography && getTypographyClassName(typography);\n\n return (\n <label\n ref={ref}\n {...forwardedProps}\n htmlFor={htmlFor}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isRequired, theme, hasCustomTypography: Boolean(typography) }),\n typographyClass,\n )}\n >\n {children}\n </label>\n );\n});\nInputLabel.displayName = COMPONENT_NAME;\nInputLabel.className = CLASSNAME;\nInputLabel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InputLabel","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","htmlFor","isRequired","theme","typography","forwardedProps","typographyClass","getTypographyClassName","_jsx","classNames","handleBasicClasses","prefix","hasCustomTypography","Boolean","displayName","defaultProps"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG,EAAE,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,OAAO;IAAEC,UAAU;AAAEC,IAAAA,KAAK,GAAGR,YAAY;IAAES,UAAU;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGZ,KAAK,CAAA;AAC/G,EAAA,MAAMa,eAAe,GAAGF,UAAU,IAAIG,sBAAsB,CAACH,UAAU,CAAC,CAAA;AAExE,EAAA,oBACII,GAAA,CAAA,OAAA,EAAA;AACId,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLW,cAAc;AAClBJ,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAES,UAAU,CACjBT,SAAS,EACTU,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEvB,SAAS;MAAEc,UAAU;MAAEC,KAAK;MAAES,mBAAmB,EAAEC,OAAO,CAACT,UAAU,CAAA;KAAG,CAAC,EACtGE,eACJ,CAAE;AAAAP,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEhB,CAAC,EAAC;AACFR,UAAU,CAACuB,WAAW,GAAG3B,cAAc,CAAA;AACvCI,UAAU,CAACS,SAAS,GAAGZ,SAAS,CAAA;AAChCG,UAAU,CAACwB,YAAY,GAAGzB,aAAa;;;;"}
|