@pega/cosmos-react-core 3.0.7 → 3.0.9
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgO7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -156,7 +156,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
|
|
|
156
156
|
// no-op avoids react uncontrolled warning
|
|
157
157
|
onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off',
|
|
158
158
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
159
|
-
autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
|
|
159
|
+
autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps, required: undefined })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
|
|
160
160
|
});
|
|
161
161
|
export default MultiSelectInput;
|
|
162
162
|
//# sourceMappingURL=MultiSelectInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback,\n useMemo,\n useState,\n useEffect,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n const { background } = theme.components.badges.selectable.base;\n const { 'foreground-color': foreground } = theme.base.palette;\n const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n return css`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n\n &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n color: ${theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${theme.base.palette.interactive};\n }\n }\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: 'li[role=\"option\"]',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId, idx) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (selected.length && inputRef.current?.selectionStart === 0) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof HTMLElement &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n role='option'\n id={element.id.toString()}\n status={status}\n onClick={e => {\n const mouseClick = e.detail !== 0;\n\n if (!readOnly && !disabled && !mouseClick) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onRemove={() => {\n if (!readOnly && !disabled) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n }}\n tabIndex='-1'\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n {...restProps}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback,\n useMemo,\n useState,\n useEffect,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n const { background } = theme.components.badges.selectable.base;\n const { 'foreground-color': foreground } = theme.base.palette;\n const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n return css`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n\n &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n color: ${theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${theme.base.palette.interactive};\n }\n }\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: 'li[role=\"option\"]',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId, idx) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (selected.length && inputRef.current?.selectionStart === 0) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof HTMLElement &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n role='option'\n id={element.id.toString()}\n status={status}\n onClick={e => {\n const mouseClick = e.detail !== 0;\n\n if (!readOnly && !disabled && !mouseClick) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onRemove={() => {\n if (!readOnly && !disabled) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n }}\n tabIndex='-1'\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n {...restProps}\n required={undefined}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.9",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|