@chayns-components/core 5.0.10 → 5.0.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/lib/cjs/components/input/Input.js +2 -1
- package/lib/cjs/components/input/Input.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +0 -2
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js +2 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/esm/components/input/Input.js +2 -1
- package/lib/esm/components/input/Input.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +0 -2
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js +2 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts +3 -3
- package/package.json +2 -2
|
@@ -117,7 +117,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
return {
|
|
120
|
-
left: -1
|
|
120
|
+
left: -1,
|
|
121
|
+
top: -1.5
|
|
121
122
|
};
|
|
122
123
|
}, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
|
|
123
124
|
const inputElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\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';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\ntype AutoComplete =\n | 'on'\n | 'off'\n | 'name'\n | 'username'\n | 'email'\n | 'new-password'\n | 'current-password'\n | 'tel'\n | 'url'\n | 'street-address'\n | 'postal-code'\n | 'country'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * If set and the input is disabled, the input will display a tooltip with this message.\n */\n disabledHint?: string;\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 * Defines the auto Complete of the input\n */\n autoComplete?: AutoComplete;\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 * Color of the placeholder text.\n */\n placeholderColor?: CSSProperties['color'];\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 * Whether the background should be transparent.\n */\n shouldShowTransparentBackground?: 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 an 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 placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\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 useCursorRepaint(inputRef);\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 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 blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n let color: CSSProperties['color'] | undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\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 const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\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 autoComplete={autoComplete}\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\n $color={placeholderColor}\n $isInvalid={isInvalid}\n >\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 autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\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","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\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';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\ntype AutoComplete =\n | 'on'\n | 'off'\n | 'name'\n | 'username'\n | 'email'\n | 'new-password'\n | 'current-password'\n | 'tel'\n | 'url'\n | 'street-address'\n | 'postal-code'\n | 'country'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * If set and the input is disabled, the input will display a tooltip with this message.\n */\n disabledHint?: string;\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 * Defines the auto Complete of the input\n */\n autoComplete?: AutoComplete;\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 * Color of the placeholder text.\n */\n placeholderColor?: CSSProperties['color'];\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 * Whether the background should be transparent.\n */\n shouldShowTransparentBackground?: 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 an 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 placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\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 useCursorRepaint(inputRef);\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 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 blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n let color: CSSProperties['color'] | undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\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, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\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 autoComplete={autoComplete}\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 $color={placeholderColor} $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 autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAkBA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAWA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAAyC,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAiC7BgB,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AA4GrB,MAAME,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CACI;EACIC,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAGnB,SAAS,CAACoB,MAAM;EACvBC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC,iCAAiC,GAAG,KAAK;EACzCC,EAAE;EACFC,+BAA+B,GAAG,KAAK;EACvCC;AACJ,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOZ,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACa,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAErD,IAAAE,wBAAgB,EAACH,QAAQ,CAAC;EAE1B,MAAMI,eAAe,GAAG,IAAAC,uBAAc,EAACH,cAAc,CAAC;EAEtD,IAAAI,gBAAS,EAAC,MAAM;IACZ,IAAIF,eAAe,IAAI/B,0BAA0B,EAAE;MAC/CqB,mBAAmB,CAACU,eAAe,CAACG,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACH,eAAe,EAAE/B,0BAA0B,CAAC,CAAC;EAEjD,MAAMmC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIT,QAAQ,CAACU,OAAO,EAAE;MAClBV,QAAQ,CAACU,OAAO,CAAC9B,KAAK,GAAG,EAAE;MAE3BW,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOzB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE6C,MAAM,EAAEX,QAAQ,CAACU;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC5C,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAM8C,gBAAgB,GAAG,CAAAxC,YAAY,aAAZA,YAAY,gBAAAiB,mBAAA,GAAZjB,YAAY,CAAEyC,KAAK,cAAAxB,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqByB,KAAK,cAAAzB,mBAAA,uBAA1BA,mBAAA,CAA4B0B,eAAe,MAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG,IAAAR,kBAAW,EACrCS,KAAoC,IAAK;IACtC3B,WAAW,CAAC2B,KAAK,CAACP,MAAM,CAAC/B,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACoD,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACpD,QAAQ,CACb,CAAC;EAED,IAAAqD,0BAAmB,EACf/B,GAAG,EACH,OAAO;IACHgC,KAAK,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMrB,QAAQ,CAACU,OAAO,cAAAW,iBAAA,uBAAhBA,iBAAA,CAAkBD,KAAK,CAAC,CAAC;IAAA;IACtCE,IAAI,EAAEA,CAAA;MAAA,IAAAC,kBAAA;MAAA,QAAAA,kBAAA,GAAMvB,QAAQ,CAACU,OAAO,cAAAa,kBAAA,uBAAhBA,kBAAA,CAAkBD,IAAI,CAAC,CAAC;IAAA;EACxC,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAhB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO1B,KAAK,KAAK,QAAQ,EAAE;MAC3BW,WAAW,CAACX,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAImC,eAA6D;EACjE,IAAIS,KAAyC;EAE7C,IAAItC,+BAA+B,EAAE;IACjC6B,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACHpB,YAAY,CAAC8B,eAAe,IAC5B,CAACC,4BAAe,CAACC,KAAK,EAAED,4BAAe,CAACE,OAAO,EAAEF,4BAAe,CAACG,OAAO,CAAC,CAACC,QAAQ,CAC9EnC,YAAY,CAAC8B,eACjB,CAAC,EACH;IACEV,eAAe,GAAG,OAAO;IACzBS,KAAK,GAAG,MAAM;EAClB,CAAC,MAAM,IAAI7B,YAAY,CAACoC,iBAAiB,EAAE;IACvChB,eAAe,GAAGjB,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAMkC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAI3C,QAAQ,IAAI,CAAChB,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAE6D,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE3D,IAAI,KAAKnB,SAAS,CAAC+E,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;QAAEH,KAAK,EAAE,CAAC;MAAE,CAAC;IACpE;IAEA,OAAO;MAAEI,IAAI,EAAE,CAAC,CAAC;MAAEH,GAAG,EAAE,CAAC;IAAI,CAAC;EAClC,CAAC,EAAE,CACC7C,QAAQ,EACRN,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAM8D,YAAY,GAAG,IAAAN,cAAO,EACxB,mBACI1G,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA0G,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE/E;EAAW,gBAC/DrC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA6G,yBAAyB;IACtBC,gCAAgC,EAAE3D,+BAAgC;IAClE4D,gBAAgB,EAAE/B,eAAgB;IAClCgC,UAAU,EAAEhE,SAAU;IACtBiE,wBAAwB,EAAEpC,gBAAiB;IAC3CqC,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE;EAAK,GAEXf,WAAW,iBACRnC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAoH,sBAAsB,QAAEzF,WAAoC,CAChE,eACDnC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAqH,kBAAkB;IACfH,2BAA2B,EAAE5E;EAA2B,gBAExD9C,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAsH,gBAAgB;IACbC,MAAM,EAAE9B,KAAM;IACd+B,iBAAiB,EAAE9D,gBAAiB;IACpCR,EAAE,EAAEA,EAAG;IACPuE,QAAQ,EAAE5F,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEmD,sBAAuB;IACjClD,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrByF,OAAO,EAAGvC,KAAK,IAAK;MAChBA,KAAK,CAACwC,cAAc,CAAC,CAAC;MACtBxC,KAAK,CAACyC,eAAe,CAAC,CAAC;IAC3B,CAAE;IACF1F,OAAO,EAAEA,OAAQ;IACjBmB,GAAG,EAAEY,QAAS;IACdrB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbgF,SAAS,EAAE9E,kBAAmB;IAC9BnB,SAAS,EAAEA,SAAU;IACrBwB,YAAY,EAAEA,YAAa;IAC3B4D,UAAU,EAAEhE,SAAU;IACtB8E,0BAA0B,EAAErF;EAA0B,CACzD,CAAC,eACFjD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA+H,6BAA6B;IAC1BC,OAAO,EACH/E,iCAAiC,GAC3B;MACIgF,OAAO,EAAE1E,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACI2E,QAAQ,EACJ3E,QAAQ,IACR,CAACjB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAG4F,MAAM,CAACpE,KAAK,CAACmE,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACNhF,GAAG,EAAEc,cAAe;IACpBY,KAAK,EAAE;MAAE,GAAGkB;IAAc,CAAE;IAC5BqC,UAAU,EAAE;MACR1F,IAAI,EAAE,OAAO;MACb2F,QAAQ,EAAEtF,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEFzD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAwI,gBAAgB;IAACjB,MAAM,EAAEnF,gBAAiB;IAAC4E,UAAU,EAAEhE;EAAU,GAC7Db,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBhD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAyI,0BAA0B;IACvBvB,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE,IAAK;IACZsF,OAAO,EAAE;MAAEC,OAAO,EAAE1E,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvC6E,OAAO,EAAE,KAAM;IACfV,OAAO,EAAEjD,oBAAqB;IAC9B6D,UAAU,EAAE;MAAE1F,IAAI,EAAE;IAAQ;EAAE,gBAE9BpD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAAC3G,KAAA,CAAAQ,OAAI;IACDoI,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBjD,KAAK,EAAEzC,SAAS,GAAGe,KAAK,CAAC4E,KAAK,GAAG1D;EAAU,CAC9C,CACuB,CAC/B,EACA5C,YAAY,IAAIwC,gBAAgB,IAAIxC,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACwC,gBAAgB,iBAC9BrF,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA4I,uBAAuB,QAAEvG,YAAsC,CAE3D,CAChB,EACD,CACIe,YAAY,EACZ4B,eAAe,EACfS,KAAK,EACLhB,oBAAoB,EACpBS,sBAAsB,EACtB3B,QAAQ,EACRL,EAAE,EACFtB,SAAS,EACTC,UAAU,EACVmB,SAAS,EACTiD,aAAa,EACbtE,WAAW,EACXG,MAAM,EACNE,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,gBAAgB,EAChBsB,gBAAgB,EAChBrB,YAAY,EACZY,iCAAiC,EACjCV,uBAAuB,EACvBsC,gBAAgB,EAChBpC,yBAAyB,EACzBD,mBAAmB,EACnBF,0BAA0B,EAC1Ba,+BAA+B,EAC/BJ,kBAAkB,EAClBL,IAAI,EACJqB,KAAK,CAACmE,QAAQ,EACdnE,KAAK,CAAC4E,KAAK,EACX/F,IAAI,EACJC,KAAK,CAEb,CAAC;EAED,IAAIhB,UAAU,IAAI,OAAOiB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACItD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACtG,QAAA,CAAAG,OAAO;MAACuI,IAAI,EAAE;QAAEC,IAAI,EAAEhG;MAAa,CAAE;MAACiG,kBAAkB;IAAA,GACpDvC,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAED/E,KAAK,CAACuH,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAzH,OAAA,CAAAlB,OAAA,GAEbmB,KAAK","ignoreList":[]}
|
|
@@ -132,8 +132,6 @@ const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0
|
|
|
132
132
|
position: absolute;
|
|
133
133
|
user-select: none;
|
|
134
134
|
max-width: 100%;
|
|
135
|
-
top: 50%;
|
|
136
|
-
transform: translateY(-50%);
|
|
137
135
|
`;
|
|
138
136
|
const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_react.motion.div)`
|
|
139
137
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n top: 50%;\n transform: translateY(-50%);\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom
|
|
1
|
+
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n */\n icon: string | ReactElement;\n /**\n * Whether the action is disabled.\n * @description Disabled actions do not respond to hover or click and are visually dimmed.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Optional reason shown in a tooltip when the action is disabled.\n * @description Use this to explain why the action is currently unavailable.\n * @optional\n */\n disabledReason?: string;\n /**\n * The optional label for the action.\n * @description The label is shown next to the icon and will be truncated with ellipsis when\n * there is not enough horizontal space.\n * @optional\n */\n label: ReactNode;\n /**\n * Click handler for the action.\n * @description Receives a payload that includes the action type, extension state, and device info.\n * This allows external logic to decide whether the click should trigger an action immediately.\n * @optional\n */\n onClick?: (info: MultiActionButtonActionEvent) => void;\n /**\n * Status effect configuration for the action.\n * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n * @optional\n */\n status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n /**\n * Optional background color for both actions.\n * @description Overrides the default background color for the action buttons. This is useful\n * when the button is used on different backgrounds or when a specific brand color is needed.\n * If omitted, the primary color from the theme is used.\n * @default theme.primary\n * @optional\n */\n backgroundColor?: string;\n /**\n * Additional class name for the wrapper element.\n * @description Useful for custom styling or testing hooks.\n * @optional\n */\n className?: string;\n /**\n * Timeout in ms before the secondary action collapses after a click.\n * @description Set to 0 to keep the secondary action extended until the user collapses it.\n * @example\n * <MultiActionButton\n * primaryAction={primaryAction}\n * secondaryAction={secondaryAction}\n * extendedTimeoutMs={0}\n * />\n * @default 3000\n * @optional\n */\n extendedTimeoutMs?: number;\n /**\n * Height of the button.\n * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n * @default MultiActionButtonHeight.Medium\n * @optional\n */\n height?: number;\n /**\n * Optional color for the 1px separator line between actions.\n * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n * @optional\n */\n gapColor?: string;\n /**\n * Whether the button is collapsed to a single icon.\n * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n * Use this to provide compact states or toolbar modes.\n * @default false\n * @optional\n */\n isCollapsed?: boolean;\n /**\n * Whether the whole control is disabled.\n * @description Disables interactions for both actions, including hover expansion and clicks.\n * @default false\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Primary action configuration.\n * @description Required action shown on the left side (or as the only action when no secondary is provided).\n */\n primaryAction: MultiActionButtonAction;\n /**\n * Secondary action configuration.\n * @description Optional action shown on the right side. When present, it can expand on hover or click.\n * @optional\n */\n secondaryAction?: MultiActionButtonAction;\n /**\n * Whether the button should take the full width of its parent.\n * @description When true, the control stretches to 100% width unless `width` is provided.\n * @optional\n */\n shouldUseFullWidth?: boolean;\n /**\n * Optional width override for the whole button.\n * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n * the width is driven by the content unless `shouldUseFullWidth` is true.\n * @optional\n */\n width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AAgDA;AACA;AACA","ignoreList":[]}
|
|
@@ -43,12 +43,13 @@ const ActionButton = ({
|
|
|
43
43
|
const isActionDisabled = isDisabled || Boolean(action.isDisabled);
|
|
44
44
|
const disabledReason = (_action$disabledReaso = action.disabledReason) === null || _action$disabledReaso === void 0 ? void 0 : _action$disabledReaso.trim();
|
|
45
45
|
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
|
|
46
|
+
const iconSize = height - 24;
|
|
46
47
|
const actionContent = /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledIconSlot, {
|
|
47
48
|
$height: height
|
|
48
49
|
}, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
49
50
|
icons: [action.icon],
|
|
50
51
|
color: actionColor,
|
|
51
|
-
size:
|
|
52
|
+
size: iconSize
|
|
52
53
|
}) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
53
54
|
initial: false
|
|
54
55
|
}, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_Tooltip","_ActionButton","_popup","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$disabledReaso","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={
|
|
1
|
+
{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_Tooltip","_ActionButton","_popup","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$disabledReaso","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n const iconSize = height - 24;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n );\n\n return (\n <StyledActionButton\n aria-disabled={isActionDisabled}\n disabled={isActionDisabled && !shouldShowDisabledReason}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isInteractionDisabled={isActionDisabled}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n {shouldShowDisabledReason && disabledReason ? (\n <Tooltip\n alignment={PopupAlignment.BottomRight}\n item={{ text: disabledReason }}\n maxItemWidth={400}\n >\n {actionContent}\n </Tooltip>\n ) : (\n actionContent\n )}\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -102,7 +102,8 @@ const Input = /*#__PURE__*/forwardRef(({
|
|
|
102
102
|
};
|
|
103
103
|
}
|
|
104
104
|
return {
|
|
105
|
-
left: -1
|
|
105
|
+
left: -1,
|
|
106
|
+
top: -1.5
|
|
106
107
|
};
|
|
107
108
|
}, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
|
|
108
109
|
const inputElement = useMemo(() => /*#__PURE__*/React.createElement(StyledInput, {
|
|
@@ -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","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\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';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\ntype AutoComplete =\n | 'on'\n | 'off'\n | 'name'\n | 'username'\n | 'email'\n | 'new-password'\n | 'current-password'\n | 'tel'\n | 'url'\n | 'street-address'\n | 'postal-code'\n | 'country'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * If set and the input is disabled, the input will display a tooltip with this message.\n */\n disabledHint?: string;\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 * Defines the auto Complete of the input\n */\n autoComplete?: AutoComplete;\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 * Color of the placeholder text.\n */\n placeholderColor?: CSSProperties['color'];\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 * Whether the background should be transparent.\n */\n shouldShowTransparentBackground?: 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 an 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 placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\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 useCursorRepaint(inputRef);\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 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 blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n let color: CSSProperties['color'] | undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\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 const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\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 autoComplete={autoComplete}\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\n $color={placeholderColor}\n $isInvalid={isInvalid}\n >\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 autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\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","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\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';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\ntype AutoComplete =\n | 'on'\n | 'off'\n | 'name'\n | 'username'\n | 'email'\n | 'new-password'\n | 'current-password'\n | 'tel'\n | 'url'\n | 'street-address'\n | 'postal-code'\n | 'country'\n | undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /**\n * If set and the input is disabled, the input will display a tooltip with this message.\n */\n disabledHint?: string;\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 * Defines the auto Complete of the input\n */\n autoComplete?: AutoComplete;\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 * Color of the placeholder text.\n */\n placeholderColor?: CSSProperties['color'];\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 * Whether the background should be transparent.\n */\n shouldShowTransparentBackground?: 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 an 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 placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\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 useCursorRepaint(inputRef);\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 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 blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n let color: CSSProperties['color'] | undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\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, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\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 autoComplete={autoComplete}\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 $color={placeholderColor} $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 autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -125,8 +125,6 @@ export const StyledMotionInputLabelWrapper = styled(motion.label)`
|
|
|
125
125
|
position: absolute;
|
|
126
126
|
user-select: none;
|
|
127
127
|
max-width: 100%;
|
|
128
|
-
top: 50%;
|
|
129
|
-
transform: translateY(-50%);
|
|
130
128
|
`;
|
|
131
129
|
export const StyledMotionInputElement = styled(motion.div)`
|
|
132
130
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n
|
|
1
|
+
{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom
|
|
1
|
+
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n */\n icon: string | ReactElement;\n /**\n * Whether the action is disabled.\n * @description Disabled actions do not respond to hover or click and are visually dimmed.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Optional reason shown in a tooltip when the action is disabled.\n * @description Use this to explain why the action is currently unavailable.\n * @optional\n */\n disabledReason?: string;\n /**\n * The optional label for the action.\n * @description The label is shown next to the icon and will be truncated with ellipsis when\n * there is not enough horizontal space.\n * @optional\n */\n label: ReactNode;\n /**\n * Click handler for the action.\n * @description Receives a payload that includes the action type, extension state, and device info.\n * This allows external logic to decide whether the click should trigger an action immediately.\n * @optional\n */\n onClick?: (info: MultiActionButtonActionEvent) => void;\n /**\n * Status effect configuration for the action.\n * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n * @optional\n */\n status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n /**\n * Optional background color for both actions.\n * @description Overrides the default background color for the action buttons. This is useful\n * when the button is used on different backgrounds or when a specific brand color is needed.\n * If omitted, the primary color from the theme is used.\n * @default theme.primary\n * @optional\n */\n backgroundColor?: string;\n /**\n * Additional class name for the wrapper element.\n * @description Useful for custom styling or testing hooks.\n * @optional\n */\n className?: string;\n /**\n * Timeout in ms before the secondary action collapses after a click.\n * @description Set to 0 to keep the secondary action extended until the user collapses it.\n * @example\n * <MultiActionButton\n * primaryAction={primaryAction}\n * secondaryAction={secondaryAction}\n * extendedTimeoutMs={0}\n * />\n * @default 3000\n * @optional\n */\n extendedTimeoutMs?: number;\n /**\n * Height of the button.\n * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n * @default MultiActionButtonHeight.Medium\n * @optional\n */\n height?: number;\n /**\n * Optional color for the 1px separator line between actions.\n * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n * @optional\n */\n gapColor?: string;\n /**\n * Whether the button is collapsed to a single icon.\n * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n * Use this to provide compact states or toolbar modes.\n * @default false\n * @optional\n */\n isCollapsed?: boolean;\n /**\n * Whether the whole control is disabled.\n * @description Disables interactions for both actions, including hover expansion and clicks.\n * @default false\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Primary action configuration.\n * @description Required action shown on the left side (or as the only action when no secondary is provided).\n */\n primaryAction: MultiActionButtonAction;\n /**\n * Secondary action configuration.\n * @description Optional action shown on the right side. When present, it can expand on hover or click.\n * @optional\n */\n secondaryAction?: MultiActionButtonAction;\n /**\n * Whether the button should take the full width of its parent.\n * @description When true, the control stretches to 100% width unless `width` is provided.\n * @optional\n */\n shouldUseFullWidth?: boolean;\n /**\n * Optional width override for the whole button.\n * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n * the width is driven by the content unless `shouldUseFullWidth` is true.\n * @optional\n */\n width?: number | MotionValue<number>;\n};\n"],"mappings":"AAGA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AAgDA;AACA;AACA","ignoreList":[]}
|
|
@@ -35,12 +35,13 @@ const ActionButton = ({
|
|
|
35
35
|
const isActionDisabled = isDisabled || Boolean(action.isDisabled);
|
|
36
36
|
const disabledReason = action.disabledReason?.trim();
|
|
37
37
|
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
|
|
38
|
+
const iconSize = height - 24;
|
|
38
39
|
const actionContent = /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
|
|
39
40
|
$height: height
|
|
40
41
|
}, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
|
|
41
42
|
icons: [action.icon],
|
|
42
43
|
color: actionColor,
|
|
43
|
-
size:
|
|
44
|
+
size: iconSize
|
|
44
45
|
}) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
45
46
|
initial: false
|
|
46
47
|
}, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","actionContent","createElement","$height","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={
|
|
1
|
+
{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","$height","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n const disabledReason = action.disabledReason?.trim();\n const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n const iconSize = height - 24;\n\n const actionContent = (\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n );\n\n return (\n <StyledActionButton\n aria-disabled={isActionDisabled}\n disabled={isActionDisabled && !shouldShowDisabledReason}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isInteractionDisabled={isActionDisabled}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n {shouldShowDisabledReason && disabledReason ? (\n <Tooltip\n alignment={PopupAlignment.BottomRight}\n item={{ text: disabledReason }}\n maxItemWidth={400}\n >\n {actionContent}\n </Tooltip>\n ) : (\n actionContent\n )}\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { MouseEvent, ReactNode } from 'react';
|
|
1
|
+
import type { MouseEvent, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import type { MotionValue } from 'motion/react';
|
|
3
3
|
/**
|
|
4
4
|
* Supported status types for the multi action button.
|
|
@@ -81,10 +81,10 @@ export type MultiActionButtonAction = {
|
|
|
81
81
|
color?: string;
|
|
82
82
|
/**
|
|
83
83
|
* The icon for the action.
|
|
84
|
-
* @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom
|
|
84
|
+
* @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.
|
|
85
85
|
* The icon is always rendered inside a fixed-size slot to keep alignment stable.
|
|
86
86
|
*/
|
|
87
|
-
icon: string |
|
|
87
|
+
icon: string | ReactElement;
|
|
88
88
|
/**
|
|
89
89
|
* Whether the action is disabled.
|
|
90
90
|
* @description Disabled actions do not respond to hover or click and are visually dimmed.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.12",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "bd5ba339e33023882c8cfb46b94b553674fdb0be"
|
|
90
90
|
}
|