@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.1200

package/lib/esm/components/input/Input.js

@@ -0,0 +1,167 @@
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/element';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import Icon from '../icon/Icon';
+import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+import { ContentCardType } from '../../types/contentCard';
+export let InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
+const Input = /*#__PURE__*/forwardRef(({
+  leftElement,
+  inputMode,
+  isDisabled,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onPaste,
+  placeholder,
+  rightElement,
+  shouldShowOnlyBottomBorder,
+  shouldRemainPlaceholder = false,
+  shouldShowClearIcon = false,
+  shouldShowCenteredContent = false,
+  size = InputSize.Medium,
+  type = 'text',
+  value,
+  shouldUseAutoFocus = false,
+  isInvalid = false,
+  shouldPreventPlaceholderAnimation = false,
+  id
+}, ref) => {
+  const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
+  const [placeholderWidth, setPlaceholderWidth] = useState(0);
+  const areaProvider = useContext(AreaContext);
+  const theme = useTheme();
+  const inputRef = useRef(null);
+  const placeholderRef = useRef(null);
+  const placeholderSize = useElementSize(placeholderRef);
+  useEffect(() => {
+    if (placeholderSize && shouldShowOnlyBottomBorder) {
+      setPlaceholderWidth(placeholderSize.width + 5);
+    }
+  }, [placeholderSize, shouldShowOnlyBottomBorder]);
+  const handleClearIconClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      setHasValue(false);
+      if (typeof onChange === 'function') {
+        onChange({
+          target: inputRef.current
+        });
+      }
+    }
+  }, [onChange]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
+  const handleInputFieldChange = useCallback(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur()
+  }), []);
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  let backgroundColor;
+  let color;
+  if (areaProvider.contentCardType && [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(areaProvider.contentCardType)) {
+    backgroundColor = 'white';
+    color = '#555';
+  } else if (areaProvider.shouldChangeColor) {
+    backgroundColor = theme['000'];
+  }
+  const labelPosition = useMemo(() => {
+    if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
+      return shouldShowOnlyBottomBorder ? {
+        right: 3,
+        top: -1.5
+      } : {
+        bottom: size === InputSize.Small ? -4 : -10,
+        right: -6
+      };
+    }
+    return {
+      left: -1
+    };
+  }, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
+  return /*#__PURE__*/React.createElement(StyledInput, {
+    className: "beta-chayns-input",
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
+    $backgroundColor: backgroundColor,
+    $isInvalid: isInvalid,
+    $shouldRoundRightCorners: shouldShowBorder,
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size
+  }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+  }, /*#__PURE__*/React.createElement(StyledInputField, {
+    $color: color,
+    $placeholderWidth: placeholderWidth,
+    id: id,
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    onPaste: onPaste,
+    ref: inputRef,
+    type: type,
+    value: value,
+    autoFocus: shouldUseAutoFocus,
+    inputMode: inputMode,
+    $isInvalid: isInvalid,
+    $shouldShowCenteredContent: shouldShowCenteredContent
+  }), /*#__PURE__*/React.createElement(StyledMotionInputLabelWrapper, {
+    animate: shouldPreventPlaceholderAnimation ? {
+      opacity: hasValue ? 0 : 1
+    } : {
+      fontSize: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? '9px' : `${Number(theme.fontSize)}px`
+    },
+    initial: false,
+    layout: true,
+    ref: placeholderRef,
+    style: {
+      ...labelPosition
+    },
+    transition: {
+      type: 'tween',
+      duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
+    }
+  }, /*#__PURE__*/React.createElement(StyledInputLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size,
+    animate: {
+      opacity: hasValue ? 1 : 0
+    },
+    initial: false,
+    onClick: handleClearIconClick,
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-times'],
+    color: isInvalid ? theme.wrong : undefined
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement));
+});
+Input.displayName = 'Input';
+export default Input;
+//# sourceMappingURL=Input.js.map

package/lib/esm/components/input/Input.js.map

@@ -0,0 +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","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","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","createElement","className","$isDisabled","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","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';\n\nexport type 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\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for 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            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const 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 (\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        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $backgroundColor={backgroundColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $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                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.styles.js

@@ -0,0 +1,152 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledInput = styled.div`
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    display: flex;
+    width: 100%;
+`;
+export const StyledInputContentWrapper = styled.div`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $backgroundColor
+}) => $backgroundColor ?? theme['100']};
+    border: 1px solid
+        ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
+    color: ${({
+  theme
+}) => theme['006']};
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    transition: opacity 0.3s ease;
+
+    ${({
+  $size
+}) => $size === 'small' && css`
+            height: 32px;
+        `}
+
+    ${({
+  $shouldShowOnlyBottomBorder,
+  $size
+}) => !$shouldShowOnlyBottomBorder && css`
+            min-height: ${$size === 'medium' ? '42px' : '32px'};
+        `}
+
+    ${({
+  $shouldRoundRightCorners,
+  $shouldShowOnlyBottomBorder,
+  theme
+}) => {
+  if ($shouldShowOnlyBottomBorder) {
+    return css`
+                border-top: none;
+                border-right: none;
+                border-left: none;
+                background-color: transparent;
+                border-color: ${theme['408']};
+            `;
+  }
+  if ($shouldRoundRightCorners) {
+    return css`
+                border-radius: 3px;
+            `;
+  }
+  return css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+            border-right: none;
+        `;
+}}
+`;
+export const StyledInputContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: ${({
+  $shouldShowOnlyBottomBorder
+}) => !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};
+    position: relative;
+`;
+export const StyledInputField = styled.input`
+    background: none;
+    border: none;
+    color: ${({
+  theme,
+  $color,
+  $isInvalid
+}) => $color ?? ($isInvalid ? theme.wrong : theme.text)};
+    padding: 0;
+    width: ${({
+  $placeholderWidth
+}) => `calc(100% - ${$placeholderWidth}px)`};
+    line-height: 1em;
+
+    ${({
+  $shouldShowCenteredContent
+}) => $shouldShowCenteredContent && css`
+            text-align: center;
+        `}
+`;
+export const StyledMotionInputLabelWrapper = styled(motion.label)`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    max-width: 100%;
+`;
+export const StyledMotionInputElement = styled(motion.div)`
+    display: flex;
+`;
+export const StyledInputLabel = styled.label`
+    line-height: 1.3;
+    pointer-events: none;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
+`;
+export const StyledMotionInputClearIcon = styled(motion.div)`
+    align-items: center;
+    border-left: ${({
+  $shouldShowOnlyBottomBorder
+}) => $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
+    justify-content: center;
+    width: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
+`;
+export const StyledInputIconWrapper = styled.div`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 10px;
+`;
+export const StyledInputRightElement = styled.div`
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
+//# sourceMappingURL=Input.styles.js.map

package/lib/esm/components/input/Input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","wrong","$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}>;\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\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\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    ${({ $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<{ $isInvalid?: boolean }>;\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, $isInvalid }: StyledInputLabelProps) =>\n        $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":[]}

package/lib/esm/components/list/List.js

@@ -0,0 +1,52 @@
+import { AnimatePresence, MotionConfig } from 'motion/react';
+import React, { useCallback, useMemo, useState } from 'react';
+export const ListContext = /*#__PURE__*/React.createContext({
+  incrementExpandableItemCount: () => () => {},
+  isAnyItemExpandable: false,
+  isWrapped: false,
+  openItemUuid: undefined,
+  updateOpenItemUuid: () => {}
+});
+ListContext.displayName = 'ListContext';
+const List = ({
+  children,
+  isWrapped = false
+}) => {
+  const [openItemUuid, setOpenItemUuid] = useState(undefined);
+  const [expandableItemCount, setExpandableItemCount] = useState(0);
+  const updateOpenItemUuid = useCallback((uuid, {
+    shouldOnlyOpen
+  } = {}) => {
+    setOpenItemUuid(currentOpenItemUuid => {
+      if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
+        return undefined;
+      }
+      return uuid;
+    });
+  }, [setOpenItemUuid]);
+  const incrementExpandableItemCount = useCallback(() => {
+    setExpandableItemCount(count => count + 1);
+    return () => {
+      setExpandableItemCount(count => count - 1);
+    };
+  }, [setExpandableItemCount]);
+  const providerValue = useMemo(() => ({
+    incrementExpandableItemCount,
+    isAnyItemExpandable: expandableItemCount > 0,
+    isWrapped,
+    openItemUuid,
+    updateOpenItemUuid
+  }), [expandableItemCount, incrementExpandableItemCount, isWrapped, openItemUuid, updateOpenItemUuid]);
+  return /*#__PURE__*/React.createElement(ListContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, children)));
+};
+List.displayName = 'List';
+export default List;
+//# sourceMappingURL=List.js.map

package/lib/esm/components/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            incrementExpandableItemCount,\n            isAnyItemExpandable: expandableItemCount > 0,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [\n            expandableItemCount,\n            incrementExpandableItemCount,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,cAAc;AAC5D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGA,CAAC;EAAEC,QAAQ;EAAEN,SAAS,GAAG;AAAM,CAAC,KAAK;EAC7D,MAAM,CAACC,YAAY,EAAEM,eAAe,CAAC,GAAGZ,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACM,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGd,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,CAACiB,IAAI,EAAE;IAAEC;EAAe,CAAC,GAAG,CAAC,CAAC,KAAK;IAC/BJ,eAAe,CAAEK,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKF,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOT,SAAS;MACpB;MAEA,OAAOQ,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMT,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDgB,sBAAsB,CAAEI,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTJ,sBAAsB,CAAEI,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACJ,sBAAsB,CAAC,CAAC;EAE5B,MAAMK,aAAa,GAAGpB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAES,mBAAmB,GAAG,CAAC;IAC5CR,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIK,mBAAmB,EACnBV,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAAuB,aAAA,CAACnB,WAAW,CAACoB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCtB,KAAA,CAAAuB,aAAA,CAACxB,YAAY;IAAC2B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC3B,KAAA,CAAAuB,aAAA,CAACzB,eAAe;IAAC8B,OAAO,EAAE;EAAM,GAAEd,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDD,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -0,0 +1,179 @@
+import { AnimatePresence, motion } from 'motion/react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useUuid } from '../../../hooks/uuid';
+import { AccordionContext } from '../../accordion/Accordion';
+import AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';
+import { ListContext } from '../List';
+import ListItemBody from './list-item-body/ListItemBody';
+import ListItemHead from './list-item-head/ListItemHead';
+import { StyledListItem, StyledListItemTooltip } from './ListItem.styles';
+import Tooltip from '../../tooltip/Tooltip';
+import { LIST_ITEM_HTML_TAG } from '../../../constants/list';
+const ListItem = ({
+  backgroundColor,
+  careOfLocationId,
+  children,
+  cornerImage,
+  hoverItem,
+  icons,
+  imageBackground,
+  images,
+  isDefaultOpen,
+  isOpen,
+  isTitleGreyed,
+  leftElements,
+  onClick,
+  onClose,
+  onLongPress,
+  onOpen,
+  rightElements,
+  shouldShowTooltipOnTitleOverflow = false,
+  shouldForceBackground = false,
+  shouldForceBottomLine = false,
+  shouldForceHover = false,
+  shouldHideBottomLine = false,
+  shouldOpenImageOnClick = false,
+  shouldHideImageOrIconBackground,
+  shouldHideIndicator = false,
+  shouldPreventLayoutAnimation = false,
+  shouldRenderClosed = false,
+  shouldShowRoundImageOrIcon,
+  shouldShowSeparatorBelow = false,
+  subtitle,
+  title,
+  titleElement,
+  shouldDisableAnimation = false
+}) => {
+  const {
+    incrementExpandableItemCount,
+    isAnyItemExpandable,
+    isWrapped,
+    openItemUuid,
+    updateOpenItemUuid
+  } = useContext(ListContext);
+  const {
+    isWrapped: isParentAccordionWrapped
+  } = useContext(AccordionContext);
+  const areaProvider = useContext(AreaContext);
+  const isInitialRenderRef = useRef(true);
+  const listItemRef = useRef(null);
+  const uuid = useUuid();
+  const isExpandable = children !== undefined;
+  const isItemOpen = isOpen ?? openItemUuid === uuid;
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [isOpen, onClose, onOpen]);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isItemOpen) {
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
+      }
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
+    }
+  }, [isItemOpen]);
+  const handleHeadClick = useCallback(event => {
+    if (isExpandable) {
+      updateOpenItemUuid(uuid);
+    }
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  }, [isExpandable, onClick, updateOpenItemUuid, uuid]);
+  useEffect(() => {
+    if (isExpandable && !shouldHideIndicator) {
+      // The incrementExpandableItemCount function returns a cleanup
+      // function to decrement expandableItemCount if component unmounts
+      return incrementExpandableItemCount();
+    }
+    return undefined;
+  }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);
+  useEffect(() => {
+    if (isDefaultOpen) {
+      updateOpenItemUuid(uuid, {
+        shouldOnlyOpen: true
+      });
+    }
+  }, [isDefaultOpen, updateOpenItemUuid, uuid]);
+  const isClickable = typeof onClick === 'function' || isExpandable;
+  const headContent = useMemo(() => /*#__PURE__*/React.createElement(ListItemHead, {
+    hoverItem: hoverItem,
+    careOfLocationId: careOfLocationId,
+    cornerImage: cornerImage,
+    icons: icons,
+    imageBackground: imageBackground,
+    images: images,
+    isAnyItemExpandable: isAnyItemExpandable,
+    isExpandable: isExpandable,
+    isOpen: isItemOpen,
+    isTitleGreyed: isTitleGreyed,
+    leftElements: leftElements,
+    onClick: isClickable ? handleHeadClick : undefined,
+    onLongPress: onLongPress,
+    shouldForceHover: shouldForceHover,
+    rightElements: rightElements,
+    shouldHideImageOrIconBackground: shouldHideImageOrIconBackground,
+    shouldHideIndicator: shouldHideIndicator,
+    shouldOpenImageOnClick: shouldOpenImageOnClick,
+    shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
+    subtitle: subtitle,
+    title: title,
+    titleElement: titleElement,
+    setShouldEnableTooltip: setShouldEnableTooltip,
+    shouldDisableAnimation: shouldDisableAnimation
+  }), [careOfLocationId, cornerImage, handleHeadClick, hoverItem, icons, imageBackground, images, isAnyItemExpandable, isClickable, isExpandable, isItemOpen, isTitleGreyed, leftElements, onLongPress, rightElements, shouldForceHover, shouldHideImageOrIconBackground, shouldHideIndicator, shouldOpenImageOnClick, shouldShowRoundImageOrIcon, subtitle, title, titleElement, shouldDisableAnimation]);
+  return /*#__PURE__*/React.createElement(StyledListItem, {
+    as: shouldDisableAnimation ? undefined : motion[LIST_ITEM_HTML_TAG],
+    animate: shouldDisableAnimation ? undefined : {
+      height: 'auto',
+      opacity: 1
+    },
+    className: "beta-chayns-list-item",
+    exit: shouldDisableAnimation ? undefined : {
+      height: 0,
+      opacity: 0
+    },
+    initial: shouldDisableAnimation ? undefined : {
+      height: 0,
+      opacity: 0
+    },
+    key: `list-item-${uuid}`,
+    ref: listItemRef,
+    layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
+    $backgroundColor: backgroundColor,
+    $isClickable: isClickable,
+    $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
+    $isOpen: isItemOpen,
+    $isWrapped: isWrapped,
+    $shouldChangeColor: areaProvider.shouldChangeColor,
+    $shouldForceBackground: shouldForceBackground,
+    $shouldForceBottomLine: shouldForceBottomLine,
+    $shouldHideBottomLine: shouldHideBottomLine,
+    $shouldHideIndicator: shouldHideIndicator,
+    $shouldShowSeparatorBelow: shouldShowSeparatorBelow
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    shouldUseFullWidth: true,
+    isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
+    item: /*#__PURE__*/React.createElement(StyledListItemTooltip, {
+      style: {
+        cursor: 'default'
+      },
+      key: `list-item-tooltip-${uuid}`
+    }, title)
+  }, headContent), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(ListItemBody, {
+    id: uuid,
+    key: `listItemBody-${uuid}`,
+    shouldHideBody: shouldRenderClosed && !isItemOpen
+  }, /*#__PURE__*/React.createElement(AreaContextProvider, null, children))));
+};
+ListItem.displayName = 'ListItem';
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map