@pega/cosmos-react-core 3.0.0-dev.18.0 → 3.0.0-dev.18.1

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.
@@ -39,7 +39,7 @@ const CompositeInput = forwardRef((props, ref) => {
39
39
  closePopover();
40
40
  }, document, [closePopover]);
41
41
  const labelId = `${id}-label`;
42
- const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-expanded": !disabled && open, "aria-describedby": info ? `${id}-info` : undefined, readOnly: true, required: required, onClick: () => {
42
+ const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-expanded": !disabled && open, "aria-describedby": info ? `${id}-info` : undefined, readOnly: true, required: required, onClick: () => {
43
43
  if (!disabled) {
44
44
  setOpen(true);
45
45
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useEffect, useRef, useState } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { ForwardProps } from '../../types';\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\n\nimport {\n StyledCompositeInput,\n StyledInputButton,\n StyledInputContainer\n} from './CompositeInput.styles';\nimport { CompositeInputProps } from './CompositeInput.types';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nconst CompositeInput = forwardRef(\n (props: PropsWithoutRef<CompositeInputProps>, ref: CompositeInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n disabled,\n value,\n onClear,\n required,\n status,\n info,\n label,\n labelHidden,\n dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n ...restProps\n } = props;\n const t = useI18n();\n\n const [open, setOpen] = useState(false);\n\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n const buttonRef = useRef<HTMLInputElement>(null);\n const formContentRef = useRef<HTMLElement>(null);\n\n const closePopover = () => {\n setOpen(false);\n buttonRef.current?.focus();\n };\n\n useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n if (open) onCancel({ close: closePopover });\n });\n\n useEffect(() => {\n if (open) {\n getFocusables(formContentRef)[0]?.focus();\n }\n }, [open, formContentRef.current]);\n\n useEscape(\n e => {\n e.preventDefault();\n closePopover();\n },\n document,\n [closePopover]\n );\n\n const labelId = `${id}-label`;\n\n const Comp = (\n <Flex\n as={StyledCompositeInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n status={status}\n disabled={disabled}\n ref={containerRef}\n >\n <Flex container={{ alignItems: 'center' }} as={StyledInputContainer}>\n <StyledInputButton\n {...restProps}\n id={id}\n disabled={disabled}\n aria-haspopup='dialog'\n aria-expanded={!disabled && open}\n aria-describedby={info ? `${id}-info` : undefined}\n readOnly\n required={required}\n onClick={() => {\n if (!disabled) {\n setOpen(true);\n }\n }}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n e.preventDefault();\n setOpen(true);\n }\n }}\n value={value ?? ''}\n ref={buttonRef}\n />\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n style={{ pointerEvents: value ? '' : 'none' }}\n >\n {value && !open ? (\n <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n <Icon name='times' />\n </Button>\n ) : (\n <Icon name='caret-down' />\n )}\n </Flex>\n </Flex>\n\n {open && (\n <Popover\n ref={setPopoverEl}\n role='dialog'\n target={containerRef.current}\n placement='bottom-start'\n strategy='fixed'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n }\n ]}\n >\n <Flex container={{ direction: 'column', gap: 1.5, pad: 2 }} ref={formContentRef}>\n <Renderer {...rendererProps} />\n <Flex container={{ justify: 'between' }}>\n <Button variant='secondary' onClick={() => onCancel({ close: closePopover })}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onApply({ close: closePopover })}>\n {t('apply')}\n </Button>\n </Flex>\n </Flex>\n </Popover>\n )}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled, labelId }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n) as <P extends object>(props: CompositeInputProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default CompositeInput;\n"]}
1
+ {"version":3,"file":"CompositeInput.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useEffect, useRef, useState } from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { ForwardProps } from '../../types';\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport { StyledFormControl } from '../FormControl';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\n\nimport {\n StyledCompositeInput,\n StyledInputButton,\n StyledInputContainer\n} from './CompositeInput.styles';\nimport { CompositeInputProps } from './CompositeInput.types';\n\nregisterIcon(caretDownIcon, timesIcon);\n\nconst CompositeInput = forwardRef(\n (props: PropsWithoutRef<CompositeInputProps>, ref: CompositeInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n disabled,\n value,\n onClear,\n required,\n status,\n info,\n label,\n labelHidden,\n dialog: { renderer: Renderer, rendererProps, onApply, onCancel },\n ...restProps\n } = props;\n const t = useI18n();\n\n const [open, setOpen] = useState(false);\n\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref);\n const buttonRef = useRef<HTMLInputElement>(null);\n const formContentRef = useRef<HTMLElement>(null);\n\n const closePopover = () => {\n setOpen(false);\n buttonRef.current?.focus();\n };\n\n useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n if (open) onCancel({ close: closePopover });\n });\n\n useEffect(() => {\n if (open) {\n getFocusables(formContentRef)[0]?.focus();\n }\n }, [open, formContentRef.current]);\n\n useEscape(\n e => {\n e.preventDefault();\n closePopover();\n },\n document,\n [closePopover]\n );\n\n const labelId = `${id}-label`;\n\n const Comp = (\n <Flex\n as={StyledCompositeInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n status={status}\n disabled={disabled}\n ref={containerRef}\n >\n <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }} as={StyledInputContainer}>\n <StyledInputButton\n {...restProps}\n id={id}\n disabled={disabled}\n aria-haspopup='dialog'\n aria-expanded={!disabled && open}\n aria-describedby={info ? `${id}-info` : undefined}\n readOnly\n required={required}\n onClick={() => {\n if (!disabled) {\n setOpen(true);\n }\n }}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n e.preventDefault();\n setOpen(true);\n }\n }}\n value={value ?? ''}\n ref={buttonRef}\n />\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n style={{ pointerEvents: value ? '' : 'none' }}\n >\n {value && !open ? (\n <Button icon compact variant='simple' label={t('clear')} onClick={onClear}>\n <Icon name='times' />\n </Button>\n ) : (\n <Icon name='caret-down' />\n )}\n </Flex>\n </Flex>\n\n {open && (\n <Popover\n ref={setPopoverEl}\n role='dialog'\n target={containerRef.current}\n placement='bottom-start'\n strategy='fixed'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n }\n ]}\n >\n <Flex container={{ direction: 'column', gap: 1.5, pad: 2 }} ref={formContentRef}>\n <Renderer {...rendererProps} />\n <Flex container={{ justify: 'between' }}>\n <Button variant='secondary' onClick={() => onCancel({ close: closePopover })}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onApply({ close: closePopover })}>\n {t('apply')}\n </Button>\n </Flex>\n </Flex>\n </Popover>\n )}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled, labelId }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n) as <P extends object>(props: CompositeInputProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default CompositeInput;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"CompositeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2GAkB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAgChC,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
1
+ {"version":3,"file":"CompositeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2GAmB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAgChC,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
@@ -15,7 +15,8 @@ export const StyledInputButton = styled(StyledInput) `
15
15
 
16
16
  & + div {
17
17
  position: absolute;
18
- inset: 0.0625rem 0 0.0625rem calc(100% - 2rem);
18
+ inset-block: 0.0625rem;
19
+ inset-inline: calc(100% - 2rem) 0;
19
20
  ${StyledButton} ${StyledIcon} {
20
21
  width: 1rem;
21
22
  height: 1rem;
@@ -1 +1 @@
1
- {"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;;;;;MAa9C,YAAY,IAAI,UAAU;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;sBAGlB,OAAO,CAAC,YAAY,CAAC;;;;wBAInB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledIcon } from '../Icon';\n\nexport const StyledInputButton = styled(StyledInput)`\n padding-inline-end: 2rem;\n background-color: inherit;\n color: currentColor;\n outline: none;\n border: 0;\n caret-color: transparent;\n cursor: pointer;\n width: 100%;\n\n & + div {\n position: absolute;\n inset: 0.0625rem 0 0.0625rem calc(100% - 2rem);\n ${StyledButton} ${StyledIcon} {\n width: 1rem;\n height: 1rem;\n }\n }\n`;\n\nexport const StyledInputContainer = styled.div`\n position: relative;\n`;\n\nexport const StyledCompositeInput = styled.div(\n ({\n theme: {\n base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n components: { 'form-control': formControl, input }\n }\n }) => {\n return css`\n height: ${input.height};\n min-height: ${hitArea['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${hitArea['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 & > ${StyledButton} {\n border-start-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n }\n `;\n }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\n"]}
1
+ {"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;;;;;;MAc9C,YAAY,IAAI,UAAU;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;sBAGlB,OAAO,CAAC,YAAY,CAAC;;;;wBAInB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledIcon } from '../Icon';\n\nexport const StyledInputButton = styled(StyledInput)`\n padding-inline-end: 2rem;\n background-color: inherit;\n color: currentColor;\n outline: none;\n border: 0;\n caret-color: transparent;\n cursor: pointer;\n width: 100%;\n\n & + div {\n position: absolute;\n inset-block: 0.0625rem;\n inset-inline: calc(100% - 2rem) 0;\n ${StyledButton} ${StyledIcon} {\n width: 1rem;\n height: 1rem;\n }\n }\n`;\n\nexport const StyledInputContainer = styled.div`\n position: relative;\n`;\n\nexport const StyledCompositeInput = styled.div(\n ({\n theme: {\n base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n components: { 'form-control': formControl, input }\n }\n }) => {\n return css`\n height: ${input.height};\n min-height: ${hitArea['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${hitArea['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 & > ${StyledButton} {\n border-start-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n }\n `;\n }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\n"]}
package/lib/init.js CHANGED
@@ -1,4 +1,4 @@
1
- if (!window.cosmos) {
1
+ if (window && !window.cosmos) {
2
2
  Object.defineProperty(window, 'cosmos', { value: {} });
3
3
  }
4
4
  export {};
package/lib/init.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"init.js","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":"AAQA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;IAClB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;CACxD","sourcesContent":["export interface CosmosGlobals {}\n\ndeclare global {\n interface Window {\n cosmos: CosmosGlobals;\n }\n}\n\nif (!window.cosmos) {\n Object.defineProperty(window, 'cosmos', { value: {} });\n}\n"]}
1
+ {"version":3,"file":"init.js","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":"AAQA,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;IAC5B,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;CACxD","sourcesContent":["export interface CosmosGlobals {}\n\ndeclare global {\n interface Window {\n cosmos: CosmosGlobals;\n }\n}\n\nif (window && !window.cosmos) {\n Object.defineProperty(window, 'cosmos', { value: {} });\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "3.0.0-dev.18.0",
3
+ "version": "3.0.0-dev.18.1",
4
4
  "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
5
5
  "author": "Pegasystems",
6
6
  "license": "SEE LICENSE IN LICENSE",