npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.16.1 → 3.0.0-dev.17.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.16.1 → 3.0.0-dev.17.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.

Files changed (150) hide show

package/lib/components/Phone/PhoneInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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~~YAE9B~~,YAAY,GACN,CACV,EACD,KAAC,KAAK,OACA,SAAS,EACb,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,cAAc,~~GAC3B~~,IACe,CACpB,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,KACZ,~~EAAE,~~KAAK,~~EAAE,~~WAAW,EAAE,~~EAAE,EAAE,~~IAAI,~~EAAE,~~MAAM,~~EAAE,~~QAAQ,~~EAAE,~~QAAQ,~~EAAE~~,~~YAE/D~~,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\n /*\n Display select with countries calling codes\n * @default false\n /\n showCountryCode?: boolean;\n /* Changes lists of countries calling codes /\n callingCodesList?: string[];\n /* Callback fired on input value change /\n onChange?: (value: string) => void;\n /* Callback fired when the component loses focus /\n onBlur?: (value: string) => void;\n /* CCallback fired when the component gets focus /\n onFocus?: (value: string) => void;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n const { start, end } = useDirection();\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n ${`border-top-${end}-radius`}: 0;\n ${`border-bottom-${end}-radius`}: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n ${`border-top-${start}-radius`}: 0;\n ${`border-bottom-${start}-radius`}: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n const {\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n ...restProps\n } = props;\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [countryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && (\n <Select\n value={countryCode}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-country-code'\n >\n {codesOptions}\n </Select>\n )}\n <Input\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-national'\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{ label, labelHidden, id, info, status, required, disabled }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default PhoneInput;\n"]}
1	+ {"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\n /*\n Display select with countries calling codes\n * @default false\n /\n showCountryCode?: boolean;\n /* Changes lists of countries calling codes /\n callingCodesList?: string[];\n /* Callback fired on input value change /\n onChange?: (value: string) => void;\n /* Callback fired when the component loses focus /\n onBlur?: (value: string) => void;\n /* CCallback fired when the component gets focus /\n onFocus?: (value: string) => void;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n const { start, end } = useDirection();\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n ${`border-top-${end}-radius`}: 0;\n ${`border-bottom-${end}-radius`}: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n ${`border-top-${start}-radius`}: 0;\n ${`border-bottom-${start}-radius`}: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n const {\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [countryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && (\n <Select\n value={countryCode}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-country-code'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n >\n {codesOptions}\n </Select>\n )}\n <Input\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-national'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default PhoneInput;\n"]}

package/lib/components/SearchInput/SearchInput.d.ts CHANGED Viewed

@@ -39,6 +39,11 @@ export interface SearchInputProps extends NoChildrenProp {
     advancedSearchLink?: OmitStrict<LinkProps, 'children'>;
     /** Aria label for search input, used by screen readers. */
     searchInputAriaLabel?: string;
+    /**
+     * Boolean for determining for whether the search results will render in a popover.
+     * @default true
+     */
+    resultsPopover?: boolean;
 }
 declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
 export default SearchInput;

package/lib/components/SearchInput/SearchInput.d.ts.map CHANGED Viewed

	@@ -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;~~AAe1C~~,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;~~CAC/B~~;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CA2MnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
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,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SearchInput/SearchInput.js CHANGED Viewed

@@ -10,11 +10,11 @@ import Menu from '../Menu';
 import Link from '../Link';
 import Text from '../Text';
 import { createStringMatcher } from '../../utils';
-import { StyledCancelButton, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchTextInput } from './SearchInput.styles';
+import { StyledCancelButton, StyledFiltersPopover, StyledResultsPopover, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput } from './SearchInput.styles';
 registerIcon(searchIcon);
 const SearchInput = forwardRef((props, ref) => {
     const t = useI18n();
-    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, ...restProps } = props;
+    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
     const inputRef = useConsolidatedRef(ref);
     const filterRef = useRef(null);
     const searchResultsRef = useRef(null);
@@ -57,6 +57,7 @@ const SearchInput = forwardRef((props, ref) => {
         }
         setSearchResultItems(items);
     }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);
+    const searchMenu = (_jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }));
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [_jsxs(Flex, { as: StyledSearchButton, ref: filterRef, forwardedAs: hasFilters ? undefined : 'div', container: {
                             justify: 'center',
                             alignItems: 'center',
@@ -68,6 +69,8 @@ const SearchInput = forwardRef((props, ref) => {
                             else {
                                 inputRef.current?.focus();
                             }
+                        }, onBlur: () => {
+                            setFilterMenuOpen(false);
                         }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: value, onChange: (e) => onSearchChange?.(e.target.value), onKeyDown: onKeyDown, onFocus: () => setSearchMenuOpen(true), decoupled: hasFilters, onBlur: () => {
                             setDownPressed(false);
                             if (!advancedSearchLink) {
@@ -75,7 +78,7 @@ const SearchInput = forwardRef((props, ref) => {
                             }
                         } }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
                             onSearchChange?.('');
-                        }, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), (searchResultItems || loading) && (_jsx(Popover, { target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
+                        }, 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: [
                     {
                         name: 'flip',
                         options: {
@@ -85,12 +88,19 @@ const SearchInput = forwardRef((props, ref) => {
                     sameWidth
                 ], onBlur: () => {
                     setSearchMenuOpen(false);
-                }, ref: searchResultsRef, children: _jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }) })), hasFilters ? (_jsx(Popover, { target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
+                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && (searchResultItems || loading) && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), hasFilters ? (_jsx(Popover, { as: StyledFiltersPopover, target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
                             fallbackPlacements: ['top-start']
                         }
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            mainAxis: false,
+                            altAxis: true
+                        }
                     }
                 ], children: _jsx(Menu, { mode: 'single-select', items: completeFilters.map(filter => ({
                         primary: filter,

package/lib/components/SearchInput/SearchInput.js.map CHANGED Viewed

	@@ -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 StyledSearchButton,\n StyledSearchFilterText,\n StyledSearchInput,\n StyledSearchMenu,\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\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 ...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 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 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 {(searchResultItems \|\| loading) && (\n <Popover\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 <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 </Popover>\n )}\n {hasFilters ? (\n <Popover\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 >\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 }}\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"]}

package/lib/components/SearchInput/SearchInput.styles.d.ts CHANGED Viewed

@@ -10,4 +10,7 @@ export declare const StyledSearchInput: import("styled-components").StyledCompon
 }, never>;
 export declare const StyledSearchMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSearchFilterText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSearchResultsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFiltersPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledResultsPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=SearchInput.styles.d.ts.map

package/lib/components/SearchInput/SearchInput.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB;eAAmC,OAAO;SA+BxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,oNAY7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;eAA8B,OAAO;SAuCrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SA+BhE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,0GAKlC,CAAC"}
1	+ {"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB;eAAmC,OAAO;SA+BxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,oNAY7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;eAA8B,OAAO;SAuCrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SA+BhE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,0GAKlC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}

package/lib/components/SearchInput/SearchInput.styles.js CHANGED Viewed

@@ -120,4 +120,10 @@ export const StyledSearchFilterText = styled.span `
   text-overflow: ellipsis;
   max-width: 10ch;
 `;
+export const StyledSearchResultsContainer = styled.div `
+  padding-top: ${props => props.theme.base.spacing};
+`;
+StyledSearchResultsContainer.defaultProps = defaultThemeProp;
+export const StyledFiltersPopover = styled.div ``;
+export const StyledResultsPopover = styled.div ``;
 //# sourceMappingURL=SearchInput.styles.js.map

package/lib/components/SearchInput/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)<{ decoupled: boolean }>(\n ({\n theme: {\n base,\n components: { 'search-input': searchInput, 'form-control': formControl, input }\n },\n decoupled\n }) => {\n const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n return css`\n border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n padding: ${input.padding};\n ${decoupled\n ? css`\n border: ${input['border-width']} solid ${input['border-color']};\n `\n : css`\n border: none;\n padding-right: 0;\n `}\n color: ${iconColor};\n position: relative;\n z-index: 2;\n\n &:focus:not([disabled]) {\n border-color: ${formControl[':focus']['border-color']};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n `;\n }\n);\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(BareButton)(({ theme }) => {\n return css`\n position: absolute;\n inset-inline-end: 1rem;\n height: calc(${theme.components.input.height} / 2);\n width: calc(${theme.components.input.height} / 2);\n display: flex;\n align-items: center;\n justify-content: center;\n inset-block-start: calc(${theme.components.input.height} / 4);\n z-index: 3;\n `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n const { theme, decoupled } = props;\n const comp = theme.components['search-input'];\n return css`\n flex: 1;\n background: transparent;\n padding-inline-end: calc(${theme.base['hit-area'].finger});\n border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n ${decoupled\n ? css`\n border-inline-start: none;\n `\n : css`\n border: none;\n `}\n height: 100%;\n min-height: 100%;\n position: relative;\n z-index: 1;\n &::-ms-clear {\n display: none;\n }\n &::-webkit-search-cancel-button {\n display: none;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n &:focus:not([disabled]) {\n z-index: 2;\n ${!decoupled &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n ({\n theme: {\n base,\n components: { input, 'form-control': formControl, 'search-input': searchInput }\n },\n hasFilters\n }) => {\n return css`\n background: ${formControl['background-color']};\n min-height: ${input.height};\n position: relative;\n height: ${input.height};\n border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n ${hasFilters\n ? css`\n border: none;\n `\n : css`\n border: ${input['border-width']} solid ${input['border-color']};\n `}\n\n ${!hasFilters &&\n css`\n :focus-within {\n border-color: ${base.palette.light};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n `}\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchFilterText = styled.span`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 10ch;\n`;\n"]}
1	+ {"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)<{ decoupled: boolean }>(\n ({\n theme: {\n base,\n components: { 'search-input': searchInput, 'form-control': formControl, input }\n },\n decoupled\n }) => {\n const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n return css`\n border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n padding: ${input.padding};\n ${decoupled\n ? css`\n border: ${input['border-width']} solid ${input['border-color']};\n `\n : css`\n border: none;\n padding-right: 0;\n `}\n color: ${iconColor};\n position: relative;\n z-index: 2;\n\n &:focus:not([disabled]) {\n border-color: ${formControl[':focus']['border-color']};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n `;\n }\n);\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(BareButton)(({ theme }) => {\n return css`\n position: absolute;\n inset-inline-end: 1rem;\n height: calc(${theme.components.input.height} / 2);\n width: calc(${theme.components.input.height} / 2);\n display: flex;\n align-items: center;\n justify-content: center;\n inset-block-start: calc(${theme.components.input.height} / 4);\n z-index: 3;\n `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n const { theme, decoupled } = props;\n const comp = theme.components['search-input'];\n return css`\n flex: 1;\n background: transparent;\n padding-inline-end: calc(${theme.base['hit-area'].finger});\n border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n ${decoupled\n ? css`\n border-inline-start: none;\n `\n : css`\n border: none;\n `}\n height: 100%;\n min-height: 100%;\n position: relative;\n z-index: 1;\n &::-ms-clear {\n display: none;\n }\n &::-webkit-search-cancel-button {\n display: none;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n &:focus:not([disabled]) {\n z-index: 2;\n ${!decoupled &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n ({\n theme: {\n base,\n components: { input, 'form-control': formControl, 'search-input': searchInput }\n },\n hasFilters\n }) => {\n return css`\n background: ${formControl['background-color']};\n min-height: ${input.height};\n position: relative;\n height: ${input.height};\n border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n ${hasFilters\n ? css`\n border: none;\n `\n : css`\n border: ${input['border-width']} solid ${input['border-color']};\n `}\n\n ${!hasFilters &&\n css`\n :focus-within {\n border-color: ${base.palette.light};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n `}\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchFilterText = styled.span`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 10ch;\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}

package/lib/components/Select/Select.d.ts CHANGED Viewed

@@ -6,6 +6,8 @@ export interface SelectProps {
     children: ReactNode;
     /** Called when an Option is chosen within the list. */
     onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.

package/lib/components/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;SA4CzD,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CAoEzD~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;SA4CzD,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAuEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Select/Select.js CHANGED Viewed

@@ -45,8 +45,8 @@ export const StyledSelect = styled.select(props => {
 StyledSelect.defaultProps = defaultThemeProp;
 const Select = forwardRef((props, ref) => {
     const uid = useUID();
-    const { children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, ...restProps } = props;
-    const Comp = (_jsx(StyledFormControl, { ...restProps, as: StyledSelect, id: id, status: status, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly ? 'true' : undefined, ref: ref, onMouseDown: readOnly
+    const { children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
+    const Comp = (_jsx(StyledFormControl, { ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, status: status, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly ? 'true' : undefined, ref: ref, onMouseDown: readOnly
             ? (e) => {
                 e.preventDefault();
             }
@@ -66,7 +66,8 @@ const Select = forwardRef((props, ref) => {
             required,
             disabled,
             readOnly,
-            actions
+            actions,
+            onResolveSuggestion
         }, children: Comp })) : (Comp);
 });
 export default Select;

package/lib/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAOX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAoB,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;~~AAuCnD~~,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAsB,KAAK,CAAC,EAAE;IACrE,MAAM,EACJ,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,EAAE,EAAE,EAC1C,MAAM,EACP,EACF,GAAG,KAAK,CAAC,KAAK,CAAC;IAEhB,MAAM,UAAU,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC1C,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;;;cAME,MAAM,CAAC,MAAM;kBACT,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;4BACnB,MAAM,CAAC,OAAO;mCACP,IAAI,CAAC,OAAO;;;oHAGqE,UAAU;;gCAE9F,IAAI,CAAC,OAAO;2BACjB,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,OAAO,IAAI;oBAC3D,MAAM,CAAC,cAAc,CAAC;0BAChB,IAAI,CAAC,eAAe,CAAC,MAAM,MAAM,CAAC,eAAe,CAAC;;MAEtE,CAAC,KAAK,CAAC,MAAM;QACf,GAAG,CAAA;sBACe,MAAM,CAAC,cAAc,CAAC;KACvC;;;;;;;oBAOe,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAkD,UAAU,CACtE,CAAC,KAAmC,EAAE,GAAuB,EAAE,EAAE;IAC/D,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,QAAQ,EACR,EAAE,GAAG,GAAG,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAG,CACX,KAAC,iBAAiB,OACZ,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,mBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAAG,EACR,WAAW,EACT,QAAQ;YACN,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EACP,QAAQ;YACN,CAAC,CAAC,CAAC,CAAgB,EAAE,EAAE;gBACnB,gEAAgE;gBAChE,IAAI,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;YAC7D,CAAC;YACH,CAAC,CAAC,SAAS,YAGd,QAAQ,GACS,CACrB,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OACJ;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,QAAQ;YACR,QAAQ;YACR,OAAO;~~SACR~~,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n ChangeEventHandler,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\n\nexport interface SelectProps {\n /** Pass Options components as children to render the options of the Select list. /\n children: ReactNode;\n /* Called when an Option is chosen within the list. /\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\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 /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass an array of Action objects to append button(s) inline with the Select. /\n actions?: Action[];\n /* A ref to the select element. /\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean }>(props => {\n const {\n base,\n components: {\n 'form-control': { 'foreground-color': fg },\n select\n }\n } = props.theme;\n\n const foreground = encodeURIComponent(fg);\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 ${base.spacing});\n\n /* cSpell:disable-next-line /\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: calc(2 ${base.spacing}) auto;\n background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n ${!props.status &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n const uid = useUID();\n const {\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n ...restProps\n } = props;\n\n const Comp = (\n <StyledFormControl\n {...restProps}\n as={StyledSelect}\n id={id}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n aria-readonly={readOnly ? 'true' : undefined}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: FOr future consider key modifiers at play e.g. \"ctrl p\"\n if (!['Escape', 'Tab'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </StyledFormControl>\n );\n\n return label ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n disabled,\n readOnly,\n actions\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Select;\n"]}
1	+ {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n ChangeEventHandler,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\n\nexport interface SelectProps {\n /** Pass Options components as children to render the options of the Select list. /\n children: ReactNode;\n /* Called when an Option is chosen within the list. /\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\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 /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass an array of Action objects to append button(s) inline with the Select. /\n actions?: Action[];\n /* A ref to the select element. /\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean }>(props => {\n const {\n base,\n components: {\n 'form-control': { 'foreground-color': fg },\n select\n }\n } = props.theme;\n\n const foreground = encodeURIComponent(fg);\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 ${base.spacing});\n\n /* cSpell:disable-next-line /\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: calc(2 ${base.spacing}) auto;\n background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n ${!props.status &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n const uid = useUID();\n const {\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const Comp = (\n <StyledFormControl\n {...restProps}\n as={StyledSelect}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n id={id}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n aria-readonly={readOnly ? 'true' : undefined}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: FOr future consider key modifiers at play e.g. \"ctrl p\"\n if (!['Escape', 'Tab'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </StyledFormControl>\n );\n\n return label ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n disabled,\n readOnly,\n actions,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Select;\n"]}

package/lib/components/TextArea/TextArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,cAAc;IACrE,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CAwG9C~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,cAAc;IACrE,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA2G9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TextArea/TextArea.js CHANGED Viewed

@@ -8,7 +8,7 @@ import Text from '../Text';
 import StyledTextArea from './TextArea.styles';
 const TextArea = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, resizable = false, autoResize = false, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, ...restProps } = props;
+    const { id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, resizable = false, autoResize = false, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
     const t = useI18n();
     const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
     const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
@@ -44,6 +44,7 @@ const TextArea = forwardRef((props, ref) => {
             status,
             resizable,
             maxLength: hardStop ? maxLength : undefined,
+            hasSuggestion: status === 'pending' && !!onResolveSuggestion,
             ...controlProp,
             ...restProps,
             onChange,
@@ -57,7 +58,8 @@ const TextArea = forwardRef((props, ref) => {
             status,
             charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined,
             required,
-            disabled
+            disabled,
+            onResolveSuggestion
         }, children: Comp })) : (Comp);
 });
 export default TextArea;

package/lib/components/TextArea/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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~~SACT~~,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps, NoChildrenProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default false\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n const uid = useUID();\n const {\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = false,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if (hasProp(props, 'value')) {\n setCharCount(props.value ? props.value.length : 0);\n } else if (hasProp(props, 'defaultValue')) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n {...{\n ref: autoResize ? consolidatedRef : ref,\n id,\n required,\n disabled,\n status,\n resizable,\n maxLength: hardStop ? maxLength : undefined,\n ...controlProp,\n ...restProps,\n onChange,\n as: StyledTextArea\n }}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n charLimitDisplay:\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}\n </Text>\n ) : undefined,\n required,\n disabled\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TextArea;\n"]}
1	+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps, NoChildrenProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default false\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n const uid = useUID();\n const {\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = false,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if (hasProp(props, 'value')) {\n setCharCount(props.value ? props.value.length : 0);\n } else if (hasProp(props, 'defaultValue')) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n {...{\n ref: autoResize ? consolidatedRef : ref,\n id,\n required,\n disabled,\n status,\n resizable,\n maxLength: hardStop ? maxLength : undefined,\n hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n ...controlProp,\n ...restProps,\n onChange,\n as: StyledTextArea\n }}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n charLimitDisplay:\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}\n </Text>\n ) : undefined,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TextArea;\n"]}

package/lib/components/Tooltip/Tooltip.d.ts CHANGED Viewed

@@ -26,6 +26,11 @@ export interface TooltipProps extends BaseProps {
      * @default true
      */
     describeTarget?: boolean;
+    /**
+     * Sets the placement of the tooltip relative to the target.
+     * @default "bottom"
+     */
+    placement?: PopoverProps['placement'];
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/Tooltip/Tooltip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,~~CA8G3D~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA8H3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Tooltip/Tooltip.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const StyledTooltip = styled.div(({ theme }) => {
   `;
 });
 StyledTooltip.defaultProps = defaultThemeProp;
-const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay = 'long', portal = false, describeTarget = true, ...restProps }, ref) => {
+const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay = 'long', portal = false, placement = 'bottom', describeTarget = true, ...restProps }, ref) => {
     const id = useUID();
     const [show, setShow] = useState(false);
     const tooltipRef = useConsolidatedRef(ref);
@@ -71,11 +71,28 @@ const Tooltip = forwardRef(({ children, target, showDelay = 'short', hideDelay =
         };
     }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);
     useEffect(() => {
-        if (target && !target.getAttribute('aria-describedby') && describeTarget) {
-            target.setAttribute('aria-describedby', id);
+        if (target && describeTarget && show) {
+            const describedBy = target.getAttribute('aria-describedby');
+            // Set the attribute to the old attribute plus the id
+            target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);
         }
-    }, [describeTarget, target]);
-    return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: 'bottom', onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
+        else if (target) {
+            // Get the old attribute
+            const describedBy = target.getAttribute('aria-describedby');
+            if (describedBy) {
+                // If the old attribute matches the id just remove it entirely
+                if (describedBy === id) {
+                    target.removeAttribute('aria-describedby');
+                }
+                else {
+                    // Otherwise we want to just remove the id that was added and reset the attribute to what it was before
+                    const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\s+)${id}`), '');
+                    target.setAttribute('aria-describedby', oldDescribedBy);
+                }
+            }
+        }
+    }, [describeTarget, target, show]);
+    return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', portal: portal, as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: placement, onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
 });
 export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n /** Text content for the tooltip. /\n children: string \| string[];\n /* Element to serve as the tooltip's target. /\n target: Element \| null;\n /\n Delay showing the tooltip on mouseenter.\n * @default \"short\"\n /\n showDelay?: Delay;\n /\n Delay hiding the tooltip on mouseleave.\n * @default \"long\"\n /\n hideDelay?: Delay;\n /\n If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n /\n portal?: PopoverProps['portal'];\n /\n If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n */\n describeTarget?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n (\n {\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n portal = false,\n describeTarget = true,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget \| null> = useRef(null);\n\n const showTooltip = useCallback(() => {\n setShow(true);\n }, []);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current \|\| eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n const onFocusOut = useCallback(() => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n }, []);\n\n const onMouseEnter = useCallback(() => {\n setShow(true);\n }, [target]);\n\n const onMouseLeave = useCallback(() => {\n if (document.activeElement !== target) {\n setShow(false);\n }\n }, [target]);\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && document.activeElement === target) {\n setShow(false);\n }\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', showTooltip);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', showTooltip);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n useEffect(() => {\n if (target && !target.getAttribute('aria-describedby') && describeTarget) {\n target.setAttribute('aria-describedby', id);\n }\n }, [describeTarget, target]);\n\n return (\n <Popover\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n portal={portal}\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement='bottom'\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n }\n);\n\nexport default Tooltip;\n"]}
1	+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n /** Text content for the tooltip. /\n children: string \| string[];\n /* Element to serve as the tooltip's target. /\n target: Element \| null;\n /\n Delay showing the tooltip on mouseenter.\n * @default \"short\"\n /\n showDelay?: Delay;\n /\n Delay hiding the tooltip on mouseleave.\n * @default \"long\"\n /\n hideDelay?: Delay;\n /\n If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n /\n portal?: PopoverProps['portal'];\n /\n If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n /\n describeTarget?: boolean;\n /\n Sets the placement of the tooltip relative to the target.\n * @default \"bottom\"\n */\n placement?: PopoverProps['placement'];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n (\n {\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n portal = false,\n placement = 'bottom',\n describeTarget = true,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget \| null> = useRef(null);\n\n const showTooltip = useCallback(() => {\n setShow(true);\n }, []);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current \|\| eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n const onFocusOut = useCallback(() => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n }, []);\n\n const onMouseEnter = useCallback(() => {\n setShow(true);\n }, [target]);\n\n const onMouseLeave = useCallback(() => {\n if (document.activeElement !== target) {\n setShow(false);\n }\n }, [target]);\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && document.activeElement === target) {\n setShow(false);\n }\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', showTooltip);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', showTooltip);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n useEffect(() => {\n if (target && describeTarget && show) {\n const describedBy = target.getAttribute('aria-describedby');\n // Set the attribute to the old attribute plus the id\n target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n } else if (target) {\n // Get the old attribute\n const describedBy = target.getAttribute('aria-describedby');\n if (describedBy) {\n // If the old attribute matches the id just remove it entirely\n if (describedBy === id) {\n target.removeAttribute('aria-describedby');\n } else {\n // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n const oldDescribedBy = describedBy.replace(new RegExp(`(?:^\|\\\\s+)${id}`), '');\n target.setAttribute('aria-describedby', oldDescribedBy);\n }\n }\n }\n }, [describeTarget, target, show]);\n\n return (\n <Popover\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n portal={portal}\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement={placement}\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n }\n);\n\nexport default Tooltip;\n"]}

package/lib/hooks/useI18n.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@
  * @returns translator:: The translator function that provides translations for a given key  in the translation JSON provided to the Configuration component.
  */
 declare const useI18n: () => import("../i18n/translate").TranslationFunction<Readonly<{
+    yes: string;
+    no: string;
     filters: string;
     actions: string;
     status: string;
@@ -39,6 +41,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     sort_by: string;
     group_by: string;
     go: string;
+    configure: string;
     view_all: string;
     view_less: string;
     show_more: string;
@@ -197,6 +200,10 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     collapse_summary_panel: string;
     expand_utilities_panel: string;
     collapse_utilities_panel: string;
+    accept_suggestion_button_a11y: string;
+    reject_suggestion_button_a11y: string;
+    suggestion_info: string;
+    suggestion_assist: string;
     close_preview: string;
     confirmation_details: string;
     confirmation_whats_next: string;