@chayns-components/core 5.0.0-beta.954 → 5.0.0-beta.955

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.
Files changed (6) hide show
  1. package/lib/cjs/components/input/Input.js +2 -0
  2. package/lib/cjs/components/input/Input.js.map +1 -1
  3. package/lib/esm/components/input/Input.js +2 -0
  4. package/lib/esm/components/input/Input.js.map +1 -1
  5. package/lib/types/components/input/Input.d.ts +4 -0
  6. package/package.json +2 -2
package/lib/cjs/components/input/Input.js CHANGED
@@ -26,6 +26,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
26
26
  onChange,
27
27
  onFocus,
28
28
  onKeyDown,
29
+ onPaste,
29
30
  placeholder,
30
31
  rightElement,
31
32
  shouldShowOnlyBottomBorder,
@@ -122,6 +123,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
122
123
  event.preventDefault();
123
124
  event.stopPropagation();
124
125
  },
126
+ onPaste: onPaste,
125
127
  ref: inputRef,
126
128
  type: type,
127
129
  value: value,
package/lib/cjs/components/input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * An element to be displayed on the left side of the input field\n */\n leftElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Whether the placeholder animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\n /**\n * Whether the placeholder should remain at its position if a value is typed.\n */\n shouldRemainPlaceholder?: boolean;\n /**\n * Whether the content should be displayed centered inside the input.\n */\n shouldShowCenteredContent?: boolean;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * An element to be displayed on the left side of the input field\n */\n leftElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when content is pasted into the input field\n */\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Whether the placeholder animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\n /**\n * Whether the placeholder should remain at its position if a value is typed.\n */\n shouldRemainPlaceholder?: boolean;\n /**\n * Whether the content should be displayed centered inside the input.\n */\n shouldShowCenteredContent?: boolean;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/input/Input.js CHANGED
@@ -18,6 +18,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
18
18
  onChange,
19
19
  onFocus,
20
20
  onKeyDown,
21
+ onPaste,
21
22
  placeholder,
22
23
  rightElement,
23
24
  shouldShowOnlyBottomBorder,
@@ -110,6 +111,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
110
111
  event.preventDefault();
111
112
  event.stopPropagation();
112
113
  },
114
+ onPaste: onPaste,
113
115
  ref: inputRef,
114
116
  type: type,
115
117
  value: value,
package/lib/esm/components/input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * An element to be displayed on the left side of the input field\n */\n leftElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Whether the placeholder animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\n /**\n * Whether the placeholder should remain at its position if a value is typed.\n */\n shouldRemainPlaceholder?: boolean;\n /**\n * Whether the content should be displayed centered inside the input.\n */\n shouldShowCenteredContent?: boolean;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * An element to be displayed on the left side of the input field\n */\n leftElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when content is pasted into the input field\n */\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Whether the placeholder animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\n /**\n * Whether the placeholder should remain at its position if a value is typed.\n */\n shouldRemainPlaceholder?: boolean;\n /**\n * Whether the content should be displayed centered inside the input.\n */\n shouldShowCenteredContent?: boolean;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
package/lib/types/components/input/Input.d.ts CHANGED
@@ -40,6 +40,10 @@ export type InputProps = {
40
40
  * Function that is executed when the input field is focused
41
41
  */
42
42
  onFocus?: FocusEventHandler<HTMLInputElement>;
43
+ /**
44
+ * Function that is executed when content is pasted into the input field
45
+ */
46
+ onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
43
47
  /**
44
48
  * Function that is executed when a letter is pressed
45
49
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.954",
3
+ "version": "5.0.0-beta.955",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -87,5 +87,5 @@
87
87
  "publishConfig": {
88
88
  "access": "public"
89
89
  },
90
- "gitHead": "8e0a2b0a87414750a2a2f34c4ca1dd55abbc48d0"
90
+ "gitHead": "00981f69e59d945c814c16588bf3da8ed0fbf622"
91
91
  }