@pega/cosmos-react-core 7.0.0-build.30.0 → 7.0.0-build.30.2

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 (10) hide show
  1. package/lib/components/Button/Button.d.ts.map +1 -1
  2. package/lib/components/Button/Button.js +2 -5
  3. package/lib/components/Button/Button.js.map +1 -1
  4. package/lib/components/File/FileInput.d.ts.map +1 -1
  5. package/lib/components/File/FileInput.js +2 -2
  6. package/lib/components/File/FileInput.js.map +1 -1
  7. package/lib/components/Tabs/TabPanel.d.ts.map +1 -1
  8. package/lib/components/Tabs/TabPanel.js +1 -0
  9. package/lib/components/Tabs/TabPanel.js.map +1 -1
  10. package/package.json +1 -1
package/lib/components/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAiBtF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAqEF,eAAO,MAAM,YAAY,qGAiPxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,gJAoD3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgGxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAiBtF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAqEF,eAAO,MAAM,YAAY,qGA8OxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,gJAoD3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgGxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
package/lib/components/Button/Button.js CHANGED
@@ -51,12 +51,12 @@ const getFilledButtonStyles = (color) => ({
51
51
  const getOutlinedButtonStyles = (color, backgroundColor) => {
52
52
  const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;
53
53
  const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);
54
- const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, usableColor));
54
+ const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));
55
55
  const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));
56
56
  return {
57
57
  textColor: backgroundUsable ? color : readableColor(color),
58
58
  hoverBg: hoverBackgroundColor,
59
- hoverFg: readableHue(usableColor, hoverBackgroundColor ?? 'transparent'),
59
+ hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),
60
60
  activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),
61
61
  activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')
62
62
  };
@@ -139,7 +139,6 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
139
139
  @media (hover: hover) {
140
140
  &:hover {
141
141
  background-color: ${hoverColors.background};
142
- color: ${hoverColors.foreground};
143
142
  text-decoration: none;
144
143
  }
145
144
  }
@@ -160,10 +159,8 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
160
159
 
161
160
  @media (hover: hover) {
162
161
  &:hover {
163
- color: ${secondaryOutlineButtonStyles.hoverFg};
164
162
  background-color: ${secondaryOutlineButtonStyles.hoverBg};
165
163
  text-decoration: none;
166
- border-color: ${secondaryOutlineButtonStyles.hoverFg};
167
164
  }
168
165
  }
169
166
 
package/lib/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\nconst getFilledButtonStyles = (color: string) => ({\n contrastColor: tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(color),\n activeColors: getActiveColors(color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, usableColor));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(usableColor, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n }\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n\n &::after {\n content: '';\n position: absolute;\n inset: calc(-1 * ${borderWidth});\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n transition: translate calc(0.5 * ${speed}) ${ease};\n }\n\n &:active::after {\n translate: 0 -0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(\n variant === 'primary' ? color : secondaryColor\n );\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n color: ${hoverColors.foreground};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n color: ${secondaryOutlineButtonStyles.hoverFg};\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n border-color: ${secondaryOutlineButtonStyles.hoverFg};\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n Pick<ButtonPropsWithDefaults, 'variant'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n const {\n base: {\n palette: { 'foreground-color': textColor }\n },\n components: {\n link: { color: linkColor }\n }\n } = theme;\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const { background: activeColor } = getActiveColors(linkColor);\n const link = css`\n color: ${linkColor};\n\n &:active {\n color: ${activeColor};\n }\n `;\n\n const text = css`\n color: ${textColor};\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n) {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n buttonRef.current.click();\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\nconst getFilledButtonStyles = (color: string) => ({\n contrastColor: tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(color),\n activeColors: getActiveColors(color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n }\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n\n &::after {\n content: '';\n position: absolute;\n inset: calc(-1 * ${borderWidth});\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n transition: translate calc(0.5 * ${speed}) ${ease};\n }\n\n &:active::after {\n translate: 0 -0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(\n variant === 'primary' ? color : secondaryColor\n );\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n Pick<ButtonPropsWithDefaults, 'variant'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n const {\n base: {\n palette: { 'foreground-color': textColor }\n },\n components: {\n link: { color: linkColor }\n }\n } = theme;\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const { background: activeColor } = getActiveColors(linkColor);\n const link = css`\n color: ${linkColor};\n\n &:active {\n color: ${activeColor};\n }\n `;\n\n const text = css`\n color: ${textColor};\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n) {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n buttonRef.current.click();\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
package/lib/components/File/FileInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAE7F,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,UAAU,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAWnG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAoBhD,8EAA8E;AAC9E,UAAU,uBAAuB;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG;QACzC,iCAAiC;QACjC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,iCAAiC;QACjC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,sDAAsD;QACtD,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,UAAU,kBACR,SAAQ,SAAS,EACf,cAAc,EACd,UAAU,EACV,IAAI,CAAC,aAAa,EAAE,oBAAoB,CAAC,EACzC,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;IACtC,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC,aAAa,EAAE,oBAAoB,CAAC,EAAE,CAAC;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,uBAAuB;CAAG;;;;AAuetF,wBAA2D"}
1
+ {"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAE7F,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,UAAU,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAWnG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAoBhD,8EAA8E;AAC9E,UAAU,uBAAuB;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG;QACzC,iCAAiC;QACjC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,iCAAiC;QACjC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,sDAAsD;QACtD,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,UAAU,kBACR,SAAQ,SAAS,EACf,cAAc,EACd,UAAU,EACV,IAAI,CAAC,aAAa,EAAE,oBAAoB,CAAC,EACzC,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;IACtC,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC,aAAa,EAAE,oBAAoB,CAAC,EAAE,CAAC;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,uBAAuB;CAAG;;;;AAyetF,wBAA2D"}
package/lib/components/File/FileInput.js CHANGED
@@ -62,7 +62,7 @@ const BaseFileInput = forwardRef(function FileInput(props, ref) {
62
62
  if (target) {
63
63
  target.dispatchEvent(new Event('focusout'));
64
64
  }
65
- }, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept, onClick: readOnly
65
+ }, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept, "aria-describedby": `${id}-info`, onClick: readOnly
66
66
  ? e => {
67
67
  e.preventDefault();
68
68
  }
@@ -187,7 +187,7 @@ const FileInput = forwardRef(function FileInput(props, ref) {
187
187
  modalMethods.current = create(AttachFilesModal, { ...modalProps, readOnly }, { dismissible: readOnly });
188
188
  }, "aria-label": count && count > 0
189
189
  ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`
190
- : undefined, disabled: disabled, ...(!disabled && !readOnly
190
+ : undefined, "aria-describedby": `${id}-info`, disabled: disabled, ...(!disabled && !readOnly
191
191
  ? {
192
192
  onDragOver: (e) => {
193
193
  e.preventDefault();
package/lib/components/File/FileInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\n\nimport {\n MetaList,\n type FileListProps,\n type ModalProps,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, OmitStrict, TestIdProp } from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useTestIds,\n usePrevious,\n useElement,\n useModalManager,\n useModalContext\n} from '../../hooks';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport { getActiveElement, getFocusables, withTestIds } from '../../utils';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport Modal, { type ModalMethods } from '../Modal';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\nimport {\n StyledBareButton,\n StyledDropZone,\n StyledFileInput,\n StyledIconWrapper,\n StyledAttachedFileCount,\n StyledSingleFileWrapper,\n StyledUploadStatus,\n StyledFlex,\n StyledFormField,\n StyledFileInputControl,\n StyledDownloadAllButton\n} from './FileInput.styles';\n\nregisterIcon(paperClipIcon);\n\n/** Props to be used when rendering compact variant for multiple FileInput. */\ninterface MultiAttachCompactProps {\n /** Modal props */\n modal?: Pick<ModalProps, 'onBeforeOpen'> & {\n /** Callback for cancel button */\n onCancel: ({ close }: { close: () => void }) => void;\n /** Callback for submit button */\n onSubmit: ({ close }: { close: () => void }) => void;\n /** If true renders loading indicator inside Modal. */\n loading?: boolean;\n };\n /** Conveys the number of files attached */\n count?: number;\n}\n\ninterface ComponentProps\n extends Pick<BaseFileInputProps, 'compact' | 'multiple' | 'status' | 'readOnly'>,\n Pick<MultiAttachCompactProps, 'count'> {\n dragOver?: boolean;\n}\n\ninterface BaseFileInputProps\n extends BaseProps,\n NoChildrenProp,\n TestIdProp,\n Pick<FileItemProps, 'previewFromActions'>,\n Pick<FileListProps, 'onDownloadAll'> {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /**\n * Renders compact variant.\n * @default false\n */\n compact?: boolean;\n /** An array of files that have been uploaded. */\n files?: OmitStrict<FileItemProps, 'previewFromActions'>[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport interface FileInputProps extends BaseFileInputProps, MultiAttachCompactProps {}\n\nconst Component: FunctionComponent<ComponentProps> = props => {\n const { compact, multiple, status, count, dragOver = false, readOnly } = props;\n const t = useI18n();\n\n const attachedFileCount =\n multiple && count ? (\n <StyledAttachedFileCount>{t('number_of_items', [count], { count })}</StyledAttachedFileCount>\n ) : undefined;\n\n return (\n <>\n <StyledUploadStatus\n item={{ grow: 1 }}\n container={{ justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n >\n <Text variant='secondary'>\n {compact\n ? attachedFileCount\n : t('file_upload_text_main', [\n t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n ])}\n </Text>\n </StyledUploadStatus>\n\n <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n <Icon name='paper-clip' />\n </StyledIconWrapper>\n </>\n );\n};\n\nconst BaseFileInput: FunctionComponent<BaseFileInputProps & ForwardProps> = forwardRef(\n function FileInput(props: PropsWithoutRef<BaseFileInputProps>, ref: BaseFileInputProps['ref']) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n files,\n onDownloadAll,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n compact = false,\n previewFromActions = false,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n const [target, setTarget] = useElement<HTMLElement>();\n\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLDivElement>();\n const activeElement = getActiveElement();\n const activeElementInList = fileItemListRef.current?.contains(activeElement);\n const isInputActiveElement = activeElement === inputRef.current;\n const compactWithSingleAttach = compact && !multiple;\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onFocus={() => {\n if (target) {\n target.dispatchEvent(new Event('focusin'));\n }\n }}\n onBlur={() => {\n if (target) {\n target.dispatchEvent(new Event('focusout'));\n }\n }}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n onClick={\n readOnly\n ? e => {\n e.preventDefault();\n }\n : undefined\n }\n />\n <Flex\n container\n as={StyledDropZone}\n disabled={disabled}\n readOnly={readOnly}\n onClick={() => {\n inputRef.current?.focus();\n if (!readOnly) {\n inputRef.current?.click();\n }\n }}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n\n const fileList = Array.from(e.dataTransfer.files);\n onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));\n }\n }\n : undefined)}\n compactMode={compact}\n ref={setTarget}\n >\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </Flex>\n {compactWithSingleAttach && target && (\n <Tooltip target={target} describeTarget>\n {t('file_upload_text_main', [t('file_upload_text_one')])}\n </Tooltip>\n )}\n </StyledFileInput>\n );\n\n const getReadOnlyFile = (file: FileItemProps) => {\n const readOnlyFile = { ...file };\n delete readOnlyFile.onCancel;\n delete readOnlyFile.onEdit;\n delete readOnlyFile.onDelete;\n delete readOnlyFile.progress;\n return readOnlyFile;\n };\n\n const fileItemList = hideFileInput ? (\n <StyledSingleFileWrapper\n data-testid={testIds.files}\n compact={compact}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n >\n <FileItem\n {...(readOnly ? getReadOnlyFile(files[0]) : files[0])}\n compact={compact}\n previewFromActions={compactWithSingleAttach && previewFromActions}\n disabled={disabled}\n />\n </StyledSingleFileWrapper>\n ) : (\n <FileList\n type='item'\n items={\n readOnly\n ? files?.map(file => {\n return getReadOnlyFile(file);\n }) ?? []\n : files ?? []\n }\n data-testid={testIds.files}\n disabled={disabled}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n />\n );\n\n const prevFiles = usePrevious(files);\n useEffect(() => {\n if (\n !multiple &&\n prevFiles?.length === 0 &&\n files?.length === 1 &&\n fileItemListRef.current &&\n isInputActiveElement\n ) {\n getFocusables(fileItemListRef.current)[0]?.focus();\n }\n\n if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n inputRef.current?.focus();\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n const fileInputInfoActions = useMemo(() => {\n if (info && !onDownloadAll) {\n return info;\n }\n\n const downloadAllButton = (\n <Button onClick={onDownloadAll} variant='link'>\n {t('download_all')}\n </Button>\n );\n\n if (onDownloadAll && !info && files && files.length > 1 && multiple) {\n return downloadAllButton;\n }\n\n if (info && onDownloadAll) {\n if (files && files.length > 1 && multiple) {\n return <MetaList items={[info, downloadAllButton]} />;\n }\n return info;\n }\n }, [info, onDownloadAll]);\n\n return (\n <Flex\n container={{ rowGap: hideFileInput ? undefined : 1, direction: 'column' }}\n as={StyledFileInputControl}\n status={status}\n >\n {label ? (\n <StyledFormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{t('read_only')}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={fileInputInfoActions}\n required={required}\n disabled={!hideFileInput && disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode={compactWithSingleAttach}\n >\n <>\n {renderElement}\n {readOnly && files && files.length > 1 && multiple && (\n <StyledDownloadAllButton variant='link' onClick={onDownloadAll}>\n {t('download_all')}\n </StyledDownloadAllButton>\n )}\n </>\n </StyledFormField>\n ) : (\n renderElement\n )}\n {multiple && !compact && files && files.length > 0 && fileItemList}\n </Flex>\n );\n }\n);\n\nconst AttachFilesModal: FunctionComponent<\n {\n modalContent?: JSX.Element;\n readOnly: FileInputProps['readOnly'];\n } & Pick<MultiAttachCompactProps, 'modal'>\n> = ({ modalContent, modal, readOnly }) => {\n const t = useI18n();\n const { dismiss } = useModalContext();\n\n const formActions = (\n <>\n <Button\n disabled={modal?.loading}\n onClick={() => {\n if (modal?.onCancel) modal.onCancel({ close: dismiss });\n }}\n >\n {t('cancel')}\n </Button>\n\n <Button\n disabled={modal?.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n if (modal?.onSubmit) modal.onSubmit({ close: dismiss });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n\n return (\n <Modal\n progress={modal?.loading}\n heading={t('attach_files')}\n actions={!readOnly ? formActions : undefined}\n onBeforeOpen={modal?.onBeforeOpen}\n >\n {modalContent}\n </Modal>\n );\n};\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const { modal, count, ...baseFileInputProps } = props;\n\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n compact = false\n } = baseFileInputProps;\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n\n let modalContent: JSX.Element | undefined;\n\n if (compact && multiple) {\n modalContent = (\n <BaseFileInput\n {...baseFileInputProps}\n multiple\n compact={false}\n labelHidden={false}\n ref={ref}\n />\n );\n }\n\n const modalProps = {\n modal,\n modalContent\n };\n\n useEffect(() => {\n if (compact && multiple && modal) {\n modalMethods.current?.update({\n modal,\n modalContent,\n readOnly\n });\n }\n }, [compact, multiple, modal, readOnly, modalProps]);\n\n useEffect(() => {\n return () => {\n if (modalMethods.current) {\n modalMethods.current?.dismiss();\n modalMethods.current?.unmount();\n }\n };\n }, []);\n\n if (compact && multiple) {\n const render = (\n <Flex container>\n <StyledBareButton\n id={id}\n onClick={() => {\n modalMethods.current = create(\n AttachFilesModal,\n { ...modalProps, readOnly },\n { dismissible: readOnly }\n );\n }}\n aria-label={\n count && count > 0\n ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`\n : undefined\n }\n disabled={disabled}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n if (buttonEl) buttonEl.click();\n }\n }\n : undefined)}\n ref={setButtonEl}\n >\n <StyledFlex container>\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n count={count}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </StyledFlex>\n </StyledBareButton>\n {buttonEl && (\n <Tooltip target={buttonEl} describeTarget={count === 0}>\n {count && count > 0\n ? t('attach_review')\n : t('file_upload_text_main', [t('file_upload_text_multiple')])}\n </Tooltip>\n )}\n </Flex>\n );\n\n return label ? (\n <StyledFormField\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode\n >\n {render}\n </StyledFormField>\n ) : (\n render\n );\n }\n\n return <BaseFileInput {...baseFileInputProps} ref={ref} />;\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
1
+ {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\n\nimport {\n MetaList,\n type FileListProps,\n type ModalProps,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, OmitStrict, TestIdProp } from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useTestIds,\n usePrevious,\n useElement,\n useModalManager,\n useModalContext\n} from '../../hooks';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport { getActiveElement, getFocusables, withTestIds } from '../../utils';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport Modal, { type ModalMethods } from '../Modal';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\nimport {\n StyledBareButton,\n StyledDropZone,\n StyledFileInput,\n StyledIconWrapper,\n StyledAttachedFileCount,\n StyledSingleFileWrapper,\n StyledUploadStatus,\n StyledFlex,\n StyledFormField,\n StyledFileInputControl,\n StyledDownloadAllButton\n} from './FileInput.styles';\n\nregisterIcon(paperClipIcon);\n\n/** Props to be used when rendering compact variant for multiple FileInput. */\ninterface MultiAttachCompactProps {\n /** Modal props */\n modal?: Pick<ModalProps, 'onBeforeOpen'> & {\n /** Callback for cancel button */\n onCancel: ({ close }: { close: () => void }) => void;\n /** Callback for submit button */\n onSubmit: ({ close }: { close: () => void }) => void;\n /** If true renders loading indicator inside Modal. */\n loading?: boolean;\n };\n /** Conveys the number of files attached */\n count?: number;\n}\n\ninterface ComponentProps\n extends Pick<BaseFileInputProps, 'compact' | 'multiple' | 'status' | 'readOnly'>,\n Pick<MultiAttachCompactProps, 'count'> {\n dragOver?: boolean;\n}\n\ninterface BaseFileInputProps\n extends BaseProps,\n NoChildrenProp,\n TestIdProp,\n Pick<FileItemProps, 'previewFromActions'>,\n Pick<FileListProps, 'onDownloadAll'> {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /**\n * Renders compact variant.\n * @default false\n */\n compact?: boolean;\n /** An array of files that have been uploaded. */\n files?: OmitStrict<FileItemProps, 'previewFromActions'>[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport interface FileInputProps extends BaseFileInputProps, MultiAttachCompactProps {}\n\nconst Component: FunctionComponent<ComponentProps> = props => {\n const { compact, multiple, status, count, dragOver = false, readOnly } = props;\n const t = useI18n();\n\n const attachedFileCount =\n multiple && count ? (\n <StyledAttachedFileCount>{t('number_of_items', [count], { count })}</StyledAttachedFileCount>\n ) : undefined;\n\n return (\n <>\n <StyledUploadStatus\n item={{ grow: 1 }}\n container={{ justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n >\n <Text variant='secondary'>\n {compact\n ? attachedFileCount\n : t('file_upload_text_main', [\n t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n ])}\n </Text>\n </StyledUploadStatus>\n\n <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n <Icon name='paper-clip' />\n </StyledIconWrapper>\n </>\n );\n};\n\nconst BaseFileInput: FunctionComponent<BaseFileInputProps & ForwardProps> = forwardRef(\n function FileInput(props: PropsWithoutRef<BaseFileInputProps>, ref: BaseFileInputProps['ref']) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n files,\n onDownloadAll,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n compact = false,\n previewFromActions = false,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n const [target, setTarget] = useElement<HTMLElement>();\n\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLDivElement>();\n const activeElement = getActiveElement();\n const activeElementInList = fileItemListRef.current?.contains(activeElement);\n const isInputActiveElement = activeElement === inputRef.current;\n const compactWithSingleAttach = compact && !multiple;\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onFocus={() => {\n if (target) {\n target.dispatchEvent(new Event('focusin'));\n }\n }}\n onBlur={() => {\n if (target) {\n target.dispatchEvent(new Event('focusout'));\n }\n }}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n aria-describedby={`${id}-info`}\n onClick={\n readOnly\n ? e => {\n e.preventDefault();\n }\n : undefined\n }\n />\n <Flex\n container\n as={StyledDropZone}\n disabled={disabled}\n readOnly={readOnly}\n onClick={() => {\n inputRef.current?.focus();\n if (!readOnly) {\n inputRef.current?.click();\n }\n }}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n\n const fileList = Array.from(e.dataTransfer.files);\n onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));\n }\n }\n : undefined)}\n compactMode={compact}\n ref={setTarget}\n >\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </Flex>\n {compactWithSingleAttach && target && (\n <Tooltip target={target} describeTarget>\n {t('file_upload_text_main', [t('file_upload_text_one')])}\n </Tooltip>\n )}\n </StyledFileInput>\n );\n\n const getReadOnlyFile = (file: FileItemProps) => {\n const readOnlyFile = { ...file };\n delete readOnlyFile.onCancel;\n delete readOnlyFile.onEdit;\n delete readOnlyFile.onDelete;\n delete readOnlyFile.progress;\n return readOnlyFile;\n };\n\n const fileItemList = hideFileInput ? (\n <StyledSingleFileWrapper\n data-testid={testIds.files}\n compact={compact}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n >\n <FileItem\n {...(readOnly ? getReadOnlyFile(files[0]) : files[0])}\n compact={compact}\n previewFromActions={compactWithSingleAttach && previewFromActions}\n disabled={disabled}\n />\n </StyledSingleFileWrapper>\n ) : (\n <FileList\n type='item'\n items={\n readOnly\n ? files?.map(file => {\n return getReadOnlyFile(file);\n }) ?? []\n : files ?? []\n }\n data-testid={testIds.files}\n disabled={disabled}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n />\n );\n\n const prevFiles = usePrevious(files);\n useEffect(() => {\n if (\n !multiple &&\n prevFiles?.length === 0 &&\n files?.length === 1 &&\n fileItemListRef.current &&\n isInputActiveElement\n ) {\n getFocusables(fileItemListRef.current)[0]?.focus();\n }\n\n if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n inputRef.current?.focus();\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n const fileInputInfoActions = useMemo(() => {\n if (info && !onDownloadAll) {\n return info;\n }\n\n const downloadAllButton = (\n <Button onClick={onDownloadAll} variant='link'>\n {t('download_all')}\n </Button>\n );\n\n if (onDownloadAll && !info && files && files.length > 1 && multiple) {\n return downloadAllButton;\n }\n\n if (info && onDownloadAll) {\n if (files && files.length > 1 && multiple) {\n return <MetaList items={[info, downloadAllButton]} />;\n }\n return info;\n }\n }, [info, onDownloadAll]);\n\n return (\n <Flex\n container={{ rowGap: hideFileInput ? undefined : 1, direction: 'column' }}\n as={StyledFileInputControl}\n status={status}\n >\n {label ? (\n <StyledFormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{t('read_only')}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={fileInputInfoActions}\n required={required}\n disabled={!hideFileInput && disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode={compactWithSingleAttach}\n >\n <>\n {renderElement}\n {readOnly && files && files.length > 1 && multiple && (\n <StyledDownloadAllButton variant='link' onClick={onDownloadAll}>\n {t('download_all')}\n </StyledDownloadAllButton>\n )}\n </>\n </StyledFormField>\n ) : (\n renderElement\n )}\n {multiple && !compact && files && files.length > 0 && fileItemList}\n </Flex>\n );\n }\n);\n\nconst AttachFilesModal: FunctionComponent<\n {\n modalContent?: JSX.Element;\n readOnly: FileInputProps['readOnly'];\n } & Pick<MultiAttachCompactProps, 'modal'>\n> = ({ modalContent, modal, readOnly }) => {\n const t = useI18n();\n const { dismiss } = useModalContext();\n\n const formActions = (\n <>\n <Button\n disabled={modal?.loading}\n onClick={() => {\n if (modal?.onCancel) modal.onCancel({ close: dismiss });\n }}\n >\n {t('cancel')}\n </Button>\n\n <Button\n disabled={modal?.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n if (modal?.onSubmit) modal.onSubmit({ close: dismiss });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n\n return (\n <Modal\n progress={modal?.loading}\n heading={t('attach_files')}\n actions={!readOnly ? formActions : undefined}\n onBeforeOpen={modal?.onBeforeOpen}\n >\n {modalContent}\n </Modal>\n );\n};\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const { modal, count, ...baseFileInputProps } = props;\n\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n compact = false\n } = baseFileInputProps;\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n\n let modalContent: JSX.Element | undefined;\n\n if (compact && multiple) {\n modalContent = (\n <BaseFileInput\n {...baseFileInputProps}\n multiple\n compact={false}\n labelHidden={false}\n ref={ref}\n />\n );\n }\n\n const modalProps = {\n modal,\n modalContent\n };\n\n useEffect(() => {\n if (compact && multiple && modal) {\n modalMethods.current?.update({\n modal,\n modalContent,\n readOnly\n });\n }\n }, [compact, multiple, modal, readOnly, modalProps]);\n\n useEffect(() => {\n return () => {\n if (modalMethods.current) {\n modalMethods.current?.dismiss();\n modalMethods.current?.unmount();\n }\n };\n }, []);\n\n if (compact && multiple) {\n const render = (\n <Flex container>\n <StyledBareButton\n id={id}\n onClick={() => {\n modalMethods.current = create(\n AttachFilesModal,\n { ...modalProps, readOnly },\n { dismissible: readOnly }\n );\n }}\n aria-label={\n count && count > 0\n ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`\n : undefined\n }\n aria-describedby={`${id}-info`}\n disabled={disabled}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n if (buttonEl) buttonEl.click();\n }\n }\n : undefined)}\n ref={setButtonEl}\n >\n <StyledFlex container>\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n count={count}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </StyledFlex>\n </StyledBareButton>\n {buttonEl && (\n <Tooltip target={buttonEl} describeTarget={count === 0}>\n {count && count > 0\n ? t('attach_review')\n : t('file_upload_text_main', [t('file_upload_text_multiple')])}\n </Tooltip>\n )}\n </Flex>\n );\n\n return label ? (\n <StyledFormField\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode\n >\n {render}\n </StyledFormField>\n ) : (\n render\n );\n }\n\n return <BaseFileInput {...baseFileInputProps} ref={ref} />;\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
package/lib/components/Tabs/TabPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AAM5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAEd,OAAO;WACT,MAAM;SA2Bf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyE5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AAM5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAEd,OAAO;WACT,MAAM;SA4Bf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyE5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
package/lib/components/Tabs/TabPanel.js CHANGED
@@ -30,6 +30,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
30
30
  ${tablistType === 'horizontal' &&
31
31
  level > 1 &&
32
32
  css `
33
+ background-color: ${theme.base.palette['primary-background']};
33
34
  border: 0.0625rem solid ${theme.base.palette['border-line']};
34
35
  border-block-start: none;
35
36
  border-end-start-radius: calc(0.5rem * 0.5);
package/lib/components/Tabs/TabPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\n\ninterface TabPanelProps {\n /** The id of the Tab that the tab panel is related to. */\n tabId: string;\n /**\n * The current selected value of the tabs. Controls the visibility of the tab panel.\n * The tabsValue must match the tabId in order for the TabPanel to show itself.\n */\n currentTabId?: string;\n /** The title for the tab panel */\n title?: string;\n /** Content of the tab panel. */\n children: ReactNode;\n /** Ref to the tablist element. */\n tablistRef?: RefObject<HTMLElement>;\n /**\n * The tablist type indicates what direction the tabs are rendered in.\n * @default 'horizontal'\n */\n tablistType?: TabsProps['type'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n Pick<TabPanelProps, 'tablistType'> & {\n current: boolean;\n level: number;\n }\n>(({ current, tablistType, level, theme }) => {\n return css`\n min-width: 0;\n max-width: 100%;\n\n :focus {\n outline: none;\n box-shadow: ${tablistType === 'horizontal' && level > 1\n ? theme.base.shadow['focus-inset']\n : theme.base.shadow.focus};\n }\n\n ${!current &&\n css`\n display: none;\n `}\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-end-start-radius: calc(0.5rem * 0.5);\n border-end-end-radius: calc(0.5rem * 0.5);\n `}\n `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n return css`\n padding-inline: calc(${theme.base.spacing});\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n {\n tabId,\n currentTabId,\n title,\n tablistRef,\n tablistType = 'horizontal',\n children,\n ...restProps\n }: PropsWithoutRef<TabPanelProps>,\n ref: TabPanelProps['ref']\n) {\n const t = useI18n();\n const tabPanelRef = useConsolidatedRef(ref);\n const [showReturnButton, setShowReturnButton] = useState(false);\n const { level } = useContext(TabsContext);\n\n const onFocusChange = useCallback(isFocused => {\n if (!isFocused) {\n setShowReturnButton(false);\n }\n }, []);\n\n useFocusWithin([tabPanelRef], onFocusChange);\n\n const contextValue = useMemo(\n () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n [level, tablistType]\n );\n\n const onKeyUp = () => {\n if (tabPanelRef.current?.contains(document.activeElement)) {\n setShowReturnButton(true);\n }\n };\n useEvent('keyup', onKeyUp);\n\n return (\n <TabsContext.Provider value={contextValue}>\n <StyledTabPanel\n {...restProps}\n container={{\n direction: 'column',\n rowGap: 1,\n ...(tablistType === 'horizontal' && {\n pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n })\n }}\n item={{ grow: 1 }}\n current={currentTabId && tabId ? currentTabId === tabId : true}\n role='tabpanel'\n aria-labelledby={`${tabId}`}\n id={`${tabId}-panel`}\n ref={tabPanelRef}\n tabIndex={0}\n tablistType={tablistType}\n level={level}\n >\n {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n {children}\n {tablistRef?.current && showReturnButton && (\n <StyledButton\n variant='link'\n onClick={() => {\n getFocusables(tablistRef)[0]?.focus();\n }}\n >\n {t('return_to_tab_list')}\n </StyledButton>\n )}\n </StyledTabPanel>\n </TabsContext.Provider>\n );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
1
+ {"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,WAAW,MAAM,eAAe,CAAC;AAyBxC,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAKxC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;;;;;;oBAMQ,WAAW,KAAK,YAAY,IAAI,KAAK,GAAG,CAAC;QACrD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QAClC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAG3B,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;MACC,WAAW,KAAK,YAAY;QAC9B,KAAK,GAAG,CAAC;QACT,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;gCAClC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;KAI5D;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EACE,KAAK,EACL,YAAY,EACZ,KAAK,EACL,UAAU,EACV,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,GAAG,SAAS,EACmB,EACjC,GAAyB;IAEzB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,aAAa,GAAG,WAAW,CAAC,SAAS,CAAC,EAAE;QAC5C,IAAI,CAAC,SAAS,EAAE;YACd,mBAAmB,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/D,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YACzD,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IACF,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAE3B,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACvC,MAAC,cAAc,OACT,SAAS,EACb,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;gBACnB,MAAM,EAAE,CAAC;gBACT,GAAG,CAAC,WAAW,KAAK,YAAY,IAAI;oBAClC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC;iBACjE,CAAC;aACH,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,EAAgB,YAAG,KAAK,GAAQ,EAClF,QAAQ,EACR,UAAU,EAAE,OAAO,IAAI,gBAAgB,IAAI,CAC1C,KAAC,YAAY,IACX,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;oBACxC,CAAC,YAEA,CAAC,CAAC,oBAAoB,CAAC,GACX,CAChB,IACc,GACI,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\n\ninterface TabPanelProps {\n /** The id of the Tab that the tab panel is related to. */\n tabId: string;\n /**\n * The current selected value of the tabs. Controls the visibility of the tab panel.\n * The tabsValue must match the tabId in order for the TabPanel to show itself.\n */\n currentTabId?: string;\n /** The title for the tab panel */\n title?: string;\n /** Content of the tab panel. */\n children: ReactNode;\n /** Ref to the tablist element. */\n tablistRef?: RefObject<HTMLElement>;\n /**\n * The tablist type indicates what direction the tabs are rendered in.\n * @default 'horizontal'\n */\n tablistType?: TabsProps['type'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n Pick<TabPanelProps, 'tablistType'> & {\n current: boolean;\n level: number;\n }\n>(({ current, tablistType, level, theme }) => {\n return css`\n min-width: 0;\n max-width: 100%;\n\n :focus {\n outline: none;\n box-shadow: ${tablistType === 'horizontal' && level > 1\n ? theme.base.shadow['focus-inset']\n : theme.base.shadow.focus};\n }\n\n ${!current &&\n css`\n display: none;\n `}\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-end-start-radius: calc(0.5rem * 0.5);\n border-end-end-radius: calc(0.5rem * 0.5);\n `}\n `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n return css`\n padding-inline: calc(${theme.base.spacing});\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n {\n tabId,\n currentTabId,\n title,\n tablistRef,\n tablistType = 'horizontal',\n children,\n ...restProps\n }: PropsWithoutRef<TabPanelProps>,\n ref: TabPanelProps['ref']\n) {\n const t = useI18n();\n const tabPanelRef = useConsolidatedRef(ref);\n const [showReturnButton, setShowReturnButton] = useState(false);\n const { level } = useContext(TabsContext);\n\n const onFocusChange = useCallback(isFocused => {\n if (!isFocused) {\n setShowReturnButton(false);\n }\n }, []);\n\n useFocusWithin([tabPanelRef], onFocusChange);\n\n const contextValue = useMemo(\n () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n [level, tablistType]\n );\n\n const onKeyUp = () => {\n if (tabPanelRef.current?.contains(document.activeElement)) {\n setShowReturnButton(true);\n }\n };\n useEvent('keyup', onKeyUp);\n\n return (\n <TabsContext.Provider value={contextValue}>\n <StyledTabPanel\n {...restProps}\n container={{\n direction: 'column',\n rowGap: 1,\n ...(tablistType === 'horizontal' && {\n pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n })\n }}\n item={{ grow: 1 }}\n current={currentTabId && tabId ? currentTabId === tabId : true}\n role='tabpanel'\n aria-labelledby={`${tabId}`}\n id={`${tabId}-panel`}\n ref={tabPanelRef}\n tabIndex={0}\n tablistType={tablistType}\n level={level}\n >\n {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n {children}\n {tablistRef?.current && showReturnButton && (\n <StyledButton\n variant='link'\n onClick={() => {\n getFocusables(tablistRef)[0]?.focus();\n }}\n >\n {t('return_to_tab_list')}\n </StyledButton>\n )}\n </StyledTabPanel>\n </TabsContext.Provider>\n );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "7.0.0-build.30.0",
3
+ "version": "7.0.0-build.30.2",
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
  "repository": {
6
6
  "type": "git",