npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-dev.19.0 → 2.0.0-dev.21.0 - Mend

@pega/cosmos-react-core 2.0.0-dev.19.0 → 2.0.0-dev.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (350) hide show

package/lib/components/Skeleton/RectangleSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RectangleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/RectangleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoB/C,MAAM,YAAY,GAAoC;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAkC,KAAK,CAAC,EAAE;IACzF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3D,OAAO,GAAG,CAAA;;wBAEY,kBAAkB;MACpC,OAAO,KAAK,QAAQ;QACpB,CAAC,CAAC,2BAA2B,YAAY;;mBAE5B;QACb,CAAC,CAAC,UAAU,KAAK;gBACP,MAAM,EAAE;GACrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,KAAC,uBAAuB,~~oBAAK~~,KAAK,~~qBAAgB~~,MAAM,~~YAAG~~,CAAC;AACrE,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface RectangleSkeletonProps extends BaseProps {\n /*\n Width of the skeleton.\n * @default \"auto\"\n /\n width?: string \| number;\n /\n Height of the skeleton.\n * @default \"auto\"\n /\n height?: string \| number;\n /\n Variant of the skeleton.\n * @default \"default\"\n /\n variant?: 'default' \| 'button';\n}\n\nconst defaultProps: Partial<RectangleSkeletonProps> = {\n width: 'auto',\n height: 'auto',\n variant: 'default'\n};\n\nexport const StyledRectangleSkeleton = styled.div<Partial<RectangleSkeletonProps>>(props => {\n const { width, height, variant } = props;\n const { skeleton: skeletonBackground } = props.theme.base.palette;\n const { 'border-radius': borderRadius } = props.theme.base;\n return css`\n margin: 0.25rem;\n background-color: ${skeletonBackground};\n ${variant === 'button'\n ? `border-radius: calc(2 ${borderRadius});\n width: 6.875rem;\n height: 2rem`\n : `width: ${width};\n height: ${height}`}\n `;\n});\n\nStyledRectangleSkeleton.defaultProps = defaultThemeProp;\n\nconst RectangleSkeleton: FunctionComponent<RectangleSkeletonProps & ForwardProps> = (\n props: RectangleSkeletonProps\n) => {\n return <StyledRectangleSkeleton {...props} aria-disabled='true' />;\n};\n\nRectangleSkeleton.defaultProps = defaultProps;\n\nexport default RectangleSkeleton;\n"]}
1	+ {"version":3,"file":"RectangleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/RectangleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoB/C,MAAM,YAAY,GAAoC;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAkC,KAAK,CAAC,EAAE;IACzF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3D,OAAO,GAAG,CAAA;;wBAEY,kBAAkB;MACpC,OAAO,KAAK,QAAQ;QACpB,CAAC,CAAC,2BAA2B,YAAY;;mBAE5B;QACb,CAAC,CAAC,UAAU,KAAK;gBACP,MAAM,EAAE;GACrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,WAAG,CAAC;AACrE,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface RectangleSkeletonProps extends BaseProps {\n /*\n Width of the skeleton.\n * @default \"auto\"\n /\n width?: string \| number;\n /\n Height of the skeleton.\n * @default \"auto\"\n /\n height?: string \| number;\n /\n Variant of the skeleton.\n * @default \"default\"\n /\n variant?: 'default' \| 'button';\n}\n\nconst defaultProps: Partial<RectangleSkeletonProps> = {\n width: 'auto',\n height: 'auto',\n variant: 'default'\n};\n\nexport const StyledRectangleSkeleton = styled.div<Partial<RectangleSkeletonProps>>(props => {\n const { width, height, variant } = props;\n const { skeleton: skeletonBackground } = props.theme.base.palette;\n const { 'border-radius': borderRadius } = props.theme.base;\n return css`\n margin: 0.25rem;\n background-color: ${skeletonBackground};\n ${variant === 'button'\n ? `border-radius: calc(2 ${borderRadius});\n width: 6.875rem;\n height: 2rem`\n : `width: ${width};\n height: ${height}`}\n `;\n});\n\nStyledRectangleSkeleton.defaultProps = defaultThemeProp;\n\nconst RectangleSkeleton: FunctionComponent<RectangleSkeletonProps & ForwardProps> = (\n props: RectangleSkeletonProps\n) => {\n return <StyledRectangleSkeleton {...props} aria-disabled='true' />;\n};\n\nRectangleSkeleton.defaultProps = defaultProps;\n\nexport default RectangleSkeleton;\n"]}

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

@@ -100,21 +100,21 @@ const Slider = forwardRef((props, ref) => {
             thumbRef.current?.focus();
     }, [autoFocus]);
     const percentage = ((Number(value) - min) / (max - min)) * 100;
-    const Comp = (_jsxs(Flex, Object.assign({}, restProps, { as: StyledSlider, container: {
+    const Comp = (_jsxs(Flex, { ...restProps, as: StyledSlider, container: {
             alignItems: 'start',
             direction: orientation === 'horizontal' ? 'row' : 'column'
-        }, orientation: orientation }, { status, disabled, readOnly }, { style: {
+        }, orientation: orientation, ...{ status, disabled, readOnly }, style: {
             '--slider-value': `${percentage}%`,
             userSelect: inDrag ? 'none' : 'auto'
-        } }, { children: [_jsxs(Grid, Object.assign({ as: StyledSliderTrackWrapper, container: true }, { children: [_jsxs(Flex, Object.assign({ as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' } }, { children: [_jsx(StyledBar, { showProgress: showProgress }, void 0), _jsx(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => {
+        }, children: [_jsxs(Grid, { as: StyledSliderTrackWrapper, container: true, children: [_jsxs(Flex, { as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' }, children: [_jsx(StyledBar, { showProgress: showProgress }, void 0), _jsx(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => {
                                     setInDrag(true);
                                     onDragStart?.();
                                 }, onTouchStart: (e) => {
                                     setInDrag(true);
                                     e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
                                     onDragStart?.();
-                                }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` }, void 0)] }), void 0), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }, void 0))] }), void 0), showInput && !preview && (_jsx(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() }, void 0)), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }, void 0))] }), void 0));
-    return label ? (_jsx(FormField, Object.assign({}, { label, labelHidden, id, info, status, required, disabled }, { children: Comp }), void 0)) : (Comp);
+                                }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` }, void 0)] }, void 0), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }, void 0))] }, void 0), showInput && !preview && (_jsx(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() }, void 0)), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }, void 0))] }, void 0));
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 export default Slider;
 //# sourceMappingURL=Slider.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n CSSProperties,\n forwardRef,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar,\n StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n id = uid,\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n onChange,\n autoFocus,\n onDragStart,\n onDragEnd: onDragEndProp,\n ...restProps\n } = props;\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState(false);\n const [inputValue, setInputValue] = useState(value.toString());\n\n const setValue = useCallback(\n (newValue: number) => {\n if (disabled \|\| readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n setInputValue(normalizedValue.toString());\n onChange(normalizedValue);\n },\n [disabled, readOnly, onChange]\n );\n\n const { start, end } = useDirection();\n\n const moveThumb = useCallback(\n (e: MouseEvent \| TouchEvent) => {\n if (disabled \|\| readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track[start]) / (track[end] - track[start])\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max, setValue, start, end]\n );\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${cap(start)}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${cap(end)}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [setValue, value, step, start, end]\n );\n\n useEffect(() => {\n const onDragEnd = () => {\n setInDrag(false);\n if (inDrag) onDragEndProp?.();\n };\n\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb, onDragEndProp]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n const Comp = (\n <Flex\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n {...{ status, disabled, readOnly }}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => {\n setInDrag(true);\n onDragStart?.();\n }}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n onDragStart?.();\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n step={step}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n onChange={setInputValue}\n onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n size={calculateValueLength(min, max, step)}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && (\n <StyledPreview\n id={`${id}-value`}\n value={value.toString()}\n size={calculateValueLength(min, max, step)}\n />\n )}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Slider;\n"]}
1	+ {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n CSSProperties,\n forwardRef,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar,\n StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n id = uid,\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n onChange,\n autoFocus,\n onDragStart,\n onDragEnd: onDragEndProp,\n ...restProps\n } = props;\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState(false);\n const [inputValue, setInputValue] = useState(value.toString());\n\n const setValue = useCallback(\n (newValue: number) => {\n if (disabled \|\| readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n setInputValue(normalizedValue.toString());\n onChange(normalizedValue);\n },\n [disabled, readOnly, onChange]\n );\n\n const { start, end } = useDirection();\n\n const moveThumb = useCallback(\n (e: MouseEvent \| TouchEvent) => {\n if (disabled \|\| readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track[start]) / (track[end] - track[start])\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max, setValue, start, end]\n );\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${cap(start)}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${cap(end)}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [setValue, value, step, start, end]\n );\n\n useEffect(() => {\n const onDragEnd = () => {\n setInDrag(false);\n if (inDrag) onDragEndProp?.();\n };\n\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb, onDragEndProp]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n const Comp = (\n <Flex\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n {...{ status, disabled, readOnly }}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => {\n setInDrag(true);\n onDragStart?.();\n }}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n onDragStart?.();\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n step={step}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n onChange={setInputValue}\n onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n size={calculateValueLength(min, max, step)}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && (\n <StyledPreview\n id={`${id}-value`}\n value={value.toString()}\n size={calculateValueLength(min, max, step)}\n />\n )}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Slider;\n"]}

package/lib/components/Slider/SliderTicks.js CHANGED Viewed

@@ -18,15 +18,15 @@ const SliderTicks = ({ ticks, min, max, step, orientation, onClick }) => {
         repeatCells = `repeat(${cellsCount}, 1em)`;
         gridContainerConfig = { rows: repeatCells, alignContent: 'between' };
     }
-    return (_jsx(Grid, Object.assign({ container: gridContainerConfig, as: StyledTicksContainer }, { children: ticksDefinitions.map(tick => {
-            return (_jsx(StyledTickItem, Object.assign({ item: orientation === 'horizontal'
+    return (_jsx(Grid, { container: gridContainerConfig, as: StyledTicksContainer, children: ticksDefinitions.map(tick => {
+            return (_jsx(StyledTickItem, { item: orientation === 'horizontal'
                     ? {
                         colStartEnd: `${tick.start} / ${tick.end}`
                     }
                     : {
                         rowStartEnd: `${-tick.start} / ${-tick.end}`
-                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max }, { children: _jsx(StyledTickButton, Object.assign({ tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value) }, { children: tick.label }), void 0) }), tick.label ?? tick.value));
-        }) }), void 0));
+                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max, children: _jsx(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value), children: tick.label }, void 0) }, tick.label ?? tick.value));
+        }) }, void 0));
 };
 export default SliderTicks;
 //# sourceMappingURL=SliderTicks.js.map

package/lib/components/Slider/SliderTicks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,IAA4B,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWhD,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,KAAK,YAAY,CAAC,EAChF,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,IAAI,WAAmB,CAAC;IACxB,IAAI,mBAAuC,CAAC;IAC5C,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,mBAAmB,GAAG;YACpB,IAAI,EAAE,oBAAoB,WAAW,mBAAmB;SACzD,CAAC;KACH;SAAM;QACL,WAAW,GAAG,UAAU,UAAU,QAAQ,CAAC;QAC3C,mBAAmB,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;KACtE;IAED,OAAO,CACL,KAAC,IAAI,~~kBAAC~~,SAAS,EAAE,mBAAmB,EAAE,EAAE,EAAE,oBAAoB,~~gBAC3D~~,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CACL,KAAC,cAAc,~~kBACb~~,IAAI,EACF,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;qBAC3C;oBACH,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;qBAC7C,EAGP,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,~~gBAErC~~,KAAC,gBAAgB,~~kBACf~~,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,~~gBAEjC~~,IAAI,CAAC,KAAK,~~YACM~~,~~KAZd~~,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAad,CAClB,CAAC;QACJ,CAAC,CAAC,~~YACG~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport Grid, { GridContainerProps } from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n ticks: NonNullable<SliderProps['ticks']>;\n min: number;\n max: number;\n step: number;\n orientation: NonNullable<SliderProps['orientation']>;\n onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n ticks,\n min,\n max,\n step,\n orientation,\n onClick\n}: SliderTicksProps) => {\n const cellsCount = (max - min) / step + 1;\n\n const ticksDefinitions = useMemo(\n () => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'),\n [ticks, min, max, orientation]\n );\n\n let repeatCells: string;\n let gridContainerConfig: GridContainerProps;\n if (orientation === 'horizontal') {\n repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';\n gridContainerConfig = {\n cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`\n };\n } else {\n repeatCells = `repeat(${cellsCount}, 1em)`;\n gridContainerConfig = { rows: repeatCells, alignContent: 'between' };\n }\n\n return (\n <Grid container={gridContainerConfig} as={StyledTicksContainer}>\n {ticksDefinitions.map(tick => {\n return (\n <StyledTickItem\n item={\n orientation === 'horizontal'\n ? {\n colStartEnd: `${tick.start} / ${tick.end}`\n }\n : {\n rowStartEnd: `${-tick.start} / ${-tick.end}`\n }\n }\n key={tick.label ?? tick.value}\n orientation={orientation}\n lowerBoundaryItem={tick.value === min}\n upperBoundaryItem={tick.value === max}\n >\n <StyledTickButton\n tabIndex={-1}\n role='button'\n aria-hidden\n onClick={() => onClick(tick.value)}\n >\n {tick.label}\n </StyledTickButton>\n </StyledTickItem>\n );\n })}\n </Grid>\n );\n};\n\nexport default SliderTicks;\n"]}
1	+ {"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,IAA4B,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWhD,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,KAAK,YAAY,CAAC,EAChF,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,IAAI,WAAmB,CAAC;IACxB,IAAI,mBAAuC,CAAC;IAC5C,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,mBAAmB,GAAG;YACpB,IAAI,EAAE,oBAAoB,WAAW,mBAAmB;SACzD,CAAC;KACH;SAAM;QACL,WAAW,GAAG,UAAU,UAAU,QAAQ,CAAC;QAC3C,mBAAmB,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;KACtE;IAED,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB,EAAE,EAAE,EAAE,oBAAoB,YAC3D,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EACF,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;qBAC3C;oBACH,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;qBAC7C,EAGP,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,YAErC,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAEjC,IAAI,CAAC,KAAK,WACM,IAZd,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAad,CAClB,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport Grid, { GridContainerProps } from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n ticks: NonNullable<SliderProps['ticks']>;\n min: number;\n max: number;\n step: number;\n orientation: NonNullable<SliderProps['orientation']>;\n onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n ticks,\n min,\n max,\n step,\n orientation,\n onClick\n}: SliderTicksProps) => {\n const cellsCount = (max - min) / step + 1;\n\n const ticksDefinitions = useMemo(\n () => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'),\n [ticks, min, max, orientation]\n );\n\n let repeatCells: string;\n let gridContainerConfig: GridContainerProps;\n if (orientation === 'horizontal') {\n repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';\n gridContainerConfig = {\n cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`\n };\n } else {\n repeatCells = `repeat(${cellsCount}, 1em)`;\n gridContainerConfig = { rows: repeatCells, alignContent: 'between' };\n }\n\n return (\n <Grid container={gridContainerConfig} as={StyledTicksContainer}>\n {ticksDefinitions.map(tick => {\n return (\n <StyledTickItem\n item={\n orientation === 'horizontal'\n ? {\n colStartEnd: `${tick.start} / ${tick.end}`\n }\n : {\n rowStartEnd: `${-tick.start} / ${-tick.end}`\n }\n }\n key={tick.label ?? tick.value}\n orientation={orientation}\n lowerBoundaryItem={tick.value === min}\n upperBoundaryItem={tick.value === max}\n >\n <StyledTickButton\n tabIndex={-1}\n role='button'\n aria-hidden\n onClick={() => onClick(tick.value)}\n >\n {tick.label}\n </StyledTickButton>\n </StyledTickItem>\n );\n })}\n </Grid>\n );\n};\n\nexport default SliderTicks;\n"]}

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

@@ -54,12 +54,12 @@ const getAreas = ({ secondary, visual, actions }) => {
     return `"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}"${secondary ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"` : ''}`;
 };
 const SummaryItem = forwardRef(({ visual, primary, secondary, actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) => {
-    return (_jsxs(Grid, Object.assign({}, restProps, { ref: ref, container: {
+    return (_jsxs(Grid, { ...restProps, ref: ref, container: {
             cols: getColumns({ visual, actions }),
             colGap: 2,
             areas: getAreas({ secondary, visual, actions }),
             ...container
-        }, as: StyledSummaryItem, forwardedAs: as }, { children: [visual && (_jsx(Grid, Object.assign({ as: StyledVisual, item: { area: 'visual', alignSelf: 'center' } }, { children: visual }), void 0)), _jsx(StyledPrimary, Object.assign({ item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy }, { children: primary }), void 0), secondary && (_jsx(StyledSecondary, Object.assign({ item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy }, { children: secondary }), void 0)), actions && (_jsx(Grid, Object.assign({ as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' } }, { children: actions }), void 0))] }), void 0));
+        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual }, void 0)), _jsx(StyledPrimary, { item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }, void 0), secondary && (_jsx(StyledSecondary, { item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy, children: secondary }, void 0)), actions && (_jsx(Grid, { as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }, void 0))] }, void 0));
 });
 export default SummaryItem;
 //# sourceMappingURL=SummaryItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,UAAU,EAAgC,MAAM,OAAO,CAAC;AACpG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAA4B,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAwBjD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;MAChC,kBAAkB;;;;;;CAMvB,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAGtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;MAEH,QAAQ;QACV,GAAG,CAAA;qBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;KACtD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAExC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAgD,EAAE,EAAE;IACvF,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,iBAAiB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,MAAM,EACN,OAAO,EACoD,EAAE,EAAE;IAC/D,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACnE,SAAS,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EACtF,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,GAAG,MAAM,EACzB,EAAE,EACF,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,~~oBACC~~,SAAS,~~IACb~~,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YACrC,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC/C,GAAG,SAAS;SACb,EACD,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,EAAE,~~iBAEd~~,MAAM,IAAI,CACT,KAAC,IAAI,~~kBAAC~~,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,~~gBAClE~~,MAAM,~~YACF~~,CACR,EACD,KAAC,aAAa,~~kBACZ~~,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClE,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EACrC,gBAAgB,EAAE,gBAAgB,~~gBAEjC~~,OAAO,~~YACM~~,EACf,SAAS,IAAI,CACZ,KAAC,eAAe,~~kBACd~~,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAC/C,gBAAgB,EAAE,gBAAgB,~~gBAEjC~~,SAAS,~~YACM~~,CACnB,EACA,OAAO,IAAI,CACV,KAAC,IAAI,~~kBAAC~~,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,~~gBAC~~/E,OAAO,~~YACH~~,CACR,~~aACI~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { StyledProgressRing } from '../Progress';\n\nexport interface SummaryItemProps {\n /** Region for the primary information. /\n primary: NonNullable<ReactNode>;\n /* Region for displaying supporting metadata. /\n secondary?: ReactNode;\n /* Region for an Avatar, Icon, or other supporting visual. /\n visual?: ReactNode;\n /* Region for adding Actions, Buttons, or Links. /\n actions?: ReactNode;\n / Override the default Grid container props on SummaryItem. /\n container?: GridContainerProps;\n /\n Determines how the text within primary and secondary fields should handle overflow.\n * @default \"wrap\"\n /\n overflowStrategy?: 'wrap' \| 'ellipsis';\n /* HTML tag to render the SummaryItem's element with. /\n as?: ElementType;\n /* Ref for the SummaryItem. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n > ${StyledProgressRing}, img {\n display: block;\n object-fit: cover;\n width: 2rem;\n height: 2rem;\n }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n isString?: boolean;\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n\n ${isString &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' \| 'actions'>) => {\n return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n secondary,\n visual,\n actions\n}: Pick<SummaryItemProps, 'secondary' \| 'visual' \| 'actions'>) => {\n return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n (\n {\n visual,\n primary,\n secondary,\n actions,\n container,\n overflowStrategy = 'wrap',\n as,\n ...restProps\n }: PropsWithoutRef<SummaryItemProps>,\n ref: SummaryItemProps['ref']\n ) => {\n return (\n <Grid\n {...restProps}\n ref={ref}\n container={{\n cols: getColumns({ visual, actions }),\n colGap: 2,\n areas: getAreas({ secondary, visual, actions }),\n ...container\n }}\n as={StyledSummaryItem}\n forwardedAs={as}\n >\n {visual && (\n <Grid as={StyledVisual} item={{ area: 'visual', alignSelf: 'center' }}>\n {visual}\n </Grid>\n )}\n <StyledPrimary\n item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n isString={typeof primary === 'string'}\n overflowStrategy={overflowStrategy}\n >\n {primary}\n </StyledPrimary>\n {secondary && (\n <StyledSecondary\n item={{ area: 'secondary', alignSelf: 'start' }}\n overflowStrategy={overflowStrategy}\n >\n {secondary}\n </StyledSecondary>\n )}\n {actions && (\n <Grid as={StyledSummaryItemActions} item={{ area: 'actions', alignSelf: 'center' }}>\n {actions}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default SummaryItem;\n"]}
1	+ {"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,UAAU,EAAgC,MAAM,OAAO,CAAC;AACpG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAA4B,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAwBjD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;MAChC,kBAAkB;;;;;;CAMvB,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAGtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;MAEH,QAAQ;QACV,GAAG,CAAA;qBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;KACtD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAExC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAgD,EAAE,EAAE;IACvF,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,iBAAiB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,MAAM,EACN,OAAO,EACoD,EAAE,EAAE;IAC/D,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACnE,SAAS,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EACtF,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,GAAG,MAAM,EACzB,EAAE,EACF,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YACrC,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC/C,GAAG,SAAS;SACb,EACD,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,EAAE,aAEd,MAAM,IAAI,CACT,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAClE,MAAM,WACF,CACR,EACD,KAAC,aAAa,IACZ,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClE,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EACrC,gBAAgB,EAAE,gBAAgB,YAEjC,OAAO,WACM,EACf,SAAS,IAAI,CACZ,KAAC,eAAe,IACd,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAC/C,gBAAgB,EAAE,gBAAgB,YAEjC,SAAS,WACM,CACnB,EACA,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAC/E,OAAO,WACH,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { StyledProgressRing } from '../Progress';\n\nexport interface SummaryItemProps {\n /** Region for the primary information. /\n primary: NonNullable<ReactNode>;\n /* Region for displaying supporting metadata. /\n secondary?: ReactNode;\n /* Region for an Avatar, Icon, or other supporting visual. /\n visual?: ReactNode;\n /* Region for adding Actions, Buttons, or Links. /\n actions?: ReactNode;\n / Override the default Grid container props on SummaryItem. /\n container?: GridContainerProps;\n /\n Determines how the text within primary and secondary fields should handle overflow.\n * @default \"wrap\"\n /\n overflowStrategy?: 'wrap' \| 'ellipsis';\n /* HTML tag to render the SummaryItem's element with. /\n as?: ElementType;\n /* Ref for the SummaryItem. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n > ${StyledProgressRing}, img {\n display: block;\n object-fit: cover;\n width: 2rem;\n height: 2rem;\n }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n isString?: boolean;\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n\n ${isString &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' \| 'actions'>) => {\n return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n secondary,\n visual,\n actions\n}: Pick<SummaryItemProps, 'secondary' \| 'visual' \| 'actions'>) => {\n return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n (\n {\n visual,\n primary,\n secondary,\n actions,\n container,\n overflowStrategy = 'wrap',\n as,\n ...restProps\n }: PropsWithoutRef<SummaryItemProps>,\n ref: SummaryItemProps['ref']\n ) => {\n return (\n <Grid\n {...restProps}\n ref={ref}\n container={{\n cols: getColumns({ visual, actions }),\n colGap: 2,\n areas: getAreas({ secondary, visual, actions }),\n ...container\n }}\n as={StyledSummaryItem}\n forwardedAs={as}\n >\n {visual && (\n <Grid as={StyledVisual} item={{ area: 'visual', alignSelf: 'center' }}>\n {visual}\n </Grid>\n )}\n <StyledPrimary\n item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n isString={typeof primary === 'string'}\n overflowStrategy={overflowStrategy}\n >\n {primary}\n </StyledPrimary>\n {secondary && (\n <StyledSecondary\n item={{ area: 'secondary', alignSelf: 'start' }}\n overflowStrategy={overflowStrategy}\n >\n {secondary}\n </StyledSecondary>\n )}\n {actions && (\n <Grid as={StyledSummaryItemActions} item={{ area: 'actions', alignSelf: 'center' }}>\n {actions}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default SummaryItem;\n"]}

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

@@ -36,7 +36,7 @@ export const StyledSummaryListItem = styled(SummaryItem)(({ theme }) => css `
 StyledSummaryListItem.defaultProps = defaultThemeProp;
 export const SummaryListItems = ({ items }) => {
     return (_jsx("ul", { children: items.map(({ id, actions: itemActions, ...restItemProps }) => {
-            return (_jsx(StyledSummaryListItem, Object.assign({}, restItemProps, { forwardedAs: 'li', actions: itemActions && _jsx(Actions, { items: itemActions }, void 0) }), id));
+            return (_jsx(StyledSummaryListItem, { ...restItemProps, forwardedAs: 'li', actions: itemActions && _jsx(Actions, { items: itemActions }, void 0) }, id));
         }) }, void 0));
 };
 const SummaryList = forwardRef(({ icon, name, count, actions, items, onViewAll, loading, noItemsText, error, ...restProps }, ref) => {
@@ -46,11 +46,11 @@ const SummaryList = forwardRef(({ icon, name, count, actions, items, onViewAll,
             return (_jsx(Progress, { placement: 'local', message: typeof loading === 'string' ? loading : undefined }, void 0));
         }
         if (error) {
-            return _jsx(ErrorState, Object.assign({}, (error === true ? {} : error)), void 0);
+            return _jsx(ErrorState, { ...(error === true ? {} : error) }, void 0);
         }
         return items.length > 0 ? (_jsx(SummaryListItems, { items: items }, void 0)) : (_jsx(EmptyState, { message: noItemsText }, void 0));
     }, [loading, items, noItemsText, error]);
-    return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [icon && _jsx(Icon, { name: icon }, void 0), name && _jsx(Text, Object.assign({ variant: 'h2' }, { children: name }), void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }), void 0), actions && _jsx(Actions, { items: actions }, void 0)] }, void 0)), _jsx(StyledSummaryListContent, Object.assign({ loading: loading }, { children: content }), void 0), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, Object.assign({ justify: 'center' }, { children: _jsx(Button, Object.assign({ variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll }, { children: t('view_all') }), void 0) }), void 0))] }), void 0));
+    return (_jsxs(Card, { ref: ref, ...restProps, children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }, void 0), name && _jsx(Text, { variant: 'h2', children: name }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0), actions && _jsx(Actions, { items: actions }, void 0)] }, void 0)), _jsx(StyledSummaryListContent, { loading: loading, children: content }, void 0), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll, children: t('view_all') }, void 0) }, void 0))] }, void 0));
 });
 export default SummaryList;
 //# sourceMappingURL=SummaryList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,OAAO,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,iBAAiB,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,UAA+B,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAC/D,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,UAAU,MAAM,eAAe,CAAC;AAoCvC,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CACpE,SAAS,CAAC,SAAS,CAAC,CACrB,CACC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACvB,OAAO;IACT,GAAG,CAAA;;KAEF;;;uCAGkC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAErE,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,qBAAqB,GAAuB,MAAM,CAAC,WAAW,CAAC,CAC1E,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;yCAGM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAErE,CACJ,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAmC,EAAE,EAAE;IAC7E,OAAO,CACL,uBACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE;YAC5D,OAAO,CACL,KAAC,qBAAqB,~~oBAEhB~~,aAAa,~~IACjB~~,WAAW,EAAC,IAAI,EAChB,OAAO,EAAE,WAAW,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,WAAW,WAAI,~~KAHlD~~,EAAE,CAIP,CACH,CAAC;QACJ,CAAC,CAAC,WACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,WAAW,EACX,KAAK,EACL,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,OAAO,EAAE;YACX,OAAO,CACL,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,WAAI,CAC3F,CAAC;SACH;QAED,IAAI,KAAK,EAAE;YACT,OAAO,KAAC,UAAU,~~oBAAK~~,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,~~UAAI~~,CAAC;SAC1D;QAED,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,WAAI,CACnC,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,WAAW,WAAI,CACrC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzC,OAAO,CACL,MAAC,IAAI,~~kBAAC~~,GAAG,EAAE,GAAG,~~IAAM~~,SAAS,~~eAC1B~~,CAAC,IAAI,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,CACzD,MAAC,UAAU,eACT,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,~~iBAC9C~~,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,EAC5B,IAAI,IAAI,KAAC,IAAI,~~kBAAC~~,OAAO,EAAC,IAAI,~~gBAAE~~,IAAI,~~YAAQ~~,EACxC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,WAAS,~~aAC~~/C,EACN,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,WAAI,YAC5B,CACd,EAED,KAAC,wBAAwB,~~kBAAC~~,OAAO,EAAE,OAAO,~~gBAAG~~,OAAO,~~YAA4B~~,EAE/E,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,IAAI,CAC3E,KAAC,UAAU,~~kBAAC~~,OAAO,EAAC,QAAQ,~~gBAC1B~~,KAAC,MAAM,~~kBACL~~,OAAO,EAAC,MAAM,gBACF,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,EAC3E,OAAO,EAAE,SAAS,~~gBAEjB~~,CAAC,CAAC,UAAU,CAAC,~~YACP~~,~~YACE~~,CACd,~~aACI~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n /** Name of the utility to be used as its heading along with associated actions and aria attributes. /\n name?: string;\n /* Identifier for the icon within Pega icons. /\n icon?: string;\n /* Integer representing the total count of items for a list utility dataset. /\n count?: number;\n /* Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* If the utility is in a state of fetching data. /\n loading?: boolean \| string;\n /* An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. /\n items: SummaryListItem[];\n /* User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. /\n onViewAll?: (callback: Function) => void;\n /* A simple message to display when there are no items. /\n noItemsText?: EmptyStateProps['message'];\n /\n Indicate an error occurred while acquiring data for the list.\n * The default error state may be overridden with custom props.\n /\n error?: boolean \| ErrorStateProps;\n /* Ref for the SummaryList's root element. /\n ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem extends OmitStrict<SummaryItemProps, 'actions'>, ForwardProps {\n /* A unique id to represent the item. /\n id: string;\n /* A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n omitProps('loading')\n)(\n ({ theme, loading }) => css`\n ${loading &&\n css`\n min-height: 4rem;\n `}\n\n &:not(:last-child) > ul > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0;\n\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ items }: Pick<SummaryListProps, 'items'>) => {\n return (\n <ul>\n {items.map(({ id, actions: itemActions, ...restItemProps }) => {\n return (\n <StyledSummaryListItem\n key={id}\n {...restItemProps}\n forwardedAs='li'\n actions={itemActions && <Actions items={itemActions} />}\n />\n );\n })}\n </ul>\n );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n (\n {\n icon,\n name,\n count,\n actions,\n items,\n onViewAll,\n loading,\n noItemsText,\n error,\n ...restProps\n }: PropsWithoutRef<SummaryListProps>,\n ref: SummaryListProps['ref']\n ) => {\n const t = useI18n();\n\n const content = useMemo(() => {\n if (loading) {\n return (\n <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n );\n }\n\n if (error) {\n return <ErrorState {...(error === true ? {} : error)} />;\n }\n\n return items.length > 0 ? (\n <SummaryListItems items={items} />\n ) : (\n <EmptyState message={noItemsText} />\n );\n }, [loading, items, noItemsText, error]);\n\n return (\n <Card ref={ref} {...restProps}>\n {(icon \|\| name \|\| typeof count === 'number' \|\| actions) && (\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && <Icon name={icon} />}\n {name && <Text variant='h2'>{name}</Text>}\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n {actions && <Actions items={actions} />}\n </CardHeader>\n )}\n\n <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n {!error && typeof count === 'number' && count > items.length && onViewAll && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n onClick={onViewAll}\n >\n {t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default SummaryList;\n"]}
1	+ {"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n /** Name of the utility to be used as its heading along with associated actions and aria attributes. /\n name?: string;\n /* Identifier for the icon within Pega icons. /\n icon?: string;\n /* Integer representing the total count of items for a list utility dataset. /\n count?: number;\n /* Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* If the utility is in a state of fetching data. /\n loading?: boolean \| string;\n /* An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. /\n items: SummaryListItem[];\n /* User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. /\n onViewAll?: (callback: Function) => void;\n /* A simple message to display when there are no items. /\n noItemsText?: EmptyStateProps['message'];\n /\n Indicate an error occurred while acquiring data for the list.\n * The default error state may be overridden with custom props.\n /\n error?: boolean \| ErrorStateProps;\n /* Ref for the SummaryList's root element. /\n ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem extends OmitStrict<SummaryItemProps, 'actions'>, ForwardProps {\n /* A unique id to represent the item. /\n id: string;\n /* A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n omitProps('loading')\n)(\n ({ theme, loading }) => css`\n ${loading &&\n css`\n min-height: 4rem;\n `}\n\n &:not(:last-child) > ul > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0;\n\n &:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ items }: Pick<SummaryListProps, 'items'>) => {\n return (\n <ul>\n {items.map(({ id, actions: itemActions, ...restItemProps }) => {\n return (\n <StyledSummaryListItem\n key={id}\n {...restItemProps}\n forwardedAs='li'\n actions={itemActions && <Actions items={itemActions} />}\n />\n );\n })}\n </ul>\n );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n (\n {\n icon,\n name,\n count,\n actions,\n items,\n onViewAll,\n loading,\n noItemsText,\n error,\n ...restProps\n }: PropsWithoutRef<SummaryListProps>,\n ref: SummaryListProps['ref']\n ) => {\n const t = useI18n();\n\n const content = useMemo(() => {\n if (loading) {\n return (\n <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n );\n }\n\n if (error) {\n return <ErrorState {...(error === true ? {} : error)} />;\n }\n\n return items.length > 0 ? (\n <SummaryListItems items={items} />\n ) : (\n <EmptyState message={noItemsText} />\n );\n }, [loading, items, noItemsText, error]);\n\n return (\n <Card ref={ref} {...restProps}>\n {(icon \|\| name \|\| typeof count === 'number' \|\| actions) && (\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && <Icon name={icon} />}\n {name && <Text variant='h2'>{name}</Text>}\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n {actions && <Actions items={actions} />}\n </CardHeader>\n )}\n\n <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n {!error && typeof count === 'number' && count > items.length && onViewAll && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n onClick={onViewAll}\n >\n {t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default SummaryList;\n"]}

package/lib/components/SummaryList/ViewAll.js CHANGED Viewed

@@ -38,7 +38,7 @@ export const StyledViewAll = styled.div.withConfig(omitProps('loading'))(({ load
     `}
   `);
 const SearchableList = forwardRef(({ loading, actions, items, searchInputProps, ...restProps }, ref) => {
-    return (_jsxs(StyledViewAll, Object.assign({ ref: ref, loading: loading }, restProps, { children: [!loading && (searchInputProps || actions) && (_jsxs(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center', gap: 2 }, as: StyledToolbar }, { children: [searchInputProps && (_jsx(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 }, item: { grow: 1 } }, { children: _jsx(SearchInput, { onSearchChange: searchInputProps.onSearchChange }, void 0) }), void 0)), actions && _jsx(Actions, { iconOnly: false, items: actions }, void 0)] }), void 0)), loading && _jsx(Progress, { placement: 'local' }, void 0), !loading && (items.length ? _jsx(SummaryList, { items: items }, void 0) : _jsx(EmptyState, {}, void 0))] }), void 0));
+    return (_jsxs(StyledViewAll, { ref: ref, loading: loading, ...restProps, children: [!loading && (searchInputProps || actions) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, as: StyledToolbar, children: [searchInputProps && (_jsx(Flex, { container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: _jsx(SearchInput, { onSearchChange: searchInputProps.onSearchChange }, void 0) }, void 0)), actions && _jsx(Actions, { iconOnly: false, items: actions }, void 0)] }, void 0)), loading && _jsx(Progress, { placement: 'local' }, void 0), !loading && (items.length ? _jsx(SummaryList, { items: items }, void 0) : _jsx(EmptyState, {}, void 0))] }, void 0));
 });
 export default SearchableList;
 //# sourceMappingURL=ViewAll.js.map

package/lib/components/SummaryList/ViewAll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,WAAW,EAAE,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,WAAiC,MAAM,eAAe,CAAC;AAO9D,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;qBACrC,IAAI,CAAC,OAAO;wCACO,IAAI,CAAC,OAAO;eACrC,IAAI,CAAC,OAAO;;MAErB,iBAAiB;;;GAGpB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,UAAU,CAChD,SAAS,CAAC,SAAS,CAAC,CACrB,CACC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChB,iBAAiB,QAAQ,UAAU,IAAI,UAAU,MAAM,iBAAiB;;;;MAIxE,OAAO;IACT,GAAG,CAAA;;KAEF;GACF,CACF,CAAC;AAEF,MAAM,cAAc,GAAoC,UAAU,CAChE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAE,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,aAAa,~~kBAAC~~,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,~~IAAM~~,SAAS,~~eACrD~~,CAAC,OAAO,IAAI,CAAC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAC5C,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,~~iBACrF~~,gBAAgB,IAAI,CACnB,KAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,~~gBAClE~~,KAAC,WAAW,IAAC,cAAc,EAAE,gBAAgB,CAAC,cAAc,WAAI,~~YAC3D~~,CACR,EACA,OAAO,IAAI,KAAC,OAAO,IAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,WAAI,~~aACnD~~,CACR,EAEA,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,WAAG,EACzC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC,CAAC,CAAC,KAAC,UAAU,aAAG,CAAC,~~aAC9D~~,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport SearchInput, { SearchInputProps, StyledSearchInput } from '../SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { StyledCard } from '../Card';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { omitProps } from '../../styles';\nimport type { ForwardProps } from '../../types';\n\nimport SummaryList, { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' \| 'actions' \| 'items'> {\n searchInputProps?: SearchInputProps;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${base.palette['primary-background']};\n margin-bottom: ${base.spacing};\n transform: translateY(calc(-0.5 * ${base.spacing}));\n padding: ${base.spacing} 0;\n\n ${StyledSearchInput} {\n flex-grow: 1;\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div.withConfig<{ loading: ViewAllProps['loading'] }>(\n omitProps('loading')\n)(\n ({ loading }) => css`\n ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n padding: 0;\n }\n\n ${loading &&\n css`\n min-height: 8rem;\n `}\n `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(\n ({ loading, actions, items, searchInputProps, ...restProps }, ref: ViewAllProps['ref']) => {\n return (\n <StyledViewAll ref={ref} loading={loading} {...restProps}>\n {!loading && (searchInputProps \|\| actions) && (\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} as={StyledToolbar}>\n {searchInputProps && (\n <Flex container={{ alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n <SearchInput onSearchChange={searchInputProps.onSearchChange} />\n </Flex>\n )}\n {actions && <Actions iconOnly={false} items={actions} />}\n </Flex>\n )}\n\n {loading && <Progress placement='local' />}\n {!loading && (items.length ? <SummaryList items={items} /> : <EmptyState />)}\n </StyledViewAll>\n );\n }\n);\n\nexport default SearchableList;\n"]}
1	+ {"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,WAAW,EAAE,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,WAAiC,MAAM,eAAe,CAAC;AAO9D,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;qBACrC,IAAI,CAAC,OAAO;wCACO,IAAI,CAAC,OAAO;eACrC,IAAI,CAAC,OAAO;;MAErB,iBAAiB;;;GAGpB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,UAAU,CAChD,SAAS,CAAC,SAAS,CAAC,CACrB,CACC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChB,iBAAiB,QAAQ,UAAU,IAAI,UAAU,MAAM,iBAAiB;;;;MAIxE,OAAO;IACT,GAAG,CAAA;;KAEF;GACF,CACF,CAAC;AAEF,MAAM,cAAc,GAAoC,UAAU,CAChE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAE,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,KAAM,SAAS,aACrD,CAAC,OAAO,IAAI,CAAC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAC5C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,aACrF,gBAAgB,IAAI,CACnB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAClE,KAAC,WAAW,IAAC,cAAc,EAAE,gBAAgB,CAAC,cAAc,WAAI,WAC3D,CACR,EACA,OAAO,IAAI,KAAC,OAAO,IAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,WAAI,YACnD,CACR,EAEA,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,WAAG,EACzC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC,CAAC,CAAC,KAAC,UAAU,aAAG,CAAC,YAC9D,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport SearchInput, { SearchInputProps, StyledSearchInput } from '../SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { StyledCard } from '../Card';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { omitProps } from '../../styles';\nimport type { ForwardProps } from '../../types';\n\nimport SummaryList, { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' \| 'actions' \| 'items'> {\n searchInputProps?: SearchInputProps;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${base.palette['primary-background']};\n margin-bottom: ${base.spacing};\n transform: translateY(calc(-0.5 * ${base.spacing}));\n padding: ${base.spacing} 0;\n\n ${StyledSearchInput} {\n flex-grow: 1;\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div.withConfig<{ loading: ViewAllProps['loading'] }>(\n omitProps('loading')\n)(\n ({ loading }) => css`\n ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n padding: 0;\n }\n\n ${loading &&\n css`\n min-height: 8rem;\n `}\n `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(\n ({ loading, actions, items, searchInputProps, ...restProps }, ref: ViewAllProps['ref']) => {\n return (\n <StyledViewAll ref={ref} loading={loading} {...restProps}>\n {!loading && (searchInputProps \|\| actions) && (\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} as={StyledToolbar}>\n {searchInputProps && (\n <Flex container={{ alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n <SearchInput onSearchChange={searchInputProps.onSearchChange} />\n </Flex>\n )}\n {actions && <Actions iconOnly={false} items={actions} />}\n </Flex>\n )}\n\n {loading && <Progress placement='local' />}\n {!loading && (items.length ? <SummaryList items={items} /> : <EmptyState />)}\n </StyledViewAll>\n );\n }\n);\n\nexport default SearchableList;\n"]}

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

@@ -132,7 +132,7 @@ export const StyledSwitch = styled.div ``;
 const Switch = forwardRef((props, ref) => {
     const uid = useUID();
     const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;
-    return (_jsxs(StyledSwitch, { children: [_jsx(SwitchInput, Object.assign({}, restProps, { id: id, type: 'checkbox', role: 'switch', checked: on, "aria-checked": on, disabled: disabled, onChange: onChange, ref: ref }), void 0), _jsxs(Flex, Object.assign({ container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id }, { children: [label, on && _jsx(Icon, { name: 'check' }, void 0)] }), void 0)] }, void 0));
+    return (_jsxs(StyledSwitch, { children: [_jsx(SwitchInput, { ...restProps, id: id, type: 'checkbox', role: 'switch', checked: on, "aria-checked": on, disabled: disabled, onChange: onChange, ref: ref }, void 0), _jsxs(Flex, { container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id, children: [label, on && _jsx(Icon, { name: 'check' }, void 0)] }, void 0)] }, void 0));
 });
 export default Switch;
 //# sourceMappingURL=Switch.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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~~oBACN~~,SAAS,~~IACb~~,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,EAAE,kBACG,EAAE,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,~~YACR~~,EACF,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,~~iBACpE~~,KAAK,EACL,EAAE,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,~~aACvB~~,YACM,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps {\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 /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /\n Disables the control.\n * @default false\n /\n disabled?: FormControlProps['disabled'];\n /\n Sets checked prop via onChange.\n * @default false\n /\n on?: boolean;\n /* Callback that is triggered when the Switch is toggled. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Ref for the input element. /\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n ({\n theme: {\n base,\n components: {\n switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n }\n }\n }) => {\n return css`\n position: relative;\n cursor: pointer;\n padding-inline-end: calc(${width} + 0.5rem);\n height: ${height};\n width: 100%;\n\n @media (pointer: coarse) {\n padding-inline-end: calc(${touchWidth} + 0.5rem);\n height: ${touchHeight};\n }\n\n /* Checkmark /\n & > ${StyledIcon} {\n position: absolute;\n inset-inline-end: calc(0.5 ${width} + 0.25rem);\n height: calc(0.5 * ${height});\n width: calc(0.5 * ${height});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n height: calc(0.5 * ${touchHeight});\n width: calc(0.5 * ${touchHeight});\n }\n }\n\n /** Track /\n &::before {\n position: absolute;\n content: '';\n inset-inline-end: 0;\n width: ${width};\n height: ${height};\n background-color: ${off.color};\n transition: background-color calc(0.5 ${base.animation.speed})\n ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n width: ${touchWidth};\n height: ${touchHeight};\n }\n }\n\n /** Switch /\n &::after {\n position: absolute;\n content: '';\n inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n height: calc(${height} - 0.125rem);\n width: calc(${height} - 0.125rem);\n background-color: ${base.palette['primary-background']};\n transition: transform calc(0.5 ${base.animation.speed}) ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n height: calc(${touchHeight} - 0.125rem);\n width: calc(${touchHeight} - 0.125rem);\n }\n }\n `;\n }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n ({\n theme: {\n base,\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow }\n },\n switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n }\n }\n }) => {\n const { ltr } = useDirection();\n\n const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n const onHoverColors = getHoverColors(on.color);\n const offHoverColors = getHoverColors(off.color);\n\n return css`\n ${hideVisually}\n\n & + ${SwitchLabel} {\n min-height: ${base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n & + ${SwitchLabel} > ${StyledIcon} {\n color: ${checkmarkColor};\n }\n\n &:checked + ${SwitchLabel}::before {\n background-color: ${on.color};\n }\n\n &:checked + ${SwitchLabel}::after {\n transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n @media (pointer: coarse) {\n transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n }\n }\n\n &:hover + ${SwitchLabel} > ${StyledIcon} {\n color: ${onHoverColors.foreground};\n }\n\n &:hover:checked + ${SwitchLabel}::before {\n background-color: ${onHoverColors.background};\n }\n\n &:hover + ${SwitchLabel}::before {\n background-color: ${offHoverColors.background};\n }\n\n &:focus + ${SwitchLabel}::before {\n box-shadow: ${shadow};\n }\n\n &:disabled + ${SwitchLabel} {\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SwitchProps>, ref: SwitchProps['ref']) => {\n const uid = useUID();\n const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n return (\n <StyledSwitch>\n <SwitchInput\n {...restProps}\n id={id}\n type='checkbox'\n role='switch'\n checked={on}\n aria-checked={on}\n disabled={disabled}\n onChange={onChange}\n ref={ref}\n />\n <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n {label}\n {on && <Icon name='check' />}\n </Flex>\n </StyledSwitch>\n );\n }\n);\n\nexport default Switch;\n"]}
1	+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps {\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 /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /\n Disables the control.\n * @default false\n /\n disabled?: FormControlProps['disabled'];\n /\n Sets checked prop via onChange.\n * @default false\n /\n on?: boolean;\n /* Callback that is triggered when the Switch is toggled. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Ref for the input element. /\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n ({\n theme: {\n base,\n components: {\n switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n }\n }\n }) => {\n return css`\n position: relative;\n cursor: pointer;\n padding-inline-end: calc(${width} + 0.5rem);\n height: ${height};\n width: 100%;\n\n @media (pointer: coarse) {\n padding-inline-end: calc(${touchWidth} + 0.5rem);\n height: ${touchHeight};\n }\n\n /* Checkmark /\n & > ${StyledIcon} {\n position: absolute;\n inset-inline-end: calc(0.5 ${width} + 0.25rem);\n height: calc(0.5 * ${height});\n width: calc(0.5 * ${height});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n height: calc(0.5 * ${touchHeight});\n width: calc(0.5 * ${touchHeight});\n }\n }\n\n /** Track /\n &::before {\n position: absolute;\n content: '';\n inset-inline-end: 0;\n width: ${width};\n height: ${height};\n background-color: ${off.color};\n transition: background-color calc(0.5 ${base.animation.speed})\n ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n width: ${touchWidth};\n height: ${touchHeight};\n }\n }\n\n /** Switch /\n &::after {\n position: absolute;\n content: '';\n inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n height: calc(${height} - 0.125rem);\n width: calc(${height} - 0.125rem);\n background-color: ${base.palette['primary-background']};\n transition: transform calc(0.5 ${base.animation.speed}) ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n height: calc(${touchHeight} - 0.125rem);\n width: calc(${touchHeight} - 0.125rem);\n }\n }\n `;\n }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n ({\n theme: {\n base,\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow }\n },\n switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n }\n }\n }) => {\n const { ltr } = useDirection();\n\n const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n const onHoverColors = getHoverColors(on.color);\n const offHoverColors = getHoverColors(off.color);\n\n return css`\n ${hideVisually}\n\n & + ${SwitchLabel} {\n min-height: ${base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n & + ${SwitchLabel} > ${StyledIcon} {\n color: ${checkmarkColor};\n }\n\n &:checked + ${SwitchLabel}::before {\n background-color: ${on.color};\n }\n\n &:checked + ${SwitchLabel}::after {\n transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n @media (pointer: coarse) {\n transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n }\n }\n\n &:hover + ${SwitchLabel} > ${StyledIcon} {\n color: ${onHoverColors.foreground};\n }\n\n &:hover:checked + ${SwitchLabel}::before {\n background-color: ${onHoverColors.background};\n }\n\n &:hover + ${SwitchLabel}::before {\n background-color: ${offHoverColors.background};\n }\n\n &:focus + ${SwitchLabel}::before {\n box-shadow: ${shadow};\n }\n\n &:disabled + ${SwitchLabel} {\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SwitchProps>, ref: SwitchProps['ref']) => {\n const uid = useUID();\n const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n return (\n <StyledSwitch>\n <SwitchInput\n {...restProps}\n id={id}\n type='checkbox'\n role='switch'\n checked={on}\n aria-checked={on}\n disabled={disabled}\n onChange={onChange}\n ref={ref}\n />\n <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n {label}\n {on && <Icon name='check' />}\n </Flex>\n </StyledSwitch>\n );\n }\n);\n\nexport default Switch;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;~~AAGjG~~,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,SAAS;IAC5F,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;~~AAwJD~~,QAAA,MAAM,KAAK,~~kGA8DN~~,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,SAAS;IAC5F,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAgKD,QAAA,MAAM,KAAK,kGAiEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}

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

@@ -2,6 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import Progress from '../Progress';
@@ -20,11 +21,6 @@ const StyledTable = styled.table(props => {
     width: 100%;
     background-color: transparent;
-    caption {
-      margin-bottom: ${spacing};
-      text-align: start;
-    }
     thead {
       tr th {
         padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${table.spacing['horizontal-inner'] ? horizontalSpacing : '0'}`};
@@ -109,11 +105,20 @@ const StyledLoadingCell = styled.td `
   position: relative;
   height: 6rem;
 `;
+const StyledTableWrapper = styled.div `
+  /* Setting it on a table element requires 'display: block' which breaks a11y. */
+  overflow-x: auto;
+`;
+StyledTableWrapper.defaultProps = defaultThemeProp;
+const StyledTableCaption = styled.caption `
+  ${hideVisually}
+`;
+StyledTableCaption.defaultProps = defaultThemeProp;
 const Table = forwardRef((props, ref) => {
     const { columns, data = [], hoverHighlight = false, loading = false, loadingMessage = '', title, ...restProps } = props;
-    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(StyledTable, Object.assign({ ref: ref, hoverHighlight: hoverHighlight }, restProps, { children: [title && (_jsx(Text, Object.assign({ as: 'caption', variant: 'h2' }, { children: title }), void 0)), _jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))) }, void 0) }, void 0), _jsxs("tbody", { children: [loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, Object.assign({ colSpan: columns.length }, { children: _jsx(Progress, { placement: 'local', message: loadingMessage }, void 0) }), void 0) }, void 0)), data.length > 0 &&
-                                !loading &&
-                                data.map(row => (_jsx("tr", { children: columns.map(({ renderer: Renderer, ...col }) => (_createElement(StyledCell, { as: StyledBodyCell, ...col, key: `${col.label}-${row.id}` }, typeof Renderer === 'function' ? _jsx(Renderer, Object.assign({}, row), void 0) : row[Renderer]))) }, row.id))), data.length === 0 && !loading && (_jsx("tr", { children: _jsx(StyledEmptyCell, Object.assign({ colSpan: columns.length }, { children: _jsx(EmptyState, {}, void 0) }), void 0) }, void 0))] }, void 0)] }), void 0) }, void 0) }, void 0));
+    return (_jsx(Card, { children: _jsxs(CardContent, { container: { rowGap: 1 }, children: [title && (_jsx(Text, { variant: 'h2', as: 'span', "aria-hidden": true, children: title }, void 0)), _jsx(StyledTableWrapper, { children: _jsxs(StyledTable, { ref: ref, hoverHighlight: hoverHighlight, ...restProps, children: [title && _jsx(StyledTableCaption, { children: title }, void 0), _jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))) }, void 0) }, void 0), _jsxs("tbody", { children: [loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: columns.length, children: _jsx(Progress, { placement: 'local', message: loadingMessage }, void 0) }, void 0) }, void 0)), data.length > 0 &&
+                                        !loading &&
+                                        data.map(row => (_jsx("tr", { children: columns.map(({ renderer: Renderer, ...col }) => (_createElement(StyledCell, { as: StyledBodyCell, ...col, key: `${col.label}-${row.id}` }, typeof Renderer === 'function' ? _jsx(Renderer, { ...row }, void 0) : row[Renderer]))) }, row.id))), data.length === 0 && !loading && (_jsx("tr", { children: _jsx(StyledEmptyCell, { colSpan: columns.length, children: _jsx(EmptyState, {}, void 0) }, void 0) }, void 0))] }, void 0)] }, void 0) }, void 0)] }, void 0) }, void 0));
 });
 export default Table;
 //# sourceMappingURL=Table.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n id: string \| number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. /\n renderer: ComponentType<RowData> \| keyof RowData;\n /* The visual label for the column. /\n label: string;\n /\n The text alignment of the column header and the row contents for the column.\n * @default \"left\"\n /\n align?: 'left' \| 'center' \| 'right';\n /\n If true, this column will not wrap text on overflow.\n * @default false\n /\n noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData> extends BaseProps {\n /* The column headers that will structure the Table. /\n columns: ColumnProps<RowData>[];\n /\n The content of the Table, represented as an array of objects with key value pairs.\n * @default []\n /\n data?: RowData[];\n /\n Should the data rows highlight when the mouse hovers over them.\n * @default false\n /\n hoverHighlight?: boolean;\n /\n Indicates if the data to populate the Table is still loading.\n * @default false\n /\n loading?: boolean;\n /* A message to be displayed when Table data is loading. /\n loadingMessage?: string;\n /* The title that will render above the Table if provided. /\n title?: ReactNode;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' \| 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n const {\n hoverHighlight,\n theme: {\n base: {\n palette: { 'secondary-background': hoverBg },\n spacing\n },\n components: { table }\n }\n } = props;\n\n const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} ${spacing})`;\n const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n return css`\n border-collapse: collapse;\n width: 100%;\n background-color: transparent;\n\n caption {\n margin-bottom: ${spacing};\n text-align: start;\n }\n\n thead {\n tr th {\n padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n }`};\n border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n }\n\n tr:first-of-type th {\n padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n }\n\n tr th:first-of-type {\n padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n }\n\n tr th:last-of-type {\n padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n }\n }\n\n tbody {\n tr td {\n padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n }`};\n border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n }\n\n tr:last-of-type td {\n padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n }\n\n tr td:first-of-type {\n padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n }\n\n tr td:last-of-type {\n padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n }\n }\n\n ${hoverHighlight &&\n css`\n tbody tr:hover td,\n tbody tr:focus-within td {\n background-color: ${hoverBg};\n }\n `}\n `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' \| 'noWrap'>>(\n ({ align, noWrap = false }) => css`\n text-align: ${align \|\| 'left'};\n white-space: ${noWrap ? 'nowrap' : null};\n `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n table: { header }\n }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes[header['font-size'] as FontSize]};\n font-weight: ${header['font-weight']};\n color: ${header['foreground-color']};\n background-color: ${header['background-color']};\n `;\n }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n ({\n theme: {\n components: {\n table: { body }\n }\n }\n }) => css`\n color: ${body['foreground-color']};\n background-color: ${body['background-color']};\n `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n position: relative;\n height: 6rem;\n`;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n const {\n columns,\n data = [],\n hoverHighlight = false,\n loading = false,\n loadingMessage = '',\n title,\n ...restProps\n } = props;\n\n return (\n <Card>\n <CardContent>\n <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n {title && (\n <Text as='caption' variant='h2'>\n {title}\n </Text>\n )}\n <thead>\n <tr>\n {columns.map(col => (\n <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n {col.label}\n </StyledCell>\n ))}\n </tr>\n </thead>\n <tbody>\n {loading && (\n <tr>\n <StyledLoadingCell colSpan={columns.length}>\n <Progress placement='local' message={loadingMessage} />\n </StyledLoadingCell>\n </tr>\n )}\n {data.length > 0 &&\n !loading &&\n data.map(row => (\n <tr key={row.id}>\n {columns.map(({ renderer: Renderer, ...col }) => (\n <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n </StyledCell>\n ))}\n </tr>\n ))}\n {data.length === 0 && !loading && (\n <tr>\n <StyledEmptyCell colSpan={columns.length}>\n <EmptyState />\n </StyledEmptyCell>\n </tr>\n )}\n </tbody>\n </StyledTable>\n </CardContent>\n </Card>\n );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n props: TableProps<RowData> & ForwardProps\n) => ReactElement \| null;\n\nexport default Table;\n"]}
1	+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n id: string \| number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. /\n renderer: ComponentType<RowData> \| keyof RowData;\n /* The visual label for the column. /\n label: string;\n /\n The text alignment of the column header and the row contents for the column.\n * @default \"left\"\n /\n align?: 'left' \| 'center' \| 'right';\n /\n If true, this column will not wrap text on overflow.\n * @default false\n /\n noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData> extends BaseProps {\n /* The column headers that will structure the Table. /\n columns: ColumnProps<RowData>[];\n /\n The content of the Table, represented as an array of objects with key value pairs.\n * @default []\n /\n data?: RowData[];\n /\n Should the data rows highlight when the mouse hovers over them.\n * @default false\n /\n hoverHighlight?: boolean;\n /\n Indicates if the data to populate the Table is still loading.\n * @default false\n /\n loading?: boolean;\n /* A message to be displayed when Table data is loading. /\n loadingMessage?: string;\n /* The title that will render above the Table if provided. /\n title?: ReactNode;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' \| 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n const {\n hoverHighlight,\n theme: {\n base: {\n palette: { 'secondary-background': hoverBg },\n spacing\n },\n components: { table }\n }\n } = props;\n\n const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} ${spacing})`;\n const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n return css`\n border-collapse: collapse;\n width: 100%;\n background-color: transparent;\n\n thead {\n tr th {\n padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n }`};\n border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n }\n\n tr:first-of-type th {\n padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n }\n\n tr th:first-of-type {\n padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n }\n\n tr th:last-of-type {\n padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n }\n }\n\n tbody {\n tr td {\n padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n }`};\n border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n }\n\n tr:last-of-type td {\n padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n }\n\n tr td:first-of-type {\n padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n }\n\n tr td:last-of-type {\n padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n }\n }\n\n ${hoverHighlight &&\n css`\n tbody tr:hover td,\n tbody tr:focus-within td {\n background-color: ${hoverBg};\n }\n `}\n `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' \| 'noWrap'>>(\n ({ align, noWrap = false }) => css`\n text-align: ${align \|\| 'left'};\n white-space: ${noWrap ? 'nowrap' : null};\n `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n table: { header }\n }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes[header['font-size'] as FontSize]};\n font-weight: ${header['font-weight']};\n color: ${header['foreground-color']};\n background-color: ${header['background-color']};\n `;\n }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n ({\n theme: {\n components: {\n table: { body }\n }\n }\n }) => css`\n color: ${body['foreground-color']};\n background-color: ${body['background-color']};\n `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n position: relative;\n height: 6rem;\n`;\n\nconst StyledTableWrapper = styled.div`\n /* Setting it on a table element requires 'display: block' which breaks a11y. */\n overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n const {\n columns,\n data = [],\n hoverHighlight = false,\n loading = false,\n loadingMessage = '',\n title,\n ...restProps\n } = props;\n\n return (\n <Card>\n <CardContent container={{ rowGap: 1 }}>\n {title && (\n <Text variant='h2' as='span' aria-hidden>\n {title}\n </Text>\n )}\n <StyledTableWrapper>\n <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n {title && <StyledTableCaption>{title}</StyledTableCaption>}\n <thead>\n <tr>\n {columns.map(col => (\n <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n {col.label}\n </StyledCell>\n ))}\n </tr>\n </thead>\n <tbody>\n {loading && (\n <tr>\n <StyledLoadingCell colSpan={columns.length}>\n <Progress placement='local' message={loadingMessage} />\n </StyledLoadingCell>\n </tr>\n )}\n {data.length > 0 &&\n !loading &&\n data.map(row => (\n <tr key={row.id}>\n {columns.map(({ renderer: Renderer, ...col }) => (\n <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n </StyledCell>\n ))}\n </tr>\n ))}\n {data.length === 0 && !loading && (\n <tr>\n <StyledEmptyCell colSpan={columns.length}>\n <EmptyState />\n </StyledEmptyCell>\n </tr>\n )}\n </tbody>\n </StyledTable>\n </StyledTableWrapper>\n </CardContent>\n </Card>\n );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n props: TableProps<RowData> & ForwardProps\n) => ReactElement \| null;\n\nexport default Table;\n"]}

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

@@ -139,7 +139,7 @@ export const StyledTab = styled(BareButton) `
 `;
 StyledTab.defaultProps = defaultThemeProp;
 const Tab = forwardRef(({ selected, inverted, content, count, type, disabled, ...restProps }, ref) => {
-    return (_jsxs(StyledTab, Object.assign({ ref: ref, selected: selected, inverted: inverted, tabType: type, disabled: disabled, type: 'button' }, restProps, { children: [_jsx("span", Object.assign({ "data-content": content }, { children: content }), void 0), count] }), void 0));
+    return (_jsxs(StyledTab, { ref: ref, selected: selected, inverted: inverted, tabType: type, disabled: disabled, type: 'button', ...restProps, children: [_jsx("span", { "data-content": content, children: content }, void 0), count] }, void 0));
 });
 export default Tab;
 //# sourceMappingURL=Tab.js.map