@pega/cosmos-react-core 3.0.0-dev.23.2 → 3.0.0-dev.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +8 -2
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationList.js +1 -1
- package/lib/components/AppShell/NavigationList.js.map +1 -1
- package/lib/components/AppShell/index.d.ts +0 -1
- package/lib/components/AppShell/index.d.ts.map +1 -1
- package/lib/components/AppShell/index.js +0 -1
- package/lib/components/AppShell/index.js.map +1 -1
- package/lib/components/Badges/Keyboard.d.ts.map +1 -1
- package/lib/components/Badges/Keyboard.js +3 -1
- package/lib/components/Badges/Keyboard.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +5 -2
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.d.ts +5 -1
- package/lib/components/ComboBox/ComboBox.types.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.js.map +1 -1
- package/lib/components/HTML/HTML.d.ts.map +1 -1
- package/lib/components/HTML/HTML.js +1 -0
- package/lib/components/HTML/HTML.js.map +1 -1
- package/lib/components/Link/Link.d.ts.map +1 -1
- package/lib/components/Link/Link.js +38 -24
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +42 -52
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.types.d.ts +13 -10
- package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.js +1 -0
- package/lib/components/MultiStepForm/FormProgress.styles.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +1 -0
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/SkipLinks/SkipLinks.d.ts +15 -0
- package/lib/components/SkipLinks/SkipLinks.d.ts.map +1 -0
- package/lib/components/{AppShell/SkipNavigation.js → SkipLinks/SkipLinks.js} +23 -19
- package/lib/components/SkipLinks/SkipLinks.js.map +1 -0
- package/lib/components/SkipLinks/index.d.ts +4 -0
- package/lib/components/SkipLinks/index.d.ts.map +1 -0
- package/lib/components/SkipLinks/index.js +3 -0
- package/lib/components/SkipLinks/index.js.map +1 -0
- package/lib/hooks/useFocusWithin.d.ts.map +1 -1
- package/lib/hooks/useFocusWithin.js +0 -8
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +7 -3
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +7 -3
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +7 -3
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +7 -3
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/lib/components/AppShell/SkipNavigation.d.ts +0 -4
- package/lib/components/AppShell/SkipNavigation.d.ts.map +0 -1
- package/lib/components/AppShell/SkipNavigation.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA
|
|
1
|
+
{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\n\nimport { type Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n\n ::after {\n filter: none;\n }\n\n & > ${StyledText} {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'border-line': borderColor }\n }\n } = theme;\n\n return css`\n position: absolute;\n width: 100%;\n height: 0.0625rem;\n background: ${borderColor};\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h4fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n return css`\n display: block;\n position: relative;\n z-index: 1;\n ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n border-radius: 100%;\n background: ${primaryBackground};\n border: 0.0625rem solid ${borderColor};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n ${current &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n ${prior &&\n css`\n border-color: ${interactive};\n `}\n\n ::after {\n content: '';\n position: absolute;\n top: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n ${size(buttonSize)}\n\n @media (pointer: coarse) {\n top: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n left: ${depth === 1\n ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n\n &:first-child::after {\n left: 0;\n }\n\n &:last-child::after {\n left: unset;\n right: 0;\n }\n\n :focus {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkB1C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkB1C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAgOnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -78,6 +78,7 @@ const SearchInput = forwardRef((props, ref) => {
|
|
|
78
78
|
}
|
|
79
79
|
} }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
|
|
80
80
|
onSearchChange?.('');
|
|
81
|
+
inputRef.current?.focus();
|
|
81
82
|
}, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), resultsPopover && (searchResultItems || loading) && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
|
|
82
83
|
{
|
|
83
84
|
name: 'flip',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n forwardRef,\n useState,\n ChangeEvent,\n useCallback,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\n\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n /**\n * Placeholder text. The default value is a locale translation of 'Search…'\n * @default \"Search…\"\n */\n placeholder?: FormControlProps['placeholder'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: FormControlProps['value'];\n /** Called when the SearchInput value changes. */\n onSearchChange?: (value: string) => void;\n /**\n * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n */\n onSearchSubmit?: (value: string) => void;\n /** A list of user selectable scopes to filter search with. */\n filters?: string[];\n /** The selected scope filter on initial render. */\n defaultFilter?: string;\n /** Called when user changes scope filter. */\n onFilterChange?: (value: string) => void;\n /** A list of matching results presented in the input's dropdown menu. */\n searchResults?: SearchResult[];\n /** A list of recent searches presented in the input's dropdown menu. */\n recentSearches?: RecentSearch[];\n /** Places the menu into an indeterminate loading state. */\n loading?: boolean;\n /** Prop passed to the advanced search page link. */\n advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n /** Aria label for search input, used by screen readers. */\n searchInputAriaLabel?: string;\n /**\n * Boolean for determining for whether the search results will render in a popover.\n * @default true\n */\n resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading,\n advancedSearchLink,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n resultsPopover = true,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef(ref);\n const filterRef = useRef<HTMLButtonElement | HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n const completeFilters = [t('all'), ...(filters ?? [])];\n const hasFilters = completeFilters.length > 1;\n const [downPressed, setDownPressed] = useState(false);\n const hasSearchResults = !!(searchResults && searchResults.length);\n const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n undefined\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearchSubmit?.(value);\n }\n if (e.key === 'ArrowDown') {\n setDownPressed(true);\n }\n },\n [onSearchSubmit, value]\n );\n\n useOuterEvent('click', [filterRef], () => {\n setFilterMenuOpen(false);\n });\n\n useOuterEvent('click', [searchResultsRef, inputRef], () => {\n setSearchMenuOpen(false);\n });\n\n useEffect(() => {\n setDownPressed(false);\n }, [value]);\n\n useEffect(() => {\n let items: MenuItemProps[] | undefined = [];\n if (hasSearchResults && value) {\n items = searchResults;\n } else if (hasRecentSearches && !value) {\n items = recentSearches;\n } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n items = undefined;\n }\n setSearchResultItems(items);\n }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n const searchMenu = (\n <Menu\n as={StyledSearchMenu}\n header={\n recentSearches && !value ? (\n <Text variant='secondary'>{t('recent_searches')}</Text>\n ) : undefined\n }\n mode='action'\n items={searchResultItems ?? []}\n loading={hasRecentSearches && !value ? false : loading}\n footer={\n advancedSearchLink ? (\n <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n ) : undefined\n }\n accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n focusControlEl={(downPressed && inputRef.current) || undefined}\n focusElOnClose\n />\n );\n\n return (\n <>\n <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n <Flex\n as={StyledSearchButton}\n ref={filterRef}\n forwardedAs={hasFilters ? undefined : 'div'}\n container={{\n justify: 'center',\n alignItems: 'center',\n gap: selectedFilter ? 0.5 : undefined\n }}\n onClick={() => {\n if (hasFilters) {\n setFilterMenuOpen(true);\n } else {\n inputRef.current?.focus();\n }\n }}\n onBlur={() => {\n setFilterMenuOpen(false);\n }}\n decoupled={hasFilters}\n aria-label={hasFilters ? t('select_search_filter') : undefined}\n >\n <Icon name='search' />\n {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n {hasFilters && <Icon name='arrow-micro-down' />}\n </Flex>\n <StyledSearchTextInput\n ref={inputRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onFocus={() => setSearchMenuOpen(true)}\n decoupled={hasFilters}\n onBlur={() => {\n setDownPressed(false);\n if (!advancedSearchLink) {\n setSearchMenuOpen(false);\n }\n }}\n />\n {value && (\n <StyledCancelButton\n icon\n onClick={() => {\n onSearchChange?.('');\n }}\n variant='text'\n tabIndex={-1}\n >\n <Icon name='times' />\n </StyledCancelButton>\n )}\n </Flex>\n {resultsPopover && (searchResultItems || loading) && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n onBlur={() => {\n setSearchMenuOpen(false);\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n {!resultsPopover && (searchResultItems || loading) && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n {hasFilters ? (\n <Popover\n as={StyledFiltersPopover}\n target={filterRef.current}\n show={filterMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n options: {\n mainAxis: false,\n altAxis: true\n }\n }\n ]}\n >\n <Menu\n mode='single-select'\n items={completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter\n }))}\n onItemClick={filter => {\n setSelectedFilter(filter === t('all') ? '' : filter);\n onFilterChange?.(filter);\n }}\n focusControlEl={filterRef.current ?? undefined}\n />\n </Popover>\n ) : undefined}\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n forwardRef,\n useState,\n ChangeEvent,\n useCallback,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useOuterEvent } from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\n\nimport {\n StyledCancelButton,\n StyledFiltersPopover,\n StyledResultsPopover,\n StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\n StyledSearchResultsContainer,\n StyledSearchTextInput\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n /**\n * Placeholder text. The default value is a locale translation of 'Search…'\n * @default \"Search…\"\n */\n placeholder?: FormControlProps['placeholder'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: FormControlProps['value'];\n /** Called when the SearchInput value changes. */\n onSearchChange?: (value: string) => void;\n /**\n * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n */\n onSearchSubmit?: (value: string) => void;\n /** A list of user selectable scopes to filter search with. */\n filters?: string[];\n /** The selected scope filter on initial render. */\n defaultFilter?: string;\n /** Called when user changes scope filter. */\n onFilterChange?: (value: string) => void;\n /** A list of matching results presented in the input's dropdown menu. */\n searchResults?: SearchResult[];\n /** A list of recent searches presented in the input's dropdown menu. */\n recentSearches?: RecentSearch[];\n /** Places the menu into an indeterminate loading state. */\n loading?: boolean;\n /** Prop passed to the advanced search page link. */\n advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n /** Aria label for search input, used by screen readers. */\n searchInputAriaLabel?: string;\n /**\n * Boolean for determining for whether the search results will render in a popover.\n * @default true\n */\n resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n const t = useI18n();\n\n const {\n value = '',\n defaultFilter,\n filters,\n onFilterChange,\n searchResults,\n recentSearches,\n loading,\n advancedSearchLink,\n placeholder = t('search_placeholder_default'),\n onSearchChange,\n onSearchSubmit,\n searchInputAriaLabel,\n resultsPopover = true,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef(ref);\n const filterRef = useRef<HTMLButtonElement | HTMLDivElement>(null);\n const searchResultsRef = useRef<HTMLDivElement>(null);\n\n const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n\n const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n const completeFilters = [t('all'), ...(filters ?? [])];\n const hasFilters = completeFilters.length > 1;\n const [downPressed, setDownPressed] = useState(false);\n const hasSearchResults = !!(searchResults && searchResults.length);\n const hasRecentSearches = !!(recentSearches && recentSearches.length);\n\n const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n undefined\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearchSubmit?.(value);\n }\n if (e.key === 'ArrowDown') {\n setDownPressed(true);\n }\n },\n [onSearchSubmit, value]\n );\n\n useOuterEvent('click', [filterRef], () => {\n setFilterMenuOpen(false);\n });\n\n useOuterEvent('click', [searchResultsRef, inputRef], () => {\n setSearchMenuOpen(false);\n });\n\n useEffect(() => {\n setDownPressed(false);\n }, [value]);\n\n useEffect(() => {\n let items: MenuItemProps[] | undefined = [];\n if (hasSearchResults && value) {\n items = searchResults;\n } else if (hasRecentSearches && !value) {\n items = recentSearches;\n } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n items = undefined;\n }\n setSearchResultItems(items);\n }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n const searchMenu = (\n <Menu\n as={StyledSearchMenu}\n header={\n recentSearches && !value ? (\n <Text variant='secondary'>{t('recent_searches')}</Text>\n ) : undefined\n }\n mode='action'\n items={searchResultItems ?? []}\n loading={hasRecentSearches && !value ? false : loading}\n footer={\n advancedSearchLink ? (\n <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n ) : undefined\n }\n accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n focusControlEl={(downPressed && inputRef.current) || undefined}\n focusElOnClose\n />\n );\n\n return (\n <>\n <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n <Flex\n as={StyledSearchButton}\n ref={filterRef}\n forwardedAs={hasFilters ? undefined : 'div'}\n container={{\n justify: 'center',\n alignItems: 'center',\n gap: selectedFilter ? 0.5 : undefined\n }}\n onClick={() => {\n if (hasFilters) {\n setFilterMenuOpen(true);\n } else {\n inputRef.current?.focus();\n }\n }}\n onBlur={() => {\n setFilterMenuOpen(false);\n }}\n decoupled={hasFilters}\n aria-label={hasFilters ? t('select_search_filter') : undefined}\n >\n <Icon name='search' />\n {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n {hasFilters && <Icon name='arrow-micro-down' />}\n </Flex>\n <StyledSearchTextInput\n ref={inputRef}\n type='search'\n aria-label={searchInputAriaLabel}\n placeholder={placeholder}\n {...restProps}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onFocus={() => setSearchMenuOpen(true)}\n decoupled={hasFilters}\n onBlur={() => {\n setDownPressed(false);\n if (!advancedSearchLink) {\n setSearchMenuOpen(false);\n }\n }}\n />\n {value && (\n <StyledCancelButton\n icon\n onClick={() => {\n onSearchChange?.('');\n inputRef.current?.focus();\n }}\n variant='text'\n tabIndex={-1}\n >\n <Icon name='times' />\n </StyledCancelButton>\n )}\n </Flex>\n {resultsPopover && (searchResultItems || loading) && (\n <Popover\n as={StyledResultsPopover}\n target={inputRef.current}\n show={searchMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n onBlur={() => {\n setSearchMenuOpen(false);\n }}\n ref={searchResultsRef}\n >\n {searchMenu}\n </Popover>\n )}\n {!resultsPopover && (searchResultItems || loading) && (\n <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n )}\n {hasFilters ? (\n <Popover\n as={StyledFiltersPopover}\n target={filterRef.current}\n show={filterMenuOpen}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n {\n name: 'preventOverflow',\n options: {\n mainAxis: false,\n altAxis: true\n }\n }\n ]}\n >\n <Menu\n mode='single-select'\n items={completeFilters.map(filter => ({\n primary: filter,\n id: filter,\n selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter\n }))}\n onItemClick={filter => {\n setSelectedFilter(filter === t('all') ? '' : filter);\n onFilterChange?.(filter);\n }}\n focusControlEl={filterRef.current ?? undefined}\n />\n </Popover>\n ) : undefined}\n </>\n );\n }\n);\n\nexport default SearchInput;\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
interface SkipLink {
|
|
3
|
+
label: string;
|
|
4
|
+
target: {
|
|
5
|
+
ariaLabel: string;
|
|
6
|
+
selector: string;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
export interface SkipLinksProps {
|
|
10
|
+
items: SkipLink[];
|
|
11
|
+
}
|
|
12
|
+
export declare const StyledSkipLinks: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
declare const SkipLinks: FC<SkipLinksProps>;
|
|
14
|
+
export default SkipLinks;
|
|
15
|
+
//# sourceMappingURL=SkipLinks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAS9C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,8TAuB1B,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgEhC,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -3,10 +3,10 @@ import { memo, useCallback } from 'react';
|
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { hideVisually } from 'polished';
|
|
5
5
|
import { defaultThemeProp } from '../../theme';
|
|
6
|
-
import {
|
|
7
|
-
import Button from '../Button';
|
|
6
|
+
import Button, { StyledButton } from '../Button';
|
|
8
7
|
import Popover from '../Popover';
|
|
9
|
-
|
|
8
|
+
import Flex from '../Flex';
|
|
9
|
+
export const StyledSkipLinks = styled(Popover)(props => {
|
|
10
10
|
const { theme: { base: { 'z-index': zIndices, spacing } } } = props;
|
|
11
11
|
const z = Math.max(...Object.values(zIndices)) + 1;
|
|
12
12
|
return css `
|
|
@@ -14,26 +14,29 @@ export const StyledSkipNavigation = styled(Popover)(props => {
|
|
|
14
14
|
z-index: ${z};
|
|
15
15
|
padding: ${spacing};
|
|
16
16
|
|
|
17
|
+
& > ${StyledButton} {
|
|
18
|
+
margin: 0;
|
|
19
|
+
display: block;
|
|
20
|
+
}
|
|
21
|
+
|
|
17
22
|
&:not(:focus-within) {
|
|
18
23
|
${hideVisually}
|
|
19
24
|
}
|
|
20
25
|
`;
|
|
21
26
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const main = document.querySelector('main');
|
|
28
|
-
const container = main ?? document;
|
|
27
|
+
StyledSkipLinks.defaultProps = defaultThemeProp;
|
|
28
|
+
const SkipLinks = memo(({ items }) => {
|
|
29
|
+
const onClick = useCallback((item) => {
|
|
30
|
+
const selectedEl = document.querySelector(item.target.selector);
|
|
31
|
+
const container = selectedEl ?? document;
|
|
29
32
|
const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el ?? container.querySelector(tag), null);
|
|
30
|
-
const target = heading ??
|
|
33
|
+
const target = heading ?? selectedEl;
|
|
31
34
|
if (!target)
|
|
32
35
|
return;
|
|
33
|
-
if (target ===
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
if (target === selectedEl && !selectedEl.hasAttribute('aria-label')) {
|
|
37
|
+
selectedEl.setAttribute('aria-label', item.target.ariaLabel);
|
|
38
|
+
selectedEl.addEventListener('focusout', () => {
|
|
39
|
+
selectedEl.removeAttribute('aria-label');
|
|
37
40
|
}, { once: true });
|
|
38
41
|
}
|
|
39
42
|
if (target.hasAttribute('tabindex')) {
|
|
@@ -46,8 +49,8 @@ export default memo(() => {
|
|
|
46
49
|
target.removeAttribute('tabindex');
|
|
47
50
|
}, { once: true });
|
|
48
51
|
}
|
|
49
|
-
}, [
|
|
50
|
-
return (_jsx(
|
|
52
|
+
}, []);
|
|
53
|
+
return (_jsx(Flex, { as: StyledSkipLinks, container: { gap: 0.5, direction: 'column' }, show: true, placement: 'bottom-end', target: {
|
|
51
54
|
getBoundingClientRect: () => ({
|
|
52
55
|
height: 0,
|
|
53
56
|
width: 0,
|
|
@@ -58,6 +61,7 @@ export default memo(() => {
|
|
|
58
61
|
left: 24,
|
|
59
62
|
right: 24
|
|
60
63
|
})
|
|
61
|
-
}, children: _jsx(Button, { variant: 'link', onClick: onClick, children:
|
|
64
|
+
}, children: items.map(item => (_jsx(Button, { variant: 'link', onClick: () => onClick(item), children: item.label }, item.label))) }));
|
|
62
65
|
});
|
|
63
|
-
|
|
66
|
+
export default SkipLinks;
|
|
67
|
+
//# sourceMappingURL=SkipLinks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkipLinks.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, memo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport Popover from '../Popover';\nimport Flex from '../Flex';\n\ninterface SkipLink {\n label: string;\n target: { ariaLabel: string; selector: string };\n}\n\nexport interface SkipLinksProps {\n items: SkipLink[];\n}\n\nexport const StyledSkipLinks = styled(Popover)(props => {\n const {\n theme: {\n base: { 'z-index': zIndices, spacing }\n }\n } = props;\n\n const z = Math.max(...Object.values(zIndices)) + 1;\n\n return css`\n position: fixed;\n z-index: ${z};\n padding: ${spacing};\n\n & > ${StyledButton} {\n margin: 0;\n display: block;\n }\n\n &:not(:focus-within) {\n ${hideVisually}\n }\n `;\n});\n\nStyledSkipLinks.defaultProps = defaultThemeProp;\n\nconst SkipLinks: FC<SkipLinksProps> = memo(({ items }: SkipLinksProps) => {\n const onClick = useCallback((item: SkipLink) => {\n const selectedEl = document.querySelector(item.target.selector) as HTMLElement;\n const container = selectedEl ?? document;\n\n const heading = (\n ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n ).reduce<HTMLHeadingElement | null>((el, tag) => el ?? container.querySelector(tag), null);\n\n const target = heading ?? selectedEl;\n if (!target) return;\n\n if (target === selectedEl && !selectedEl.hasAttribute('aria-label')) {\n selectedEl.setAttribute('aria-label', item.target.ariaLabel);\n selectedEl.addEventListener(\n 'focusout',\n () => {\n selectedEl.removeAttribute('aria-label');\n },\n { once: true }\n );\n }\n\n if (target.hasAttribute('tabindex')) {\n target.focus();\n } else {\n target.setAttribute('tabindex', '-1');\n target.focus();\n target.addEventListener(\n 'focusout',\n () => {\n target.removeAttribute('tabindex');\n },\n { once: true }\n );\n }\n }, []);\n\n return (\n <Flex\n as={StyledSkipLinks}\n container={{ gap: 0.5, direction: 'column' }}\n show\n placement='bottom-end'\n target={{\n getBoundingClientRect: () => ({\n height: 0,\n width: 0,\n x: 24,\n y: 24,\n top: 24,\n bottom: 24,\n left: 24,\n right: 24\n })\n }}\n >\n {items.map(item => (\n <Button variant='link' key={item.label} onClick={() => onClick(item)}>\n {item.label}\n </Button>\n ))}\n </Flex>\n );\n});\n\nexport default SkipLinks;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SkipLinks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './SkipLinks';\nexport { StyledSkipLinks } from './SkipLinks';\nexport { SkipLinksProps } from './SkipLinks';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA8EF,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
2
2
|
import { normalizeElements } from '../utils';
|
|
3
|
-
import useOuterEvent from './useOuterEvent';
|
|
4
3
|
/** Hook for properly handling focus state of children components.
|
|
5
4
|
* @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });
|
|
6
5
|
* @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.
|
|
@@ -45,13 +44,6 @@ const useFocusWithin = (els, onFocusChange) => {
|
|
|
45
44
|
focusedElRef.current = targetEl;
|
|
46
45
|
}
|
|
47
46
|
}, [hasFocus, onFocusChange]);
|
|
48
|
-
useOuterEvent('mouseup', els, useCallback(() => {
|
|
49
|
-
if (hasFocus) {
|
|
50
|
-
setFocus(false);
|
|
51
|
-
onFocusChange?.(false, focusedElRef.current);
|
|
52
|
-
focusedElRef.current = null;
|
|
53
|
-
}
|
|
54
|
-
}, [onFocusChange, hasFocus]));
|
|
55
47
|
useEffect(() => {
|
|
56
48
|
const elements = normalizeElements(els);
|
|
57
49
|
elements.forEach(el => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C
|
|
1
|
+
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | null>(null);\n const blurTimerRef = useRef<number>();\n\n const elsRef = useRef(els);\n elsRef.current = els;\n\n const onBlur = useCallback(\n ({ relatedTarget }: FocusEvent) => {\n if (!hasFocus) return;\n\n const elements = normalizeElements(elsRef.current);\n\n if (relatedTarget instanceof Node) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n clearTimeout(blurTimerRef.current);\n blurTimerRef.current = setTimeout(() => {\n if (\n !elements.some(el => {\n return el?.contains(document.activeElement);\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n });\n },\n [hasFocus, onFocusChange]\n );\n\n const onFocus = useCallback(\n ({ currentTarget }: FocusEvent) => {\n clearTimeout(blurTimerRef.current);\n\n if (!hasFocus) {\n setFocus(true);\n const targetEl = currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = normalizeElements(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n // Clear timeout when component un-mounts.\n useEffect(\n () => () => {\n clearTimeout(blurTimerRef.current);\n },\n []\n );\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -90,6 +90,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
90
90
|
current: string;
|
|
91
91
|
not_started: string;
|
|
92
92
|
empty_value: string;
|
|
93
|
+
delivered: string;
|
|
94
|
+
sent: string;
|
|
93
95
|
day_placeholder: string;
|
|
94
96
|
month_placeholder: string;
|
|
95
97
|
year_placeholder: string;
|
|
@@ -138,7 +140,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
138
140
|
pagination_next: string;
|
|
139
141
|
pagination_prev: string;
|
|
140
142
|
x_of_y: string;
|
|
141
|
-
|
|
143
|
+
preview_link_instruction: string;
|
|
142
144
|
go_to_main_content: string;
|
|
143
145
|
main_content: string;
|
|
144
146
|
app_shell_create: string;
|
|
@@ -736,14 +738,16 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
736
738
|
clear_object_summary: string;
|
|
737
739
|
create_in_new_tab: string;
|
|
738
740
|
expression_editor: string;
|
|
741
|
+
output_parameters: string;
|
|
742
|
+
input_parameters: string;
|
|
739
743
|
app_header_notifications_empty: string;
|
|
740
744
|
app_header_notifications_loading: string;
|
|
741
745
|
open_app_header_notifications: string;
|
|
742
746
|
open_app_header_drawer: string;
|
|
747
|
+
preview_frame: string;
|
|
743
748
|
open_in_new_window_text: string;
|
|
744
749
|
more_options: string;
|
|
745
|
-
|
|
746
|
-
expand_debug_tools: string;
|
|
750
|
+
debug_tools: string;
|
|
747
751
|
}>>;
|
|
748
752
|
export default useI18n;
|
|
749
753
|
//# sourceMappingURL=useI18n.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -86,6 +86,8 @@ declare const _default: {
|
|
|
86
86
|
current: string;
|
|
87
87
|
not_started: string;
|
|
88
88
|
empty_value: string;
|
|
89
|
+
delivered: string;
|
|
90
|
+
sent: string;
|
|
89
91
|
day_placeholder: string;
|
|
90
92
|
month_placeholder: string;
|
|
91
93
|
year_placeholder: string;
|
|
@@ -134,7 +136,7 @@ declare const _default: {
|
|
|
134
136
|
pagination_next: string;
|
|
135
137
|
pagination_prev: string;
|
|
136
138
|
x_of_y: string;
|
|
137
|
-
|
|
139
|
+
preview_link_instruction: string;
|
|
138
140
|
go_to_main_content: string;
|
|
139
141
|
main_content: string;
|
|
140
142
|
app_shell_create: string;
|
|
@@ -732,14 +734,16 @@ declare const _default: {
|
|
|
732
734
|
clear_object_summary: string;
|
|
733
735
|
create_in_new_tab: string;
|
|
734
736
|
expression_editor: string;
|
|
737
|
+
output_parameters: string;
|
|
738
|
+
input_parameters: string;
|
|
735
739
|
app_header_notifications_empty: string;
|
|
736
740
|
app_header_notifications_loading: string;
|
|
737
741
|
open_app_header_notifications: string;
|
|
738
742
|
open_app_header_drawer: string;
|
|
743
|
+
preview_frame: string;
|
|
739
744
|
open_in_new_window_text: string;
|
|
740
745
|
more_options: string;
|
|
741
|
-
|
|
742
|
-
expand_debug_tools: string;
|
|
746
|
+
debug_tools: string;
|
|
743
747
|
};
|
|
744
748
|
export default _default;
|
|
745
749
|
//# sourceMappingURL=default.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAu2BE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -94,6 +94,8 @@ export default {
|
|
|
94
94
|
current: 'Current',
|
|
95
95
|
not_started: 'Not started',
|
|
96
96
|
empty_value: 'Empty value',
|
|
97
|
+
delivered: 'Delivered',
|
|
98
|
+
sent: 'Sent',
|
|
97
99
|
/* Date and time */
|
|
98
100
|
day_placeholder: 'DD',
|
|
99
101
|
month_placeholder: 'MM',
|
|
@@ -150,7 +152,7 @@ export default {
|
|
|
150
152
|
// {pkg}:{ComponentDir} entries
|
|
151
153
|
// -----------------------------------------------------------------------------
|
|
152
154
|
/* core:Link */
|
|
153
|
-
|
|
155
|
+
preview_link_instruction: 'Press {0} and p to open this link in a preview.',
|
|
154
156
|
/* core:SkipLinks */
|
|
155
157
|
go_to_main_content: 'Go to main content',
|
|
156
158
|
main_content: 'Main content',
|
|
@@ -790,15 +792,17 @@ export default {
|
|
|
790
792
|
create_in_new_tab: 'Create new, opens in new tab',
|
|
791
793
|
/* build:ExpressionBuilder */
|
|
792
794
|
expression_editor: 'Expression editor',
|
|
795
|
+
output_parameters: 'Output parameters',
|
|
796
|
+
input_parameters: 'Input parameters',
|
|
793
797
|
/* wss:AppHeader */
|
|
794
798
|
app_header_notifications_empty: 'No notifications',
|
|
795
799
|
app_header_notifications_loading: 'Loading notifications',
|
|
796
800
|
open_app_header_notifications: 'Open notifications',
|
|
797
801
|
open_app_header_drawer: 'Open navigation menu',
|
|
798
802
|
/* tools: PreviewShell */
|
|
803
|
+
preview_frame: 'Preview frame',
|
|
799
804
|
open_in_new_window_text: 'Open in new window',
|
|
800
805
|
more_options: 'More options',
|
|
801
|
-
|
|
802
|
-
expand_debug_tools: 'Expand debug tools'
|
|
806
|
+
debug_tools: 'debug tools'
|
|
803
807
|
};
|
|
804
808
|
//# sourceMappingURL=default.js.map
|