@laerdal/life-react-components 1.8.0-dev.6.full → 1.8.0-dev.8.full
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.
|
@@ -86,7 +86,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
86
86
|
* */
|
|
87
87
|
|
|
88
88
|
_react.default.useEffect(function () {
|
|
89
|
-
if (inputRef.current) {
|
|
89
|
+
if (inputRef.current && document.activeElement === inputRef.current) {
|
|
90
90
|
inputRef.current.scrollIntoView({
|
|
91
91
|
block: 'nearest',
|
|
92
92
|
inline: 'nearest'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' | 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' | 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.cjs"}
|
|
@@ -49,7 +49,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
49
49
|
* */
|
|
50
50
|
|
|
51
51
|
React.useEffect(function () {
|
|
52
|
-
if (inputRef.current) {
|
|
52
|
+
if (inputRef.current && document.activeElement === inputRef.current) {
|
|
53
53
|
inputRef.current.scrollIntoView({
|
|
54
54
|
block: 'nearest',
|
|
55
55
|
inline: 'nearest'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' | 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' | 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.js"}
|