@chayns-components/core 5.5.61 → 5.5.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/components/combobox/ComboBox.styles.js +1 -1
  2. package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
  3. package/lib/cjs/components/text-area/TextArea.js +9 -6
  4. package/lib/cjs/components/text-area/TextArea.js.map +1 -1
  5. package/lib/esm/components/combobox/ComboBox.styles.js +1 -1
  6. package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
  7. package/lib/esm/components/text-area/TextArea.js +9 -6
  8. package/lib/esm/components/text-area/TextArea.js.map +1 -1
  9. package/package.json +2 -2
package/lib/cjs/components/combobox/ComboBox.styles.js CHANGED
@@ -166,7 +166,7 @@ const StyledComboBoxPrefixAndPlaceholderWrapper = exports.StyledComboBoxPrefixAn
166
166
  ${({
167
167
  $size
168
168
  }) => $size === _ComboBox.ComboBoxSize.MINI && (0, _styledComponents.css)`
169
- padding: 2px 8px;
169
+ padding: 2px;
170
170
  `}
171
171
  `;
172
172
  const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.default.div`
package/lib/cjs/components/combobox/ComboBox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","_ComboBox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","$size","ComboBoxSize","MINI","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px 8px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","_ComboBox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","$size","ComboBoxSize","MINI","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAA+D,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOxD,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC;AAAU,CAAC,KAAK;EACtC,IAAID,mBAAmB,EAAE;IACrB,OAAO,IAAAE,qBAAG;AACtB;AACA;AACA,6BAA6B,OAAOD,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAG,GAAG;AACnF,aAAa;EACL;EAEA,IAAI,OAAOA,SAAS,KAAK,QAAQ,EAAE;IAC/B,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA,6BAA6BD,SAAS;AACtC,aAAa;EACL;EAEA,OAAO,IAAAC,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAaM,MAAMC,oBAAoB,GAAAN,OAAA,CAAAM,oBAAA,GAAGL,yBAAM,CAACC,GAA8B;AACzE;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAY,CAAC,KAAM,CAACA,WAAW,GAAG,SAAS,GAAG,SAAU;AACzE;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEC;AAAM,CAAC,KAAK;EACb,QAAQA,KAAK;IACT,KAAKC,sBAAY,CAACC,IAAI;MAClB,OAAO,IAAAL,qBAAG;AAC1B;AACA;AACA,iBAAiB;IACL,KAAKI,sBAAY,CAACE,KAAK;MACnB,OAAO,IAAAN,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKI,sBAAY,CAACG,MAAM;IACxB;MACI,OAAO,IAAAP,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL;AACA,MAAM,CAAC;EAAEQ,KAAK;EAAEC,gCAAgC;EAAEC;AAAmB,CAAC,KAAK;EACnE,IAAID,gCAAgC,EAAE;IAClC,IAAID,KAAK,CAACG,SAAS,KAAK,MAAM,EAAE;MAC5B,OAAO,IAAAX,qBAAG;AAC1B;AACA;AACA,iBAAiB;IACL;IAEA,OAAO,IAAAA,qBAAG;AACtB;AACA;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,gCACgBQ,KAAK,CAACG,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGF,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACjG,SACS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEI;AAAoB,CAAC,KACtBA,mBAAmB,IACnB,IAAAZ,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa,OAAO;EAAEC;AAAW,CAAC,KAAK;EAC3B,IAAID,OAAO,EAAE;IACT,OAAO,CACHE,2BAAiB,CAACC,MAAM,EACxBD,2BAAiB,CAACE,WAAW,EAC7BF,2BAAiB,CAACG,YAAY,CACjC,CAACC,QAAQ,CAACL,UAAU,CAAC,GAChB,IAAAd,qBAAG;AACrB;AACA;AACA,mBAAmB,GACD,IAAAA,qBAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEoB,QAAQ;EAAElB,WAAW;EAAEM;AAAiC,CAAC,KAC1D,CAACY,QAAQ,IACT,CAAClB,WAAW,IACZ,IAAAF,qBAAG;AACX;AACA,oCAAoCQ,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMa,yBAAyB,GAAA1B,OAAA,CAAA0B,yBAAA,GAAGzB,yBAAM,CAACC,GAAmC;AACnF;AACA,aAAa,CAAC;EAAEW;AAAsC,CAAC,KAAKA,KAAK,CAACc,IAAI;AACtE;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,GAAG,GAAG,CAAE;AAC7E;AACA,MAAM,CAAC;EAAEpB;AAAM,CAAC,KACRA,KAAK,KAAKC,sBAAY,CAACC,IAAI,IAC3B,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMwB,6BAA6B,GAAA7B,OAAA,CAAA6B,6BAAA,GAAG5B,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAMM,MAAM4B,yCAAyC,GAAA9B,OAAA,CAAA8B,yCAAA,GAAG7B,yBAAM,CAACC,GAAmD;AACnH;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM;AAAM,CAAC,KACRA,KAAK,KAAKC,sBAAY,CAACC,IAAI,IAC3B,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAOM,MAAM0B,oBAAoB,GAAA/B,OAAA,CAAA+B,oBAAA,GAAG9B,yBAAM,CAACC,GAA8B;AACzE;AACA,iBAAiB,CAAC;EAAE8B;AAAgB,CAAC,KAAKA,eAAe,IAAI,CAAC;AAC9D;AACA;AACA,MAAM,CAAC;EAAExB;AAAM,CAAC,KACRA,KAAK,KAAKC,sBAAY,CAACC,IAAI,IAC3B,IAAAL,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAM4B,mBAAmB,GAAAjC,OAAA,CAAAiC,mBAAA,GAAGhC,yBAAM,CAACiC,KAAK;AAC/C,aAAa,CAAC;EAAErB;AAAwB,CAAC,KAAKA,KAAK,CAACc,IAAI;AACxD;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMQ,8BAA8B,GAAAnC,OAAA,CAAAmC,8BAAA,GAAGlC,yBAAM,CAACmC,GAAwC;AAC7F;AACA,eAAe,CAAC;EAAEvB;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF,cAAc,CAAC;EAAEI;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AAClF,aAAa,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF;AACA,MAAM,CAAC;EAAEoB;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAhC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAOM,MAAMiC,8BAA8B,GAAAtC,OAAA,CAAAsC,8BAAA,GAAGrC,yBAAM,CAACC,GAAwC;AAC7F;AACA,cAAc,CAAC;EAAEK;AAAY,CAAC,KAAM,CAACA,WAAW,GAAG,SAAS,GAAG,SAAU;AACzE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAM,CAAC,KACRA,KAAK,KAAKC,sBAAY,CAACC,IAAI,IAC3B,IAAAL,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAQM,MAAMkC,yBAAyB,GAAAvC,OAAA,CAAAuC,yBAAA,GAAGtC,yBAAM,CAACC,GAAmC;AACnF;AACA,mBAAmB,CAAC;EAAEsC;AAAsB,CAAC,KACrCA,qBAAqB,GAAG,oCAAoC,GAAG,MAAM;AAC7E,cAAc,CAAC;EAAEjC;AAAY,CAAC,KAAM,CAACA,WAAW,GAAG,SAAS,GAAG,SAAU;AACzE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAM,CAAC,KAAK;EACb,QAAQA,KAAK;IACT,KAAKC,sBAAY,CAACC,IAAI;MAClB,OAAO,IAAAL,qBAAG;AAC1B;AACA;AACA,iBAAiB;IACL,KAAKI,sBAAY,CAACE,KAAK;MACnB,OAAO,IAAAN,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKI,sBAAY,CAACG,MAAM;IACxB;MACI,OAAO,IAAAP,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAOM,MAAMoC,kBAAkB,GAAAzC,OAAA,CAAAyC,kBAAA,GAAGxC,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAU,CAAC,KAAKA,SAAS;AAC7C;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEsC;AAAW,CAAC,KAAKA,UAAU;AAChD,CAAC;AAIM,MAAMC,mBAAmB,GAAA3C,OAAA,CAAA2C,mBAAA,GAAG1C,yBAAM,CAACC,GAAG;AAC7C;AACA,wBAAwB,CAAC;EAAEW;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACvF,kBAAkB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
package/lib/cjs/components/text-area/TextArea.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _reactCompilerRuntime = require("react-compiler-runtime");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
+ var _styledComponents = require("styled-components");
9
10
  var _AreaContextProvider = require("../area-provider/AreaContextProvider");
10
11
  var _Input = require("../input/Input.styles");
11
12
  var _TextArea = require("./TextArea.styles");
@@ -17,7 +18,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
17
18
  "use memo";
18
19
 
19
20
  var _rightElement$props;
20
- const $ = (0, _reactCompilerRuntime.c)(31);
21
+ const $ = (0, _reactCompilerRuntime.c)(32);
21
22
  const {
22
23
  isDisabled,
23
24
  isInvalid,
@@ -37,6 +38,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
37
38
  const minHeight = t2 === undefined ? "41px" : t2;
38
39
  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
39
40
  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
41
+ const theme = (0, _styledComponents.useTheme)();
40
42
  const textareaRef = (0, _react.useRef)(null);
41
43
  (0, _resize.useCursorRepaint)(textareaRef);
42
44
  const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
@@ -111,7 +113,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
111
113
  }
112
114
  const labelPosition = t8;
113
115
  let t9;
114
- if ($[11] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[12] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== value) {
116
+ if ($[11] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[12] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== theme.fontSize || $[30] !== value) {
115
117
  colors === null || colors === void 0 || colors.backgroundColor;
116
118
  colors === null || colors === void 0 || colors.borderColor;
117
119
  t9 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
@@ -138,7 +140,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
138
140
  rows: 1
139
141
  }), /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, {
140
142
  animate: {
141
- fontSize: hasValue ? "9px" : undefined
143
+ fontSize: hasValue ? "9px" : `${Number(theme.fontSize)}px`
142
144
  },
143
145
  initial: false,
144
146
  style: labelPosition,
@@ -171,10 +173,11 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
171
173
  $[26] = shouldChangeColor;
172
174
  $[27] = shouldShowBorder;
173
175
  $[28] = shouldShowKeyboardHighlighting;
174
- $[29] = value;
175
- $[30] = t9;
176
+ $[29] = theme.fontSize;
177
+ $[30] = value;
178
+ $[31] = t9;
176
179
  } else {
177
- t9 = $[30];
180
+ t9 = $[31];
178
181
  }
179
182
  return t9;
180
183
  });
package/lib/cjs/components/text-area/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_AreaContextProvider","_Input","_TextArea","_resize","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","t3","isEnabled","useFocusRingPortal","t4","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t5","Symbol","for","useImperativeHandle","t6","t7","length","useEffect","hasValue","t8","bottom","right","top","left","labelPosition","t9","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","transition","type","duration","StyledTextAreaLabel","StyledInputRightElement","$isInline","StyledRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledRightElementWrapper,\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n useFocusRingPortal(textareaRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>\n {rightElement}\n </StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n shouldShowKeyboardHighlighting,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_AreaContextProvider","_Input","_TextArea","_resize","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","theme","useTheme","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","t3","isEnabled","useFocusRingPortal","t4","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t5","Symbol","for","useImperativeHandle","t6","t7","length","useEffect","hasValue","t8","bottom","right","top","left","labelPosition","t9","borderColor","fontSize","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","Number","initial","transition","type","duration","StyledTextAreaLabel","StyledInputRightElement","$isInline","StyledRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledRightElementWrapper,\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n const theme = useTheme() as Theme;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n useFocusRingPortal(textareaRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{\n fontSize: hasValue ? '9px' : `${Number(theme.fontSize)}px`,\n }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>\n {rightElement}\n </StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n shouldShowKeyboardHighlighting,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n theme.fontSize,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/combobox/ComboBox.styles.js CHANGED
@@ -159,7 +159,7 @@ export const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`
159
159
  ${({
160
160
  $size
161
161
  }) => $size === ComboBoxSize.MINI && css`
162
- padding: 2px 8px;
162
+ padding: 2px;
163
163
  `}
164
164
  `;
165
165
  export const StyledComboBoxPrefix = styled.div`
package/lib/esm/components/combobox/ComboBox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","MINI","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px 8px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","MINI","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n min-width: 0;\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) => {\n if ($shouldUseFullWidth) {\n return css`\n width: 100%;\n max-width: 100%;\n min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n `;\n }\n\n if (typeof $minWidth === 'number') {\n return css`\n width: fit-content;\n max-width: 100%;\n min-width: ${$minWidth}px;\n `;\n }\n\n return css`\n width: fit-content;\n max-width: 100%;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n min-width: 0;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n box-sizing: border-box;\n height: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 34px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n min-height: 42px;\n `;\n }\n }}\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.3);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']\n };\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{\n $shouldReduceOpacity: boolean;\n $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n `}\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\ntype StyledComboBoxPrefixAndPlaceholderWrapperProps = {\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div<StyledComboBoxPrefixAndPlaceholderWrapperProps>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n padding: 2px;\n `}\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n font-size: 13px;\n padding-right: 4px;\n `}\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n font: inherit;\n width: 100%;\n min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = {\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) =>\n $size === ComboBoxSize.MINI &&\n css`\n height: 26px;\n width: 28px;\n `}\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n $shouldShowBorderLeft: boolean;\n $isDisabled: boolean;\n $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 40px;\n\n ${({ $size }) => {\n switch ($size) {\n case ComboBoxSize.MINI:\n return css`\n height: 26px;\n width: 28px;\n `;\n case ComboBoxSize.SMALL:\n return css`\n height: 30px;\n `;\n case ComboBoxSize.NORMAL:\n default:\n return css`\n height: 40px;\n `;\n }\n }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n min-width: ${({ $minWidth }) => $minWidth}px;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/text-area/TextArea.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { c as _c } from "react-compiler-runtime";
2
2
  import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
+ import { useTheme } from 'styled-components';
3
4
  import { AreaContext } from '../area-provider/AreaContextProvider';
4
5
  import { StyledInputRightElement } from '../input/Input.styles';
5
6
  import { StyledRightElementWrapper, StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
@@ -9,7 +10,7 @@ import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighli
9
10
  const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
10
11
  "use memo";
11
12
 
12
- const $ = _c(31);
13
+ const $ = _c(32);
13
14
  const {
14
15
  isDisabled,
15
16
  isInvalid,
@@ -29,6 +30,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
29
30
  const minHeight = t2 === undefined ? "41px" : t2;
30
31
  const [isOverflowing, setIsOverflowing] = useState(false);
31
32
  const areaProvider = useContext(AreaContext);
33
+ const theme = useTheme();
32
34
  const textareaRef = useRef(null);
33
35
  useCursorRepaint(textareaRef);
34
36
  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
@@ -103,7 +105,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
103
105
  }
104
106
  const labelPosition = t8;
105
107
  let t9;
106
- if ($[11] !== colors?.backgroundColor || $[12] !== colors?.borderColor || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== value) {
108
+ if ($[11] !== colors?.backgroundColor || $[12] !== colors?.borderColor || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== theme.fontSize || $[30] !== value) {
107
109
  colors?.backgroundColor;
108
110
  colors?.borderColor;
109
111
  t9 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
@@ -130,7 +132,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
130
132
  rows: 1
131
133
  }), /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, {
132
134
  animate: {
133
- fontSize: hasValue ? "9px" : undefined
135
+ fontSize: hasValue ? "9px" : `${Number(theme.fontSize)}px`
134
136
  },
135
137
  initial: false,
136
138
  style: labelPosition,
@@ -163,10 +165,11 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
163
165
  $[26] = shouldChangeColor;
164
166
  $[27] = shouldShowBorder;
165
167
  $[28] = shouldShowKeyboardHighlighting;
166
- $[29] = value;
167
- $[30] = t9;
168
+ $[29] = theme.fontSize;
169
+ $[30] = value;
170
+ $[31] = t9;
168
171
  } else {
169
- t9 = $[30];
172
+ t9 = $[31];
170
173
  }
171
174
  return t9;
172
175
  });
package/lib/esm/components/text-area/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledRightElementWrapper","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","useFocusRingPortal","useKeyboardFocusHighlighting","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","t3","isEnabled","t4","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t5","Symbol","for","t6","t7","length","hasValue","t8","bottom","right","top","left","labelPosition","t9","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","transition","type","duration","$isInline","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledRightElementWrapper,\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n useFocusRingPortal(textareaRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>\n {rightElement}\n </StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n shouldShowKeyboardHighlighting,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","AreaContext","StyledInputRightElement","StyledRightElementWrapper","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","useFocusRingPortal","useKeyboardFocusHighlighting","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","areaProvider","theme","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","t3","isEnabled","t4","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t5","Symbol","for","t6","t7","length","hasValue","t8","bottom","right","top","left","labelPosition","t9","borderColor","fontSize","createElement","$backgroundColor","$borderColor","className","rows","animate","Number","initial","transition","type","duration","$isInline","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledRightElementWrapper,\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n const theme = useTheme() as Theme;\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n useFocusRingPortal(textareaRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{\n fontSize: hasValue ? '9px' : `${Number(theme.fontSize)}px`,\n }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>\n {rightElement}\n </StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n shouldShowKeyboardHighlighting,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n theme.fontSize,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.5.61",
3
+ "version": "5.5.63",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -93,5 +93,5 @@
93
93
  "publishConfig": {
94
94
  "access": "public"
95
95
  },
96
- "gitHead": "88117c0261735de658a839465f22b0dedea0f4aa"
96
+ "gitHead": "8f47cc5013a666ba1e67c9d7e0a0cdd5e40cefee"
97
97
  }