npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-rc.4 → 2.0.0-rc.5 - Mend

@pega/cosmos-react-core 2.0.0-rc.4 → 2.0.0-rc.5

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 (24) hide show

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

@@ -1,7 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import ComboBoxProps from './ComboBox.types';
-export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
 declare const ComboBox: FunctionComponent<ComboBoxProps & ForwardProps>;
 export default ComboBox;
 //# sourceMappingURL=ComboBox.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;~~AAMf~~,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;~~AAI7C~~,~~eAAO,MAAM,cAAc,4PAO1B,CAAC;AAIF,~~QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0M7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0M7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
 import Icon, { registerIcon } from '../Icon';
 import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import * as caretUpIcon from '../Icon/icons/caret-up.icon';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';
-import Popover, { StyledPopover } from '../Popover';
+import Popover from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import Menu from '../Menu';
@@ -15,15 +14,8 @@ import { navigatorIsAvailable } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import { sameWidth } from '../Popover/modifiers';
 import ComboBoxInput from './ComboBoxInput';
+import { StyledComboBox } from './ComboBox.styles';
 registerIcon(caretDownIcon, caretUpIcon);
-export const StyledComboBox = styled(StyledFormControl) `
-  border: 0;
-  & ${StyledPopover} {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-`;
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
 const ComboBox = forwardRef((props, ref) => {
     const uid = useUID();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nexport const StyledComboBox = styled(StyledFormControl)`\n border: 0;\n\n & ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n`;\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onClick,\n menu,\n ...restProps\n } = props;\n\n const t = useI18n();\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const focus = useFocusWithin([containerRef], focused => {\n if (!focused) {\n setOpen(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu \|\| readOnly) return;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!open) setOpen(true);\n break;\n case 'Escape':\n e.preventDefault();\n if (open) e.stopPropagation();\n setOpen(false);\n break;\n default:\n }\n },\n [open, readOnly, menu, value]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items?.length \|\| onDropdownButtonClickProp \|\| !onChange) && !readOnly ? (\n <Button\n aria-hidden='true'\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </Button>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const onInputClick = useCallback(\n (e: MouseEvent) => {\n if (readOnly) return;\n setOpen(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n }\n }, [menu, value, focus]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n <ComboBoxInput\n ref={inputRef}\n role='combobox'\n aria-haspopup='listbox'\n aria-expanded={!readOnly && !disabled && open}\n aria-autocomplete='list'\n aria-describedby={`${id}-inputDescription`}\n selected={selected?.items}\n spellCheck={false}\n {...{\n id,\n readOnly,\n disabled,\n onChange,\n value,\n mode,\n status\n }}\n actions={inputActions}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n {...restProps}\n />\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n </VisuallyHiddenText>\n\n <Popover\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n strategy={isMobile ? 'absolute' : 'fixed'}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n {menu && (\n <Menu\n ref={menuRef}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current \|\| undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n arrowNavigationUnsupported\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default ComboBox;\n"]}
1	+ {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onClick,\n menu,\n ...restProps\n } = props;\n\n const t = useI18n();\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const focus = useFocusWithin([containerRef], focused => {\n if (!focused) {\n setOpen(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu \|\| readOnly) return;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!open) setOpen(true);\n break;\n case 'Escape':\n e.preventDefault();\n if (open) e.stopPropagation();\n setOpen(false);\n break;\n default:\n }\n },\n [open, readOnly, menu, value]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items?.length \|\| onDropdownButtonClickProp \|\| !onChange) && !readOnly ? (\n <Button\n aria-hidden='true'\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </Button>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const onInputClick = useCallback(\n (e: MouseEvent) => {\n if (readOnly) return;\n setOpen(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n }\n }, [menu, value, focus]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n <ComboBoxInput\n ref={inputRef}\n role='combobox'\n aria-haspopup='listbox'\n aria-expanded={!readOnly && !disabled && open}\n aria-autocomplete='list'\n aria-describedby={`${id}-inputDescription`}\n selected={selected?.items}\n spellCheck={false}\n {...{\n id,\n readOnly,\n disabled,\n onChange,\n value,\n mode,\n status\n }}\n actions={inputActions}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n {...restProps}\n />\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n </VisuallyHiddenText>\n\n <Popover\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n strategy={isMobile ? 'absolute' : 'fixed'}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n {menu && (\n <Menu\n ref={menuRef}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current \|\| undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n arrowNavigationUnsupported\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default ComboBox;\n"]}

package/lib/components/ComboBox/ComboBox.styles.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const StyledSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+//# sourceMappingURL=ComboBox.styles.d.ts.map

package/lib/components/ComboBox/ComboBox.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAmD5B,CAAC;AAEH,eAAO,MAAM,cAAc,sPASzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js ADDED Viewed

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { StyledButton } from '../Button';
+import { StyledFormControl } from '../FormControl';
+import { StyledPopover } from '../Popover';
+export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
+    return css `
+    @media (pointer: coarse) {
+      min-height: ${base['hit-area']['finger-min']};
+    }
+    &:focus-within {
+      border-color: ${components['form-control'][':focus']['border-color']};
+      box-shadow: ${components['form-control'][':focus']['box-shadow']};
+    }
+    &:hover:not([readonly]):not([disabled]):focus-within {
+      border-color: transparent;
+    }
+    input {
+      min-width: 0;
+      width: 100%;
+      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});
+      color: ${components['form-control']['foreground-color']};
+      text-overflow: ellipsis;
+      margin-inline-start: ${base.spacing};
+    }
+    input,
+    input:focus {
+      border: none;
+      outline: none;
+      flex-grow: 1;
+      background-color: transparent;
+      &:read-only {
+        cursor: default;
+      }
+    }
+    & > ${StyledButton} {
+      align-self: stretch;
+      height: auto;
+      margin-block: -0.0625rem;
+      margin-inline-end: -0.0625rem;
+      border-start-start-radius: 0;
+      border-start-end-radius: calc(
+        ${base['border-radius']} * ${components['form-control']['border-radius']}
+      );
+      border-end-start-radius: 0;
+      border-end-end-radius: calc(
+        ${base['border-radius']} * ${components['form-control']['border-radius']}
+      );
+    }
+  `;
+});
+export const StyledComboBox = styled(StyledFormControl)(() => {
+    return css `
+    border: 0;
+    ${StyledPopover} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  `;
+});
+StyledComboBox.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ComboBox.styles.js.map

package/lib/components/ComboBox/ComboBox.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;6BAEhC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAe/B,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;MAGN,aAAa;;;;GAIhB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n margin-inline-start: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n & > ${StyledButton} {\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(\n ${base['border-radius']} * ${components['form-control']['border-radius']}\n );\n border-end-start-radius: 0;\n border-end-end-radius: calc(\n ${base['border-radius']} * ${components['form-control']['border-radius']}\n );\n }\n `;\n});\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import { MultiSelectInputProps } from './MultiSelectInput.types';
-export declare const StyledMultiSelect: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MultiSelectInputProps, never>;
+export declare const StyledMultiSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps>;
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.d.ts.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,~~iBAAiB~~,~~4HA4D5B~~,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js CHANGED Viewed

@@ -7,60 +7,19 @@ import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
 import { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';
 import { cap } from '../../../utils';
-import { StyledButton } from '../../Button';
-export const StyledMultiSelect = styled.div(props => {
-    const { theme: { components: { 'form-control': formControl, input: { height } }, base } } = props;
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {
     return css `
-    min-height: ${height};
-    @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
-    }
-    &:focus-within {
-      border-color: ${formControl[':focus']['border-color']};
-      box-shadow: ${formControl[':focus']['box-shadow']};
-    }
-    &:hover:not([readonly]):not([disabled]):focus-within {
-      border-color: transparent;
-    }
     ul {
       list-style: none;
     }
-    input {
-      min-width: 0;
-      width: 100%;
-      color: ${formControl['foreground-color']};
-      text-overflow: ellipsis;
-      margin-inline-start: ${base.spacing};
-    }
-    input,
-    input:focus {
-      border: none;
-      outline: none;
-      flex-grow: 1;
-      background-color: transparent;
-      &:read-only {
-        cursor: default;
-      }
-    }
     ${StyledSelectable} {
-      margin: calc(0.25 * ${base.spacing});
-    }
-    > ${StyledButton} {
-      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});
-      height: calc(${height} - 2 * ${formControl['border-width']});
+      margin: calc(0.25 * ${theme.base.spacing});
     }
   `;
 });
-StyledMultiSelect.defaultProps = defaultThemeProp;
+StyledMultiSelectInput.defaultProps = defaultThemeProp;
 const MultiSelectInput = forwardRef((props, ref) => {
     const { selected = [], value, onRemove, onChange, onKeyDown, actions, readOnly, disabled, status, placeholder, autoFocus, ...restProps } = props;
     const inputRef = useConsolidatedRef(ref);
@@ -74,7 +33,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
         onKeyDown?.(e);
     }, [onKeyDown, value, selected]);
     const { end } = useDirection();
-    return (_jsxs(Flex, { as: StyledMultiSelect, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
+    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
             readOnly,
             disabled,
             status

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,MAAM,EACN,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~cAAc~~,CAAC;~~AAI5C~~,MAAM,CAAC,MAAM,~~iBAAiB~~,GAAG,MAAM,CAAC,~~GAAG~~,~~CAAwB~~,~~KAAK~~,CAAC,EAAE~~;IACzE~~,~~MAAM,EACJ,~~KAAK,EAAE,~~EACL,UAAU,~~EAAE,~~EACV,cAAc,~~EAAE~~,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACD,IAAI,EACL,EACF,GAAG,KAAK,CAAC~~;~~IAEV~~,OAAO,GAAG,CAAA~~;kBACM~~,MAAM;;;oBAGJ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;;;;;eAcxC,WAAW,CAAC,kBAAkB,CAAC;;6BAEjB,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;MAenC,gBAAgB;4BACM,~~IAAI~~,CAAC,~~OAAO;;;QAGhC,YAAY;4BACQ,~~IAAI,CAAC,~~eAAe,CAAC,MAAM,WAAW,CAAC,eAAe,CAAC;qBAC9D,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC~~;;~~GAE7D~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,~~iBAAiB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAElD~~,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CAAC,KAA6C,EAAE,GAA0B,EAAE,EAAE;IAC5E,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IAE/F,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAkC,EAAE,EAAE;QACrC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1D,QAAQ,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;SAC/C;QACD,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAC7B,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,~~iBAAiB~~,~~EACrB~~,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAC/B;YACF,QAAQ;YACR,QAAQ;YACR,MAAM;SACP,aAED,MAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,EAAE,EAAC,IAAI,EACP,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EACjD,MAAM,EAAE,GAAG,EAAE;oBACX,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAc,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;wBAChF,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;oBACnB,CAAC,CAAC,CAAC;oBACH,IAAI,QAAQ,CAAC,OAAO;wBAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACtD,CAAC,aAEA,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;wBAC7B,OAAO,CACL,uBACE,KAAC,UAAU,IACT,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,EAAE,CAAC,EAAE;oCACb,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;oCACpB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAC5B,CAAC,EACD,SAAS,EAAE,CAAC,CAAyB,EAAE,EAAE;oCACvC,+BAA+B;oCAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW;wCAAE,CAAC,CAAC,cAAc,EAAE,CAAC;oCAC9C,IAAI,GAAG,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;wCAC7D,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAC9B,CAAC,YAEA,OAAO,CAAC,IAAI,WACF,IAjBN,OAAO,CAAC,EAAE,CAkBd,CACN,CAAC;oBACJ,CAAC,CAAC,EACF,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,kBACxC,gBACE,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK;4BACZ,0CAA0C;4BAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACvD,YAAY,EAAC,KAAK;4BAClB,iDAAiD;4BACjD,SAAS,EAAE,SAAS,KAChB,SAAS,WACb,WACG,YACF,EACN,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { ~~StyledButton~~ } from '~~../../Button~~';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const ~~StyledMultiSelect~~ = styled~~.div<MultiSelectInputProps>~~(~~props =>~~ {~~\n const~~ ~~{\n~~ theme: ~~{\n components:~~ ~~{\n 'form-control':~~ ~~formControl,\n input:~~ { ~~height }~~\n ~~},\n base\n }\n~~ ~~} = props;\n\n~~ return css`\n min-height: ${height};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n &:focus-within {\n border-color: ${formControl[':focus']['border-color']};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n ul {\n list-style: none;\n }\n\n ~~input {\n min-width: 0;\n width: 100%;\n color:~~ ${formControl['foreground-color']};\n text-overflow: ellipsis;\n margin-inline-start: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n ${StyledSelectable} {\n margin: calc(0.25 * ${base.spacing});\n }\n~~\n > ${StyledButton} {\n border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n height: calc(${height} - 2 * ${formControl['border-width']});\n }\n~~ `;\n});\n\~~nStyledMultiSelect~~.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n const lastIndex = selected.length - 1;\n if (e.key === 'Backspace' && !value && selected.length > 0) {\n onRemove?.(selected[lastIndex].id, lastIndex);\n }\n onKeyDown?.(e);\n },\n [onKeyDown, value, selected]\n );\n\n const { end } = useDirection();\n\n return (\n <Flex\n as={~~StyledMultiSelect~~}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n ref={listRef}\n as='ul'\n item={{ grow: 1 }}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n onBlur={() => {\n listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n el.tabIndex = -1;\n });\n if (inputRef.current) inputRef.current.tabIndex = 0;\n }}\n >\n {selected.map((element, idx) => {\n return (\n <li key={element.id}>\n <Selectable\n id={element.id.toString()}\n disabled={readOnly \|\| disabled}\n status={status}\n onRemove={id => {\n onRemove?.(id, idx);\n inputRef.current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n inputRef.current?.focus();\n }}\n >\n {element.text}\n </Selectable>\n </li>\n );\n })}\n <Flex as='li' item={{ grow: 1 }} container>\n <input\n size={5}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly \|\| !onChange}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...restProps}\n />\n </Flex>\n </Flex>\n {actions}\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
1	+ {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n return css`\n ul {\n list-style: none;\n }\n\n ${StyledSelectable} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n const lastIndex = selected.length - 1;\n if (e.key === 'Backspace' && !value && selected.length > 0) {\n onRemove?.(selected[lastIndex].id, lastIndex);\n }\n onKeyDown?.(e);\n },\n [onKeyDown, value, selected]\n );\n\n const { end } = useDirection();\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n ref={listRef}\n as='ul'\n item={{ grow: 1 }}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n onBlur={() => {\n listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n el.tabIndex = -1;\n });\n if (inputRef.current) inputRef.current.tabIndex = 0;\n }}\n >\n {selected.map((element, idx) => {\n return (\n <li key={element.id}>\n <Selectable\n id={element.id.toString()}\n disabled={readOnly \|\| disabled}\n status={status}\n onRemove={id => {\n onRemove?.(id, idx);\n inputRef.current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n inputRef.current?.focus();\n }}\n >\n {element.text}\n </Selectable>\n </li>\n );\n })}\n <Flex as='li' item={{ grow: 1 }} container>\n <input\n size={5}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly \|\| !onChange}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...restProps}\n />\n </Flex>\n </Flex>\n {actions}\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import SingleSelectInputProps from './SingleSelectInput.types';
+export declare const StyledSingleSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps>;
 export default SingleSelectInput;
 //# sourceMappingURL=SingleSelectInput.d.ts.map

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;~~AAM5E~~,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;~~AA2D~~/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,uBAAuB,yGAA8B,CAAC;AAEnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js CHANGED Viewed

@@ -1,59 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { StyledFormControl } from '../../FormControl';
-import { defaultThemeProp } from '../../../theme';
 import Flex from '../../Flex';
-import { StyledButton } from '../../Button';
-const StyledSingleInput = styled.div(props => {
-    const { theme: { base, components: { 'form-control': formControl, input: { height } } } } = props;
-    return css `
-    height: ${height};
-    @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
-    }
-    &:focus-within {
-      border-color: ${formControl[':focus']['border-color']};
-      box-shadow: ${formControl[':focus']['box-shadow']};
-    }
-    &:hover:not([readonly]):not([disabled]):focus-within {
-      border-color: transparent;
-    }
-    input {
-      min-width: 0;
-      width: 100%;
-      color: ${formControl['foreground-color']};
-      text-overflow: ellipsis;
-      margin-inline-start: ${base.spacing};
-    }
-    input,
-    input:focus {
-      border: none;
-      outline: none;
-      flex-grow: 1;
-      background-color: transparent;
-      &:read-only {
-        cursor: default;
-      }
-    }
-    > ${StyledButton} {
-      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});
-      min-height: calc(${height} - 2 * ${formControl['border-width']});
-      height: calc(${height} - 2 * ${formControl['border-width']});
-    }
-  `;
-});
-StyledSingleInput.defaultProps = defaultThemeProp;
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledSingleSelectInput = styled(StyledSelectInput) ``;
 const SingleSelectInput = forwardRef((props, ref) => {
     const { value, readOnly, disabled, status, actions, onChange, selected, ...restProps } = props;
-    return (_jsxs(Flex, { as: StyledSingleInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
+    return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
             disabled,
             status,
             readOnly

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,~~EAAE,EAAE,GAAG,EAAE,~~MAAM,mBAAmB,CAAC;~~AAEhD~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,~~EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,~~IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~cAAc~~,CAAC;~~AAI5C~~,MAAM,~~iBAAiB,GAAG,MAAM,~~CAAC,~~GAAG,CAAC,KAAK,CAAC,EAAE;IAC3C,~~MAAM,~~EACJ~~,~~KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,~~GAAG,~~KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;cACE,~~MAAM~~;;;oBAGA~~,~~IAAI,~~CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;eAUxC,WAAW,CAAC,kBAAkB,CAAC;;6BAEjB,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;QAejC,YAAY;4BACQ,IAAI,CAAC,eAAe,CAAC,MAAM,WAAW,CAAC,eAAe,CAAC;yBAC1D,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC;qBAC/C,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,~~YAAY~~,~~GAAG~~,~~gBAAgB,~~CAAC;~~AAElD~~,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAA0B,EAAE,EAAE;IAC7E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE/F,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,~~iBAAiB~~,~~EACrB~~,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAC/C;YACF,QAAQ;YACR,MAAM;YACN,QAAQ;SACT,aAED,mBACM;oBACF,GAAG;oBACH,QAAQ;oBACR,MAAM;oBACN,QAAQ;iBACT,EACD,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE;gBACpC,0CAA0C;gBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,KAAK,KACd,SAAS,WACb,EACD,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, ~~{ css }~~ from 'styled-components';\n\nimport { StyledFormControl } from '../../FormControl';\nimport ~~{ defaultThemeProp } from '../../../theme';\nimport~~ Flex from '../../Flex';\nimport { ForwardProps } from '../../../types';\nimport { ~~StyledButton~~ } from '~~../../Button~~';\n\nimport SingleSelectInputProps from './SingleSelectInput.types';\n\~~nconst~~ ~~StyledSingleInput = styled.div(props => {\n~~ const ~~{\n theme:~~ ~~{\n base,\n components: {\n 'form-control': formControl,\n input: { height }\n }\n }\n }~~ = ~~props;\n\n return css`\n height: ${height};\n\n @media~~ (~~pointer: coarse~~) {\n ~~min-height: ${base['hit-area']['finger-min']};\n }~~\n\n &:focus-within {\n border-color: ${formControl[':focus']['border-color']};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n color: ${formControl['foreground-color']};\n text-overflow: ellipsis;\n margin-inline-start: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n > ${StyledButton} {\n border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n min-height: calc(${height} - 2 * ${formControl['border-width']});\n height: calc(${height} - 2 * ${formControl['border-width']});\n }\n `;\n});\n\nStyledSingleInput.defaultProps = defaultThemeProp;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SingleSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, readOnly, disabled, status, actions, onChange, selected, ...restProps } = props;\n\n return (\n <Flex\n as={~~StyledSingleInput~~}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n {...{\n disabled,\n status,\n readOnly\n }}\n >\n <input\n {...{\n ref,\n disabled,\n status,\n readOnly\n }}\n value={value \|\| selected?.text \|\| ''}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='off'\n {...restProps}\n />\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}
1	+ {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA,EAAE,CAAC;AAEnE,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAA0B,EAAE,EAAE;IAC7E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE/F,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAC/C;YACF,QAAQ;YACR,MAAM;YACN,QAAQ;SACT,aAED,mBACM;oBACF,GAAG;oBACH,QAAQ;oBACR,MAAM;oBACN,QAAQ;iBACT,EACD,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE;gBACpC,0CAA0C;gBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,KAAK,KACd,SAAS,WACb,EACD,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { ForwardProps } from '../../../types';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport SingleSelectInputProps from './SingleSelectInput.types';\n\nexport const StyledSingleSelectInput = styled(StyledSelectInput)``;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SingleSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, readOnly, disabled, status, actions, onChange, selected, ...restProps } = props;\n\n return (\n <Flex\n as={StyledSingleSelectInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n {...{\n disabled,\n status,\n readOnly\n }}\n >\n <input\n {...{\n ref,\n disabled,\n status,\n readOnly\n }}\n value={value \|\| selected?.text \|\| ''}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='off'\n {...restProps}\n />\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}

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

@@ -25,7 +25,7 @@ if (windowIsAvailable) {
     if (!window[metaKey]) {
         window[metaKey] = [];
     }
-    window[metaKey].push({ version: '2.0.0-rc.4' });
+    window[metaKey].push({ version: '2.0.0-rc.5' });
 }
 const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
     const ctx = useContext(context);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n /*\n Any components or nodes that should be impacted by the settings applied by this Configuration component.\n /\n children: ReactNode;\n /\n Context to read previous configuration values from.\n /\n context?: Context<ConfigurationContextValue>;\n /\n User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n /\n locale?: string;\n /\n Override rendering direction of the document. Direction will be based on the locale if now provided.\n /\n direction?: 'ltr' \| 'rtl';\n /\n Object with (partial) translations.\n /\n translations?: Translation;\n /\n Theme object used to override any or all Cosmos theme properties.\n /\n theme?: DefaultSettableTheme;\n /\n Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n /\n disableDefaultFontLoading?: boolean;\n /\n Target element for loading styles related to `styled-components`.\n /\n styleSheetTarget?: HTMLElement;\n /\n Target element for rendering a `ReactDOM` portal.\n /\n portalTarget?: Element;\n /\n Override map to replace Cosmos components.\n /\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /\n Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n [initializedKey]: boolean;\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachine<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n [initializedKey]: false,\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [metaKey]: CosmosMetadata[];\n }\n}\n\nif (windowIsAvailable) {\n if (!window[metaKey]) {\n window[metaKey] = [];\n }\n\n window[metaKey].push({ version: '2.0.0-rc.4' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n context = ConfigurationContext,\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls\n}: ConfigurationProps) => {\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n const wrappedChildren = ctx[initializedKey] ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n />,\n document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n return (\n <ConfigurationContext.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n [initializedKey]: true,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </ConfigurationContext.Provider>\n );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}
1	+ {"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n /*\n Any components or nodes that should be impacted by the settings applied by this Configuration component.\n /\n children: ReactNode;\n /\n Context to read previous configuration values from.\n /\n context?: Context<ConfigurationContextValue>;\n /\n User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n /\n locale?: string;\n /\n Override rendering direction of the document. Direction will be based on the locale if now provided.\n /\n direction?: 'ltr' \| 'rtl';\n /\n Object with (partial) translations.\n /\n translations?: Translation;\n /\n Theme object used to override any or all Cosmos theme properties.\n /\n theme?: DefaultSettableTheme;\n /\n Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n /\n disableDefaultFontLoading?: boolean;\n /\n Target element for loading styles related to `styled-components`.\n /\n styleSheetTarget?: HTMLElement;\n /\n Target element for rendering a `ReactDOM` portal.\n /\n portalTarget?: Element;\n /\n Override map to replace Cosmos components.\n /\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /\n Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n [initializedKey]: boolean;\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachine<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n [initializedKey]: false,\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [metaKey]: CosmosMetadata[];\n }\n}\n\nif (windowIsAvailable) {\n if (!window[metaKey]) {\n window[metaKey] = [];\n }\n\n window[metaKey].push({ version: '2.0.0-rc.5' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n context = ConfigurationContext,\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls\n}: ConfigurationProps) => {\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n const wrappedChildren = ctx[initializedKey] ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n />,\n document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n return (\n <ConfigurationContext.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n [initializedKey]: true,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </ConfigurationContext.Provider>\n );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,kBAAkB,qMAE9B,CAAC;AAEF,eAAO,MAAM,eAAe,2GA8D1B,CAAC;AAIH,eAAO,MAAM,cAAc;kBAA6B,OAAO;SAgD9D,CAAC;AAIF,eAAO,MAAM,eAAe,yGAW3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,uGAElC,CAAC;AAEF,eAAO,MAAM,eAAe,wGAM1B,CAAC;AAIH,eAAO,MAAM,mBAAmB,wGAM9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAUhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,4GAgD/B,CAAC;AAIH,eAAO,MAAM,cAAc,~~wGAgB1B~~,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAqBjC,CAAC;AAIF,eAAO,MAAM,UAAU,yGAiCrB,CAAC"}
1	+ {"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,kBAAkB,qMAE9B,CAAC;AAEF,eAAO,MAAM,eAAe,2GA8D1B,CAAC;AAIH,eAAO,MAAM,cAAc;kBAA6B,OAAO;SAgD9D,CAAC;AAIF,eAAO,MAAM,eAAe,yGAW3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,uGAElC,CAAC;AAEF,eAAO,MAAM,eAAe,wGAM1B,CAAC;AAIH,eAAO,MAAM,mBAAmB,wGAM9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAUhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,4GAgD/B,CAAC;AAIH,eAAO,MAAM,cAAc,wGAiB1B,CAAC;AAIF,eAAO,MAAM,uBAAuB,8GAMlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,8GAEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAqBjC,CAAC;AAIF,eAAO,MAAM,UAAU,yGAiCrB,CAAC"}

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

@@ -211,6 +211,7 @@ export const StyledMenuList = styled.ul(({ theme }) => css `
     ${StyledEmptyState} {
       padding: ${theme.base.spacing};
+      height: auto;
     }
     li:not(:first-child) > ${StyledMenuGroupHeader} {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { StyledBareButton } from '../Button/BareButton';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport Button from '../Button';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledItemLabel = styled.label(({ theme }) => {\n const hoverCheckColor = tryCatch(() =>\n rgba(\n theme.components['radio-check'][':checked']['background-color'],\n theme.base.transparency['transparent-5']\n )\n );\n\n const checkedBackground = theme.components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n cursor: pointer;\n\n &:hover {\n & > input[type='radio']:not(:checked) + ${StyledIcon} {\n color: ${hoverCheckColor};\n }\n\n & > input[type='checkbox'] + ${StyledIcon} {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n\n > ${StyledGrid} {\n flex-grow: 1;\n }\n\n > input {\n ${hideVisually}\n\n & + ${StyledIcon} {\n margin-inline-start: 0;\n flex-shrink: 0;\n }\n\n &[type='radio'] + ${StyledIcon} {\n color: transparent;\n }\n\n &[type='radio']:checked + ${StyledIcon} {\n color: ${checkedBackground};\n }\n\n &[type='checkbox'] + ${StyledIcon} {\n border: 0.0625rem solid ${theme.components['radio-check']['border-color']};\n border-radius: min(\n calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),\n 0.25rem\n );\n color: transparent;\n background-color: ${theme.components['radio-check']['background-color']};\n }\n\n &[type='checkbox']:checked + ${StyledIcon} {\n background-color: ${checkedBackground};\n border-color: ${theme.components['radio-check'][':checked']['border-color']};\n color: ${checkedForeground};\n }\n }\n `;\n});\n\nStyledItemLabel.defaultProps = defaultThemeProp;\n\nexport const StyledMenuItem = styled.li<{ isParentItem: boolean }>(\n ({ theme: { base, components }, isParentItem }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n &:focus-within,\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n\n &[data-current='true'] {\n background-color: ${activeColor};\n }\n\n > button:first-child,\n > a:first-child {\n display: block;\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n text-decoration: none;\n color: inherit;\n ${isParentItem &&\n css`\n padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n `}\n }\n\n &[aria-disabled='true'] {\n label,\n ${StyledBareButton} {\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupList = styled.ul(({ theme }) => {\n return css`\n ${StyledMenuItem} button {\n padding-inline-start: calc(1.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledMenuGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: inset ${base.shadow.focus};\n background-color: ${hoverColor};\n }\n\n &:hover {\n background-color: ${hoverColor};\n }\n\n & > ${StyledBareButton}, & > button {\n color: ${base.palette['foreground-color']};\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square */\n display: block;\n }\n }\n\n > button[data-current='true'] {\n background-color: ${hoverColor};\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n }\n\n li:not(:first-child) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n max-height: 50vh;\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n return css`\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { StyledBareButton } from '../Button/BareButton';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport Button from '../Button';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledItemLabel = styled.label(({ theme }) => {\n const hoverCheckColor = tryCatch(() =>\n rgba(\n theme.components['radio-check'][':checked']['background-color'],\n theme.base.transparency['transparent-5']\n )\n );\n\n const checkedBackground = theme.components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n cursor: pointer;\n\n &:hover {\n & > input[type='radio']:not(:checked) + ${StyledIcon} {\n color: ${hoverCheckColor};\n }\n\n & > input[type='checkbox'] + ${StyledIcon} {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n\n > ${StyledGrid} {\n flex-grow: 1;\n }\n\n > input {\n ${hideVisually}\n\n & + ${StyledIcon} {\n margin-inline-start: 0;\n flex-shrink: 0;\n }\n\n &[type='radio'] + ${StyledIcon} {\n color: transparent;\n }\n\n &[type='radio']:checked + ${StyledIcon} {\n color: ${checkedBackground};\n }\n\n &[type='checkbox'] + ${StyledIcon} {\n border: 0.0625rem solid ${theme.components['radio-check']['border-color']};\n border-radius: min(\n calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),\n 0.25rem\n );\n color: transparent;\n background-color: ${theme.components['radio-check']['background-color']};\n }\n\n &[type='checkbox']:checked + ${StyledIcon} {\n background-color: ${checkedBackground};\n border-color: ${theme.components['radio-check'][':checked']['border-color']};\n color: ${checkedForeground};\n }\n }\n `;\n});\n\nStyledItemLabel.defaultProps = defaultThemeProp;\n\nexport const StyledMenuItem = styled.li<{ isParentItem: boolean }>(\n ({ theme: { base, components }, isParentItem }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n &:focus-within,\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n\n &[data-current='true'] {\n background-color: ${activeColor};\n }\n\n > button:first-child,\n > a:first-child {\n display: block;\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n text-decoration: none;\n color: inherit;\n ${isParentItem &&\n css`\n padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n `}\n }\n\n &[aria-disabled='true'] {\n label,\n ${StyledBareButton} {\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupList = styled.ul(({ theme }) => {\n return css`\n ${StyledMenuItem} button {\n padding-inline-start: calc(1.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledMenuGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: inset ${base.shadow.focus};\n background-color: ${hoverColor};\n }\n\n &:hover {\n background-color: ${hoverColor};\n }\n\n & > ${StyledBareButton}, & > button {\n color: ${base.palette['foreground-color']};\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square */\n display: block;\n }\n }\n\n > button[data-current='true'] {\n background-color: ${hoverColor};\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n height: auto;\n }\n\n li:not(:first-child) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n max-height: 50vh;\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n return css`\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n"]}

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

@@ -58,7 +58,7 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
     }
     return (_jsx(Flex, { ...restProps, container: {
             direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { grow: 1, shrink: 0 }, as: StyledTabs, ref: ref, type: type, role: 'tablist', children: tabs.map((tab, i) => {
+        }, item: { shrink: 0 }, as: StyledTabs, ref: ref, type: type, role: 'tablist', children: tabs.map((tab, i) => {
             const { href, name, count, id, disabled } = tab;
             const selected = id === currentTabId;
             return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && (_jsx(Count, { variant: selected ? 'interactive' : badgeVariant, children: count }, void 0)), href: href, inverted: inverted || false, selected: selected, onClick: (event) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EAGV,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,iBAAiB,CAAC;AAGpC,OAAO,GAAG,MAAM,OAAO,CAAC;AAKxB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;gBAEV,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;MACpD,IAAI,KAAK,YAAY;IACvB,GAAG,CAAA;uCACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEnE;GACF,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EACE,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,YAAY,EACnB,YAAY,EACZ,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACe,EAC7B,GAAqB,EACrB,EAAE;IACF,iFAAiF;IACjF,MAAM,OAAO,GAAG,MAAM,CAA4C,EAAE,CAAC,CAAC;IAEtE,kDAAkD;IAClD,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAa,EAAQ,EAAE;QACnE,IAAI,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE;YAC3B,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE;gBAC/C,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAEhE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;iBAAM,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnD,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAChE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;SACF;IACH,CAAC,CAAC;IAEF,IAAI,YAAoC,CAAC;IACzC,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,UAAU,CAAC;KAC3B;SAAM;QACL,YAAY,GAAG,SAAS,CAAC;KAC1B;IAED,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACxD,EACD,IAAI,EAAE,EAAE,~~IAAI,EAAE,CAAC,EAAE,~~MAAM,EAAE,CAAC,EAAE,~~EAC5B~~,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,YAEb,IAAI,CAAC,GAAG,CAAC,CAAC,GAAY,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC;YAChD,MAAM,QAAQ,GAAG,EAAE,KAAK,YAAY,CAAC;YAErC,OAAO,CACL,KAAC,GAAG,IACF,EAAE,EAAE,EAAE,mBACS,QAAQ,mBACR,GAAG,EAAE,QAAQ,EAC5B,OAAO,EAAE,IAAI,EACb,KAAK,EACH,OAAO,KAAK,KAAK,QAAQ,IAAI,CAC3B,KAAC,KAAK,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,YAAG,KAAK,WAAS,CACzE,EAEH,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,KAAwD,EAAE,EAAE;oBACpE,UAAU,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAyC,EAAE,EAAE;oBACjD,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBAC1B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;wBACvE,CAAC,CAAC,cAAc,EAAE,CAAC;qBACpB;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAqB,EAAE,EAAE;oBACjC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACvB,CAAC,EAED,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,gBACvB,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IALb,EAAE,CAMP,CACH,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n FunctionComponent,\n MouseEvent,\n KeyboardEvent,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n ({ type, theme }) => css`\n position: relative;\n overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n ${type === 'horizontal' &&\n css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n height: max-content;\n `}\n `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/*\n The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(\n (\n {\n tabs = [],\n type = 'horizontal',\n currentTabId,\n onTabClick,\n inverted = false,\n ...restProps\n }: PropsWithoutRef<TabsProps>,\n ref: Ref<HTMLElement>\n ) => {\n // Used to keep a reference for every tab in order to focus them with key presses\n const tabRefs = useRef<(HTMLButtonElement \| HTMLAnchorElement)[]>([]);\n\n // Handles arrow keypresses for changing the focus\n const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n if (tabRefs.current?.length) {\n const { key } = event;\n if (key === 'ArrowRight' \|\| key === 'ArrowDown') {\n const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n if (!nextTab?.disabled) {\n nextTab?.focus();\n } else {\n changeTabFocus(event, nextIndex);\n }\n } else if (key === 'ArrowLeft' \|\| key === 'ArrowUp') {\n const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n if (!prevTab?.disabled) {\n prevTab?.focus();\n } else {\n changeTabFocus(event, prevIndex);\n }\n }\n }\n };\n\n let badgeVariant: 'inverted' \| 'default';\n if (inverted) {\n badgeVariant = 'inverted';\n } else {\n badgeVariant = 'default';\n }\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: type !== 'horizontal' ? 'column' : undefined\n }}\n item={{ ~~grow: 1,~~ shrink: 0 }}\n as={StyledTabs}\n ref={ref}\n type={type}\n role='tablist'\n >\n {tabs.map((tab: TabItem, i) => {\n const { href, name, count, id, disabled } = tab;\n const selected = id === currentTabId;\n\n return (\n <Tab\n id={id}\n aria-selected={selected}\n aria-controls={`${id}-panel`}\n content={name}\n count={\n typeof count === 'number' && (\n <Count variant={selected ? 'interactive' : badgeVariant}>{count}</Count>\n )\n }\n href={href}\n inverted={inverted \|\| false}\n selected={selected}\n onClick={(event: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n onTabClick?.(id, event);\n }}\n role='tab'\n ref={(el: HTMLButtonElement \| HTMLAnchorElement) => {\n tabRefs.current[i] = el;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: KeyboardEvent<any>) => {\n changeTabFocus(e, i);\n }}\n key={id}\n as={href ? Link : undefined}\n tabIndex={selected ? undefined : -1}\n aria-label={name}\n type={type}\n disabled={disabled}\n />\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Tabs;\n"]}
1	+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EAGV,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,iBAAiB,CAAC;AAGpC,OAAO,GAAG,MAAM,OAAO,CAAC;AAKxB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;gBAEV,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;MACpD,IAAI,KAAK,YAAY;IACvB,GAAG,CAAA;uCACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEnE;GACF,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EACE,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,YAAY,EACnB,YAAY,EACZ,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACe,EAC7B,GAAqB,EACrB,EAAE;IACF,iFAAiF;IACjF,MAAM,OAAO,GAAG,MAAM,CAA4C,EAAE,CAAC,CAAC;IAEtE,kDAAkD;IAClD,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAa,EAAQ,EAAE;QACnE,IAAI,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE;YAC3B,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE;gBAC/C,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAEhE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;iBAAM,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnD,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAChE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;SACF;IACH,CAAC,CAAC;IAEF,IAAI,YAAoC,CAAC;IACzC,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,UAAU,CAAC;KAC3B;SAAM;QACL,YAAY,GAAG,SAAS,CAAC;KAC1B;IAED,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACxD,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,YAEb,IAAI,CAAC,GAAG,CAAC,CAAC,GAAY,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC;YAChD,MAAM,QAAQ,GAAG,EAAE,KAAK,YAAY,CAAC;YAErC,OAAO,CACL,KAAC,GAAG,IACF,EAAE,EAAE,EAAE,mBACS,QAAQ,mBACR,GAAG,EAAE,QAAQ,EAC5B,OAAO,EAAE,IAAI,EACb,KAAK,EACH,OAAO,KAAK,KAAK,QAAQ,IAAI,CAC3B,KAAC,KAAK,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,YAAG,KAAK,WAAS,CACzE,EAEH,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,KAAwD,EAAE,EAAE;oBACpE,UAAU,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAyC,EAAE,EAAE;oBACjD,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBAC1B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;wBACvE,CAAC,CAAC,cAAc,EAAE,CAAC;qBACpB;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAqB,EAAE,EAAE;oBACjC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACvB,CAAC,EAED,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,gBACvB,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IALb,EAAE,CAMP,CACH,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n FunctionComponent,\n MouseEvent,\n KeyboardEvent,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n ({ type, theme }) => css`\n position: relative;\n overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n ${type === 'horizontal' &&\n css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n height: max-content;\n `}\n `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/*\n The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(\n (\n {\n tabs = [],\n type = 'horizontal',\n currentTabId,\n onTabClick,\n inverted = false,\n ...restProps\n }: PropsWithoutRef<TabsProps>,\n ref: Ref<HTMLElement>\n ) => {\n // Used to keep a reference for every tab in order to focus them with key presses\n const tabRefs = useRef<(HTMLButtonElement \| HTMLAnchorElement)[]>([]);\n\n // Handles arrow keypresses for changing the focus\n const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n if (tabRefs.current?.length) {\n const { key } = event;\n if (key === 'ArrowRight' \|\| key === 'ArrowDown') {\n const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n if (!nextTab?.disabled) {\n nextTab?.focus();\n } else {\n changeTabFocus(event, nextIndex);\n }\n } else if (key === 'ArrowLeft' \|\| key === 'ArrowUp') {\n const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n if (!prevTab?.disabled) {\n prevTab?.focus();\n } else {\n changeTabFocus(event, prevIndex);\n }\n }\n }\n };\n\n let badgeVariant: 'inverted' \| 'default';\n if (inverted) {\n badgeVariant = 'inverted';\n } else {\n badgeVariant = 'default';\n }\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: type !== 'horizontal' ? 'column' : undefined\n }}\n item={{ shrink: 0 }}\n as={StyledTabs}\n ref={ref}\n type={type}\n role='tablist'\n >\n {tabs.map((tab: TabItem, i) => {\n const { href, name, count, id, disabled } = tab;\n const selected = id === currentTabId;\n\n return (\n <Tab\n id={id}\n aria-selected={selected}\n aria-controls={`${id}-panel`}\n content={name}\n count={\n typeof count === 'number' && (\n <Count variant={selected ? 'interactive' : badgeVariant}>{count}</Count>\n )\n }\n href={href}\n inverted={inverted \|\| false}\n selected={selected}\n onClick={(event: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n onTabClick?.(id, event);\n }}\n role='tab'\n ref={(el: HTMLButtonElement \| HTMLAnchorElement) => {\n tabRefs.current[i] = el;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: KeyboardEvent<any>) => {\n changeTabFocus(e, i);\n }}\n key={id}\n as={href ? Link : undefined}\n tabIndex={selected ? undefined : -1}\n aria-label={name}\n type={type}\n disabled={disabled}\n />\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Tabs;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.5",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",