npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-dev.18.0 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-core 2.0.0-dev.18.0 → 2.0.0-dev.20.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 (331) hide show

package/lib/components/DateTime/Picker/Weeks.js CHANGED Viewed

@@ -77,7 +77,7 @@ const Weeks = forwardRef((props, ref) => {
     const weekText = t('week_label_a11y');
     const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {
         const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());
-        return (_jsxs(StyledWeekNumber, Object.assign({ variant: 'simple', icon: false, type: 'button', loading: false, ref: isFocused(dateOfISOWeek)
+        return (_jsxs(StyledWeekNumber, { variant: 'simple', icon: false, type: 'button', loading: false, ref: isFocused(dateOfISOWeek)
                 ? (focusedRef) => {
                     if (hasFocus)
                         focusedRef?.focus();
@@ -86,10 +86,10 @@ const Weeks = forwardRef((props, ref) => {
                 .getUTCFullYear()
                 .toString()}`, onClick: () => {
                 onSelect?.(dateOfISOWeek);
-            } }, { children: [size === 'long' && `${weekText} `, weekNo.toString()] }), weekNo));
+            }, children: [size === 'long' && `${weekText} `, weekNo.toString()] }, weekNo));
     });
-    const label = size === 'short' ? (_jsx(Text, Object.assign({ as: StyledColumnLabel, forwardedAs: 'abbr', title: weekText }, { children: t('week_text_short') }), void 0)) : (_jsx(Text, Object.assign({ as: StyledColumnLabel }, { children: weekText }), void 0));
-    return (_jsxs(Flex, Object.assign({ as: StyledWeekNumbers, container: { direction: 'column' }, ref: containerRef, onKeyDown: onKeyDown }, { children: [label, weeks] }), void 0));
+    const label = size === 'short' ? (_jsx(Text, { as: StyledColumnLabel, forwardedAs: 'abbr', title: weekText, children: t('week_text_short') }, void 0)) : (_jsx(Text, { as: StyledColumnLabel, children: weekText }, void 0));
+    return (_jsxs(Flex, { as: StyledWeekNumbers, container: { direction: 'column' }, ref: containerRef, onKeyDown: onKeyDown, children: [label, weeks] }, void 0));
 });
 export default Weeks;
 //# sourceMappingURL=Weeks.js.map

package/lib/components/DateTime/Picker/Weeks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Weeks.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Weeks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n useLayoutEffect,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { defaultThemeProp } from '../../../theme';\nimport Text from '../../Text';\nimport { getDateOfISOWeek, getWeek, parseToDate, toUTCDateString } from '../Input/utils';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { StyledColumnLabel, StyledPick } from './Calendar.styles';\nimport { getWeeksOfMonth } from './utils';\n\nexport interface WeeksProps {\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 /\n Defines default week that will be selected when the Date Picker is opened.\n /\n selected?: Date;\n /\n Defines default week that will be focused initially when the Date Picker is opened.\n * @default new Date()\n /\n current?: Date;\n /* Callback fired when user focuses new week. /\n onFocus?: (date: Date) => void;\n /* Callback fired when new week is selected. /\n onSelect?: (date: Date) => void;\n /* Sets the type of calendar to be used. This will be determined by locale if no value is provided. /\n calendarType?: string;\n /* Defines minimum available value that can be selected by the user. /\n min?: string \| number \| Date;\n /* Defines maximum available value that can be selected by the user. /\n max?: string \| number \| Date;\n /* Set the calendar to disabled state, ie. non-interactive. /\n disabled?: boolean;\n /* Should text be in long or short format (ie. only number). /\n size?: 'short' \| 'long';\n}\n\nexport const StyledWeekNumbers = styled.div`\n margin-inline-end: ${props => props.theme.base.spacing};\n color: rgba(0, 0, 0, 0.75);\n`;\n\nStyledWeekNumbers.defaultProps = defaultThemeProp;\n\nconst StyledWeekNumber = styled(StyledPick)(props => {\n const {\n theme: {\n base: { 'border-radius': borderRadius }\n }\n } = props;\n\n return css`\n &:disabled {\n &:nth-child(2) {\n border-radius: calc(0.5 ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n }\n &:last-child {\n border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n }\n }\n `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nconst Weeks: FC<WeeksProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<WeeksProps>, ref: Ref<HTMLButtonElement>) => {\n const {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n calendarType = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled = false,\n size = 'short'\n } = props;\n\n const [focusedWeek, setFocusedWeek] = useState(current);\n useLayoutEffect(() => {\n setFocusedWeek(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n let newFocused: Date;\n const onKeyDown = (ev: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Enter'].includes(ev.key)) ev.preventDefault();\n switch (ev.key) {\n case 'ArrowUp':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() - 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'ArrowDown':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() + 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'Enter':\n onSelect?.(focusedWeek);\n break;\n default:\n }\n };\n\n const containerRef = useConsolidatedRef(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const min = props.min ? parseToDate(props.min) : -Infinity;\n const max = props.max ? parseToDate(props.max) : Infinity;\n const isDisabled = (day: Date) => {\n return disabled \|\| min > day.getTime() \|\| day.getTime() > max;\n };\n\n const isChecked = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedWeek, calendarType), focusedWeek.getFullYear())\n )\n );\n };\n\n const t = useI18n();\n\n const weekText = t('week_label_a11y');\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n return (\n <StyledWeekNumber\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(dateOfISOWeek) ? 0 : -1}\n disabled={isDisabled(dateOfISOWeek)}\n aria-selected={isChecked(dateOfISOWeek) \|\| undefined}\n aria-label={`${t('week_label_a11y')} ${weekNo.toString()} ${current\n .getUTCFullYear()\n .toString()}`}\n onClick={() => {\n onSelect?.(dateOfISOWeek);\n }}\n >\n {size === 'long' && `${weekText} `}\n {weekNo.toString()}\n </StyledWeekNumber>\n );\n });\n\n const label =\n size === 'short' ? (\n <Text as={StyledColumnLabel} forwardedAs='abbr' title={weekText}>\n {t('week_text_short')}\n </Text>\n ) : (\n <Text as={StyledColumnLabel}>{weekText}</Text>\n );\n\n return (\n <Flex\n as={StyledWeekNumbers}\n container={{ direction: 'column' }}\n ref={containerRef}\n onKeyDown={onKeyDown}\n >\n {label}\n {weeks}\n </Flex>\n );\n }\n);\n\nexport default Weeks;\n"]}
1	+ {"version":3,"file":"Weeks.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Weeks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,eAAe,EAEf,QAAQ,EACR,UAAU,EAGX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiC1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;uBACpB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAEvD,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE;IAClD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;oCAGwB,YAAY,gBAAgB,YAAY;;;wCAGpC,YAAY,gBAAgB,YAAY;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAA2B,EAAE,EAAE;IAClE,MAAM,EACJ,QAAQ,EACR,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,EAC9D,YAAY,GAAG,cAAc,CAAC,QAAQ,EACtC,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,OAAO,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxD,eAAe,CAAC,GAAG,EAAE;QACnB,cAAc,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAEtD,IAAI,UAAgB,CAAC;IACrB,MAAM,SAAS,GAAG,CAAC,EAA8B,EAAE,EAAE;QACnD,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC;YAAE,EAAE,CAAC,cAAc,EAAE,CAAC;QAC5E,QAAQ,EAAE,CAAC,GAAG,EAAE;YACd,KAAK,SAAS;gBACZ,UAAU,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;gBACnC,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;gBACpD,cAAc,CAAC,UAAU,CAAC,CAAC;gBAC3B,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;gBACtB,MAAM;YACR,KAAK,WAAW;gBACd,UAAU,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;gBACnC,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;gBACpD,cAAc,CAAC,UAAU,CAAC,CAAC;gBAC3B,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;gBACtB,MAAM;YACR,KAAK,OAAO;gBACV,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC;gBACxB,MAAM;YACR,QAAQ;SACT;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhD,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC3D,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC1D,MAAM,UAAU,GAAG,CAAC,GAAS,EAAE,EAAE;QAC/B,OAAO,QAAQ,IAAI,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAS,EAAE,EAAE;QAC9B,OAAO,CACL,QAAQ;YACR,eAAe,CAAC,GAAG,CAAC;gBAClB,eAAe,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAC7F,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAS,EAAE,EAAE;QAC9B,OAAO,CACL,eAAe,CAAC,GAAG,CAAC;YACpB,eAAe,CACb,gBAAgB,CAAC,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAChF,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAEtC,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAChE,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;QACzE,OAAO,CACL,MAAC,gBAAgB,IAEf,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,KAAK,EACX,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EACd,GAAG,EACD,SAAS,CAAC,aAAa,CAAC;gBACtB,CAAC,CAAC,CAAC,UAA6B,EAAE,EAAE;oBAChC,IAAI,QAAQ;wBAAE,UAAU,EAAE,KAAK,EAAE,CAAC;gBACpC,CAAC;gBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3C,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,mBACpB,SAAS,CAAC,aAAa,CAAC,IAAI,SAAS,gBACxC,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,MAAM,CAAC,QAAQ,EAAE,IAAI,OAAO;iBAChE,cAAc,EAAE;iBAChB,QAAQ,EAAE,EAAE,EACf,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC;YAC5B,CAAC,aAEA,IAAI,KAAK,MAAM,IAAI,GAAG,QAAQ,GAAG,EACjC,MAAM,CAAC,QAAQ,EAAE,KAvBb,MAAM,CAwBM,CACpB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GACT,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACjB,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,WAAW,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,YAC5D,CAAC,CAAC,iBAAiB,CAAC,WAChB,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,YAAG,QAAQ,WAAQ,CAC/C,CAAC;IAEJ,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,aAEnB,KAAK,EACL,KAAK,YACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import {\n FC,\n useLayoutEffect,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { defaultThemeProp } from '../../../theme';\nimport Text from '../../Text';\nimport { getDateOfISOWeek, getWeek, parseToDate, toUTCDateString } from '../Input/utils';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { StyledColumnLabel, StyledPick } from './Calendar.styles';\nimport { getWeeksOfMonth } from './utils';\n\nexport interface WeeksProps {\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 /\n Defines default week that will be selected when the Date Picker is opened.\n /\n selected?: Date;\n /\n Defines default week that will be focused initially when the Date Picker is opened.\n * @default new Date()\n /\n current?: Date;\n /* Callback fired when user focuses new week. /\n onFocus?: (date: Date) => void;\n /* Callback fired when new week is selected. /\n onSelect?: (date: Date) => void;\n /* Sets the type of calendar to be used. This will be determined by locale if no value is provided. /\n calendarType?: string;\n /* Defines minimum available value that can be selected by the user. /\n min?: string \| number \| Date;\n /* Defines maximum available value that can be selected by the user. /\n max?: string \| number \| Date;\n /* Set the calendar to disabled state, ie. non-interactive. /\n disabled?: boolean;\n /* Should text be in long or short format (ie. only number). /\n size?: 'short' \| 'long';\n}\n\nexport const StyledWeekNumbers = styled.div`\n margin-inline-end: ${props => props.theme.base.spacing};\n color: rgba(0, 0, 0, 0.75);\n`;\n\nStyledWeekNumbers.defaultProps = defaultThemeProp;\n\nconst StyledWeekNumber = styled(StyledPick)(props => {\n const {\n theme: {\n base: { 'border-radius': borderRadius }\n }\n } = props;\n\n return css`\n &:disabled {\n &:nth-child(2) {\n border-radius: calc(0.5 ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n }\n &:last-child {\n border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n }\n }\n `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nconst Weeks: FC<WeeksProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<WeeksProps>, ref: Ref<HTMLButtonElement>) => {\n const {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n calendarType = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled = false,\n size = 'short'\n } = props;\n\n const [focusedWeek, setFocusedWeek] = useState(current);\n useLayoutEffect(() => {\n setFocusedWeek(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n let newFocused: Date;\n const onKeyDown = (ev: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Enter'].includes(ev.key)) ev.preventDefault();\n switch (ev.key) {\n case 'ArrowUp':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() - 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'ArrowDown':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() + 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'Enter':\n onSelect?.(focusedWeek);\n break;\n default:\n }\n };\n\n const containerRef = useConsolidatedRef(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const min = props.min ? parseToDate(props.min) : -Infinity;\n const max = props.max ? parseToDate(props.max) : Infinity;\n const isDisabled = (day: Date) => {\n return disabled \|\| min > day.getTime() \|\| day.getTime() > max;\n };\n\n const isChecked = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedWeek, calendarType), focusedWeek.getFullYear())\n )\n );\n };\n\n const t = useI18n();\n\n const weekText = t('week_label_a11y');\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n return (\n <StyledWeekNumber\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(dateOfISOWeek) ? 0 : -1}\n disabled={isDisabled(dateOfISOWeek)}\n aria-selected={isChecked(dateOfISOWeek) \|\| undefined}\n aria-label={`${t('week_label_a11y')} ${weekNo.toString()} ${current\n .getUTCFullYear()\n .toString()}`}\n onClick={() => {\n onSelect?.(dateOfISOWeek);\n }}\n >\n {size === 'long' && `${weekText} `}\n {weekNo.toString()}\n </StyledWeekNumber>\n );\n });\n\n const label =\n size === 'short' ? (\n <Text as={StyledColumnLabel} forwardedAs='abbr' title={weekText}>\n {t('week_text_short')}\n </Text>\n ) : (\n <Text as={StyledColumnLabel}>{weekText}</Text>\n );\n\n return (\n <Flex\n as={StyledWeekNumbers}\n container={{ direction: 'column' }}\n ref={containerRef}\n onKeyDown={onKeyDown}\n >\n {label}\n {weeks}\n </Flex>\n );\n }\n);\n\nexport default Weeks;\n"]}

package/lib/components/DateTime/Picker/utils.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export declare const getLocalizedDays: (calendarType: string, localeTag?: string | undefined) => string[][];
+export declare const isValidDate: (date: Date) => boolean;
 export declare const getDaysOfMonth: (date: Date, calendarType: string) => Date[];
 export declare const getWeeksOfMonth: (date: Date, calendarType: string) => number[];
 export declare const getNextMonth: (date: Date) => number;

package/lib/components/DateTime/Picker/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,+CAOpD,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,MAAM,+CAOpD,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,YAErC,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,IAAI,gBAAgB,MAAM,KAAG,IAAI,EAQrE,CAAC;AAEF,eAAO,MAAM,eAAe,SAAU,IAAI,gBAAgB,MAAM,KAAG,MAAM,EAmBxE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,IAAI,WAGtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,IAAI,WAG1C,CAAC;AAIF,wBAAiB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,kCAMrD"}

package/lib/components/DateTime/Picker/utils.js CHANGED Viewed

@@ -8,6 +8,9 @@ export const getLocalizedDays = (calendarType, localeTag) => {
         ];
     });
 };
+export const isValidDate = (date) => {
+    return date.toString() !== 'Invalid Date';
+};
 export const getDaysOfMonth = (date, calendarType) => {
     const firstDayInMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
     const startingWeekDay = getDayOfWeek(firstDayInMonth, calendarType);

package/lib/components/DateTime/Picker/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { cap, range } from '../../../utils';\nimport { getDayOfWeek, getWeek, getWeekdays } from '../Input/utils';\n\nexport const getLocalizedDays = (calendarType: string, localeTag?: string) => {\n return getWeekdays(calendarType).map(weekdayDate => {\n return [\n cap(weekdayDate.toLocaleString(localeTag, { weekday: 'long' })),\n cap(weekdayDate.toLocaleString(localeTag, { weekday: 'short' }))\n ];\n });\n};\n\nexport const getDaysOfMonth = (date: Date, calendarType: string): Date[] => {\n const firstDayInMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));\n const startingWeekDay = getDayOfWeek(firstDayInMonth, calendarType);\n\n /** 6 rows * 7 days = 42 /\n return range(1 - startingWeekDay, 42 - startingWeekDay).map((day: number) => {\n return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), day));\n });\n};\n\nexport const getWeeksOfMonth = (date: Date, calendarType: string): number[] => {\n const weekdays = [];\n const year = date.getUTCFullYear();\n const month = date.getUTCMonth();\n const dayInLastWeek = new Date(Date.UTC(year, month, 36));\n const lastWeek = getWeek(dayInLastWeek, calendarType);\n\n let day;\n let currentWeek;\n let iterator = 1;\n\n do {\n day = new Date(Date.UTC(year, month, iterator));\n currentWeek = getWeek(day, calendarType);\n weekdays.push(currentWeek);\n iterator += 7;\n } while (currentWeek !== lastWeek);\n\n return weekdays;\n};\n\nexport const getNextMonth = (date: Date) => {\n const next = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));\n return next.getUTCMonth();\n};\n\nexport const getPreviousMonth = (date: Date) => {\n const prev = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() - 1, 1));\n return prev.getUTCMonth();\n};\n\nconst DAY_IN_MILLISECONDS = 86400000;\n\nexport function getIntervalGenerator(interval: number) {\n const current = new Date(0);\n while (current.getTime() < DAY_IN_MILLISECONDS) {\n yield new Date(current);\n current.setTime(current.getTime() + interval);\n }\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { cap, range } from '../../../utils';\nimport { getDayOfWeek, getWeek, getWeekdays } from '../Input/utils';\n\nexport const getLocalizedDays = (calendarType: string, localeTag?: string) => {\n return getWeekdays(calendarType).map(weekdayDate => {\n return [\n cap(weekdayDate.toLocaleString(localeTag, { weekday: 'long' })),\n cap(weekdayDate.toLocaleString(localeTag, { weekday: 'short' }))\n ];\n });\n};\n\nexport const isValidDate = (date: Date) => {\n return date.toString() !== 'Invalid Date';\n};\n\nexport const getDaysOfMonth = (date: Date, calendarType: string): Date[] => {\n const firstDayInMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));\n const startingWeekDay = getDayOfWeek(firstDayInMonth, calendarType);\n\n /** 6 rows * 7 days = 42 /\n return range(1 - startingWeekDay, 42 - startingWeekDay).map((day: number) => {\n return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), day));\n });\n};\n\nexport const getWeeksOfMonth = (date: Date, calendarType: string): number[] => {\n const weekdays = [];\n const year = date.getUTCFullYear();\n const month = date.getUTCMonth();\n const dayInLastWeek = new Date(Date.UTC(year, month, 36));\n const lastWeek = getWeek(dayInLastWeek, calendarType);\n\n let day;\n let currentWeek;\n let iterator = 1;\n\n do {\n day = new Date(Date.UTC(year, month, iterator));\n currentWeek = getWeek(day, calendarType);\n weekdays.push(currentWeek);\n iterator += 7;\n } while (currentWeek !== lastWeek);\n\n return weekdays;\n};\n\nexport const getNextMonth = (date: Date) => {\n const next = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));\n return next.getUTCMonth();\n};\n\nexport const getPreviousMonth = (date: Date) => {\n const prev = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() - 1, 1));\n return prev.getUTCMonth();\n};\n\nconst DAY_IN_MILLISECONDS = 86400000;\n\nexport function getIntervalGenerator(interval: number) {\n const current = new Date(0);\n while (current.getTime() < DAY_IN_MILLISECONDS) {\n yield new Date(current);\n current.setTime(current.getTime() + interval);\n }\n}\n"]}

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

@@ -67,7 +67,7 @@ const Drawer = forwardRef((props, ref) => {
             return;
         setState(open ? 'open' : 'closed');
     }, [open]);
-    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, Object.assign({ ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd }, restProps, { children: children }), void 0));
+    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }, void 0));
 });
 export default Drawer;
 //# sourceMappingURL=Drawer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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~~kBACX~~,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IAAI,IAAI,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,~~IAC5B~~,SAAS,~~cAEZ~~,QAAQ,~~YACI~~,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n useEffect,\n Ref,\n useCallback,\n FunctionComponent,\n forwardRef,\n ReactNode,\n TransitionEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /*\n If true, the Drawer will be visible.\n * @default false\n /\n open: boolean;\n /* Content of the Drawer. /\n children?: ReactNode;\n /\n Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n /\n shadow?: boolean;\n /\n Used to determine which side of the viewport the Drawer should open from.\n * @default \"right\"\n /\n placement?: 'top' \| 'right' \| 'bottom' \| 'left';\n /\n The position of the Drawer.\n * @default \"absolute\"\n /\n position?: 'absolute' \| 'fixed';\n /\n Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n The width or height that the Drawer will open to, depending on its placement.\n * @default \"100%\"\n /\n size?: string;\n /* Callback fired after Drawer opens. /\n onAfterOpen?: () => void;\n /* Callback fired after Drawer closes. /\n onAfterClose?: () => void;\n /* Callback fired before Drawer opens. /\n onBeforeOpen?: () => void;\n /* Callback fired before Drawer closes. /\n onBeforeClose?: () => void;\n /* Callback fired when a click action occurs outside of the Drawer. /\n onOuterClick?: () => void;\n /\n If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' \| 'closed' \| 'opening' \| 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' \|\| placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' \|\| state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed \|\| theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${`translate${axis}(${\n placement === 'top' \|\| placement === 'left' ? '-' : ''\n }${translate})`};\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n (props: DrawerProps, ref: Ref<HTMLElement>) => {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef.current],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' \|\| state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' \|\| state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current \|\| e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n </StyledDrawer>\n );\n }\n);\n\nexport default Drawer;\n"]}
1	+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useEffect,\n Ref,\n useCallback,\n FunctionComponent,\n forwardRef,\n ReactNode,\n TransitionEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /*\n If true, the Drawer will be visible.\n * @default false\n /\n open: boolean;\n /* Content of the Drawer. /\n children?: ReactNode;\n /\n Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n /\n shadow?: boolean;\n /\n Used to determine which side of the viewport the Drawer should open from.\n * @default \"right\"\n /\n placement?: 'top' \| 'right' \| 'bottom' \| 'left';\n /\n The position of the Drawer.\n * @default \"absolute\"\n /\n position?: 'absolute' \| 'fixed';\n /\n Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n The width or height that the Drawer will open to, depending on its placement.\n * @default \"100%\"\n /\n size?: string;\n /* Callback fired after Drawer opens. /\n onAfterOpen?: () => void;\n /* Callback fired after Drawer closes. /\n onAfterClose?: () => void;\n /* Callback fired before Drawer opens. /\n onBeforeOpen?: () => void;\n /* Callback fired before Drawer closes. /\n onBeforeClose?: () => void;\n /* Callback fired when a click action occurs outside of the Drawer. /\n onOuterClick?: () => void;\n /\n If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' \| 'closed' \| 'opening' \| 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' \|\| placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' \|\| state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed \|\| theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${`translate${axis}(${\n placement === 'top' \|\| placement === 'left' ? '-' : ''\n }${translate})`};\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n (props: DrawerProps, ref: Ref<HTMLElement>) => {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef.current],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' \|\| state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' \|\| state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current \|\| e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n </StyledDrawer>\n );\n }\n);\n\nexport default Drawer;\n"]}

package/lib/components/Email/EmailDisplay.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import Link from '../Link';
 const EmailDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    const displayValue = value ? (displayText || value) : (_jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0));
-    return variant === 'text' || !value ? (_jsx("span", Object.assign({ ref: ref }, restProps, { children: displayValue }), void 0)) : (_jsx(Link, Object.assign({ ref: ref }, restProps, { href: `mailto:${value}` }, { children: displayValue }), void 0));
+    const displayValue = value ? (displayText || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: `mailto:${value}`, children: displayValue }, void 0));
 });
 export default EmailDisplay;
 //# sourceMappingURL=EmailDisplay.js.map

package/lib/components/Email/EmailDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,KAAK,CACrB,CAAC,CAAC,CAAC,CACF,~~4CAAkB~~,MAAM,~~0CAAsB~~,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,~~6BAAM~~,GAAG,EAAE,GAAG,~~IAAM~~,SAAS,~~cAC1B~~,YAAY,~~YACR~~,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,~~kBAAC~~,GAAG,EAAE,GAA6B,~~IAAM~~,SAAS,~~IAAE~~,IAAI,EAAE,UAAU,KAAK,EAAE,~~gBAC7E~~,YAAY,~~YACR~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Link from '../Link';\n\nexport interface EmailDisplayProps extends BaseProps {\n /** Email address, no 'mailto:' scheme /\n value?: string;\n /* The text to be displayed. /\n displayText?: string;\n /\n Controls styling of the field.\n * @default \"link\"\n /\n variant?: 'link' \| 'text';\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement \| HTMLSpanElement>;\n}\n\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n (\n { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n ref: EmailDisplayProps['ref']\n ) => {\n const displayValue = value ? (\n displayText \|\| value\n ) : (\n <span aria-hidden='true'>––</span>\n );\n return variant === 'text' \|\| !value ? (\n <span ref={ref} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`mailto:${value}`}>\n {displayValue}\n </Link>\n );\n }\n);\n\nexport default EmailDisplay;\n"]}
1	+ {"version":3,"file":"EmailDisplay.js","sourceRoot":"","sources":["../../../src/components/Email/EmailDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAgB3B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,KAAK,CACrB,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,CAAC;IACF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,YAAY,WACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE,YAC7E,YAAY,WACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Link from '../Link';\n\nexport interface EmailDisplayProps extends BaseProps {\n /** Email address, no 'mailto:' scheme /\n value?: string;\n /* The text to be displayed. /\n displayText?: string;\n /\n Controls styling of the field.\n * @default \"link\"\n /\n variant?: 'link' \| 'text';\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement \| HTMLSpanElement>;\n}\n\nconst EmailDisplay: FunctionComponent<EmailDisplayProps & ForwardProps> = forwardRef(\n (\n { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<EmailDisplayProps>,\n ref: EmailDisplayProps['ref']\n ) => {\n const displayValue = value ? (\n displayText \|\| value\n ) : (\n <span aria-hidden='true'>––</span>\n );\n return variant === 'text' \|\| !value ? (\n <span ref={ref} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`mailto:${value}`}>\n {displayValue}\n </Link>\n );\n }\n);\n\nexport default EmailDisplay;\n"]}

package/lib/components/EmojiPicker/EmojiDisplay.js CHANGED Viewed

@@ -26,7 +26,7 @@ const EmojiDisplay = props => {
             msgArr = replaceMatchWithElement(content, regex, renderEmoji);
         }
     }
-    return emojiSet && msgArr.length > 1 ? (_jsx(StyledEmojiDisplay, Object.assign({}, restProps, { children: msgArr }), void 0)) : (_jsx(_Fragment, { children: content }, void 0));
+    return emojiSet && msgArr.length > 1 ? (_jsx(StyledEmojiDisplay, { ...restProps, children: msgArr }, void 0)) : (_jsx(_Fragment, { children: content }, void 0));
 };
 export default EmojiDisplay;
 //# sourceMappingURL=EmojiDisplay.js.map

package/lib/components/EmojiPicker/EmojiDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IAED,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrC,KAAC,kBAAkB,~~oBAAK~~,SAAS,~~cAAG~~,MAAM,~~YAAsB~~,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,WAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n /** Content to be displayed /\n content: ReactNode;\n /* Size of emoji */\n size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n .emoji-mart-emoji {\n line-height: 1;\n vertical-align: middle;\n }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n const { content, size = 20, ...restProps } = props;\n const regex = emojiRegex();\n let msgArr: JSX.Element[] = [];\n const { set: emojiSet } = useContext(EmojiContext);\n if (typeof content === 'string' && emojiSet) {\n const renderEmoji = (eMatch: string) => {\n const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n };\n if (content.split(regex).length > 1) {\n msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n }\n }\n\n return emojiSet && msgArr.length > 1 ? (\n <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n ) : (\n <>{content}</>\n );\n};\nexport default EmojiDisplay;\n"]}
1	+ {"version":3,"file":"EmojiDisplay.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAsB,MAAM,YAAY,CAAC;AAC/E,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAG5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKrC,CAAC;AACF,MAAM,YAAY,GAAyC,KAAK,CAAC,EAAE;IACjE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAkB,EAAE,CAAC;IAC/B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,QAAQ,EAAE;QAC3C,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAA6B,CAAC,CAAC;YAC1F,OAAO,SAAS,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC;QAC7E,CAAC,CAAC;QACF,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,GAAG,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;SAC/D;KACF;IAED,OAAO,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrC,KAAC,kBAAkB,OAAK,SAAS,YAAG,MAAM,WAAsB,CACjE,CAAC,CAAC,CAAC,CACF,4BAAG,OAAO,WAAI,CACf,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport emojiRegex from 'emoji-regex';\nimport { getEmojiDataFromNative, Emoji, Data as NativeData } from 'emoji-mart';\nimport data from 'emoji-mart/data/all.json';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { replaceMatchWithElement } from '../../utils';\n\nimport { EmojiContext } from './EmojiPicker';\n\nexport interface EmojiDisplayProps extends BaseProps, NoChildrenProp {\n /** Content to be displayed /\n content: ReactNode;\n /* Size of emoji */\n size?: number;\n}\nconst StyledEmojiDisplay = styled.span`\n .emoji-mart-emoji {\n line-height: 1;\n vertical-align: middle;\n }\n`;\nconst EmojiDisplay: FunctionComponent<EmojiDisplayProps> = props => {\n const { content, size = 20, ...restProps } = props;\n const regex = emojiRegex();\n let msgArr: JSX.Element[] = [];\n const { set: emojiSet } = useContext(EmojiContext);\n if (typeof content === 'string' && emojiSet) {\n const renderEmoji = (eMatch: string) => {\n const emojiData = getEmojiDataFromNative(eMatch, emojiSet, data as unknown as NativeData);\n return emojiData && <Emoji set={emojiSet} emoji={emojiData} size={size} />;\n };\n if (content.split(regex).length > 1) {\n msgArr = replaceMatchWithElement(content, regex, renderEmoji);\n }\n }\n\n return emojiSet && msgArr.length > 1 ? (\n <StyledEmojiDisplay {...restProps}>{msgArr}</StyledEmojiDisplay>\n ) : (\n <>{content}</>\n );\n};\nexport default EmojiDisplay;\n"]}

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

@@ -34,7 +34,7 @@ const EmojiPicker = forwardRef(({ emojiSize = 24, perLine = 9, showFooter = true
             });
         }
     }, [set, overrideData]);
-    return (data && (_jsx(StyledEmojiPicker, Object.assign({ ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` } }, { children: _jsx(NimblePicker, Object.assign({}, restProps, { set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }), void 0) }), void 0)));
+    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }, void 0) }, void 0)));
 });
 export default EmojiPicker;
 //# sourceMappingURL=EmojiPicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,~~kBAChB~~,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,~~gBAE5D~~,KAAC,YAAY,~~oBACP~~,SAAS,~~IACb~~,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,~~YAClB~~,~~YACgB~~,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n useState,\n useEffect,\n useContext,\n createContext,\n FunctionComponent,\n PropsWithoutRef,\n CSSProperties,\n Ref,\n forwardRef\n} from 'react';\nimport {\n NimblePicker,\n CategoryName,\n Data as EmojiData,\n BackgroundImageFn,\n PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' \| 'google' \| 'twitter' \| 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet \| 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n /** Individual emojis size in pixels. /\n emojiSize?: number;\n /* Number of emoji per line in a picker. /\n perLine?: number;\n /* Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). /\n exclude?: CategoryName[];\n /* Show footer for picker. /\n showFooter?: boolean;\n /* A Fn that gets called on selecting an emoji from picker. /\n onSelect?: PickerProps['onSelect'];\n /* Ref for the emoji Picker /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n /\n A Fn that returns that image sheet to use for emojis.\n * If no sprite is provided, native emoji are used.\n * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n /\n spriteSrcResolver?: BackgroundImageFn;\n /* Emoji set to be used. /\n set?: EmojiSet;\n /* Data to be used. [link](https://github.com/iamcal/emoji-data).\n * Use this in case you would like to filter out some emoji, one must change the sprite image accordingly. */\n overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n (\n {\n emojiSize = 24,\n perLine = 9,\n showFooter = true,\n exclude,\n onSelect,\n ...restProps\n }: PropsWithoutRef<EmojiPickerProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const theme = useTheme();\n const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n const [data, setData] = useState<EmojiData \| null>(null);\n\n useEffect(() => {\n const dataSet = set ?? 'all';\n\n // Unmount NimblePicker for changes to take effect\n setData(null);\n\n if (overrideData) {\n setTimeout(() => {\n setData(overrideData);\n }, 0);\n } else if (emojiDataCache.has(dataSet)) {\n setTimeout(() => {\n setData(emojiDataCache.get(dataSet) ?? null);\n }, 0);\n } else {\n import(`emoji-mart/data/${dataSet}.json`)\n .then(({ default: json }) => {\n emojiDataCache.set(dataSet, json);\n setData(emojiDataCache.get(dataSet)!);\n })\n .catch(() => {\n setData(null);\n });\n }\n }, [set, overrideData]);\n\n return (\n data && (\n <StyledEmojiPicker\n ref={ref}\n showFooter={showFooter}\n style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n >\n <NimblePicker\n {...restProps}\n set={set}\n native={!spriteSrcResolver}\n backgroundImageFn={spriteSrcResolver}\n data={data}\n emojiSize={emojiSize}\n perLine={perLine}\n exclude={exclude}\n onSelect={onSelect}\n color={theme.base.palette.interactive}\n emoji=''\n title=''\n emojiTooltip\n showSkinTones={showFooter}\n showPreview={false}\n />\n </StyledEmojiPicker>\n )\n );\n }\n);\n\nexport default EmojiPicker;\n"]}
1	+ {"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EAKb,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EAKb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAIrD,MAAM,cAAc,GAAG,IAAI,GAAG,EAA+B,CAAC;AA+B9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AACjE,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACsB,EACpC,GAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,KAAK,CAAC;QAE7B,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,YAAY,EAAE;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;YAC/C,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;aAAM;YACL,MAAM,CAAC,mBAAmB,OAAO,OAAO,CAAC;iBACtC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAClC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,CAAC;YACxC,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;SACN;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,IAAI,IAAI,CACN,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,SAAS,IAAI,EAAmB,YAE5D,KAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,iBAAiB,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACrC,KAAK,EAAC,EAAE,EACR,KAAK,EAAC,EAAE,EACR,YAAY,QACZ,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,KAAK,WAClB,WACgB,CACrB,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n useState,\n useEffect,\n useContext,\n createContext,\n FunctionComponent,\n PropsWithoutRef,\n CSSProperties,\n Ref,\n forwardRef\n} from 'react';\nimport {\n NimblePicker,\n CategoryName,\n Data as EmojiData,\n BackgroundImageFn,\n PickerProps\n} from 'emoji-mart';\n\nimport { useTheme } from '../../hooks';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nimport StyledEmojiPicker from './EmojiPicker.styles';\n\ntype EmojiSet = 'apple' \| 'google' \| 'twitter' \| 'facebook';\n\nconst emojiDataCache = new Map<EmojiSet \| 'all', EmojiData>();\n\nexport interface EmojiPickerProps extends BaseProps, NoChildrenProp {\n /** Individual emojis size in pixels. /\n emojiSize?: number;\n /* Number of emoji per line in a picker. /\n perLine?: number;\n /* Don't load excluded categories. Accepts [I18n categories keys](https://www.npmjs.com/package/emoji-mart#i18n). /\n exclude?: CategoryName[];\n /* Show footer for picker. /\n showFooter?: boolean;\n /* A Fn that gets called on selecting an emoji from picker. /\n onSelect?: PickerProps['onSelect'];\n /* Ref for the emoji Picker /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmojiContextValue {\n /\n A Fn that returns that image sheet to use for emojis.\n * If no sprite is provided, native emoji are used.\n * For the source of image please visit this [link](https://www.jsdelivr.com/package/npm/emoji-datasource?version=5.0.1&path=img)\n /\n spriteSrcResolver?: BackgroundImageFn;\n /* Emoji set to be used. /\n set?: EmojiSet;\n /* Data to be used. [link](https://github.com/iamcal/emoji-data).\n * Use this in case you would like to filter out some emoji, one must change the sprite image accordingly. */\n overrideData?: EmojiData;\n}\n\nexport const EmojiContext = createContext<EmojiContextValue>({});\nconst EmojiPicker: FunctionComponent<EmojiPickerProps> = forwardRef(\n (\n {\n emojiSize = 24,\n perLine = 9,\n showFooter = true,\n exclude,\n onSelect,\n ...restProps\n }: PropsWithoutRef<EmojiPickerProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const theme = useTheme();\n const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);\n const [data, setData] = useState<EmojiData \| null>(null);\n\n useEffect(() => {\n const dataSet = set ?? 'all';\n\n // Unmount NimblePicker for changes to take effect\n setData(null);\n\n if (overrideData) {\n setTimeout(() => {\n setData(overrideData);\n }, 0);\n } else if (emojiDataCache.has(dataSet)) {\n setTimeout(() => {\n setData(emojiDataCache.get(dataSet) ?? null);\n }, 0);\n } else {\n import(`emoji-mart/data/${dataSet}.json`)\n .then(({ default: json }) => {\n emojiDataCache.set(dataSet, json);\n setData(emojiDataCache.get(dataSet)!);\n })\n .catch(() => {\n setData(null);\n });\n }\n }, [set, overrideData]);\n\n return (\n data && (\n <StyledEmojiPicker\n ref={ref}\n showFooter={showFooter}\n style={{ '--emoji-size': `${emojiSize}px` } as CSSProperties}\n >\n <NimblePicker\n {...restProps}\n set={set}\n native={!spriteSrcResolver}\n backgroundImageFn={spriteSrcResolver}\n data={data}\n emojiSize={emojiSize}\n perLine={perLine}\n exclude={exclude}\n onSelect={onSelect}\n color={theme.base.palette.interactive}\n emoji=''\n title=''\n emojiTooltip\n showSkinTones={showFooter}\n showPreview={false}\n />\n </StyledEmojiPicker>\n )\n );\n }\n);\n\nexport default EmojiPicker;\n"]}

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

@@ -27,7 +27,7 @@ StyledEmptyState.defaultProps = defaultThemeProp;
 const EmptyState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('no_items'), ...restProps } = props;
-    return (_jsxs(Flex, Object.assign({}, restProps, { as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 } }, { children: [_jsx(Icon, { name: 'galaxy' }, void 0), _jsx(Text, Object.assign({ variant: 'secondary' }, { children: message }), void 0)] }), void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'galaxy' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0)] }, void 0));
 });
 export default EmptyState;
 //# sourceMappingURL=EmptyState.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,~~oBACC~~,SAAS,~~IACb~~,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,~~iBAEnF~~,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,EACtB,KAAC,IAAI,~~kBAAC~~,OAAO,EAAC,WAAW,~~gBAAE~~,OAAO,~~YAAQ~~,~~aACrC~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n /*\n Message to display below the icon.\n * @default 'No items'\n */\n message?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n return css`\n height: 100%;\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${color};\n }\n `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n const t = useI18n();\n const { message = t('no_items'), ...restProps } = props;\n\n return (\n <Flex\n {...restProps}\n as={StyledEmptyState}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon name='galaxy' />\n <Text variant='secondary'>{message}</Text>\n </Flex>\n );\n }\n);\n\nexport default EmptyState;\n"]}
1	+ {"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AAWzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,EACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,YACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n /*\n Message to display below the icon.\n * @default 'No items'\n */\n message?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n return css`\n height: 100%;\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${color};\n }\n `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) => {\n const t = useI18n();\n const { message = t('no_items'), ...restProps } = props;\n\n return (\n <Flex\n {...restProps}\n as={StyledEmptyState}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon name='galaxy' />\n <Text variant='secondary'>{message}</Text>\n </Flex>\n );\n }\n);\n\nexport default EmptyState;\n"]}

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

@@ -25,7 +25,7 @@ StyledErrorState.defaultProps = defaultThemeProp;
 const ErrorState = forwardRef((props, ref) => {
     const t = useI18n();
     const { message = t('unknown_error'), onRetry, ...restProps } = props;
-    return (_jsxs(Flex, Object.assign({}, restProps, { as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 } }, { children: [_jsx(Icon, { name: 'warn' }, void 0), _jsx(Text, Object.assign({ variant: 'secondary' }, { children: message }), void 0), onRetry && (_jsx(Button, Object.assign({ variant: 'secondary', onClick: onRetry }, { children: t('try_again') }), void 0))] }), void 0));
+    return (_jsxs(Flex, { ...restProps, as: StyledErrorState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'warn' }, void 0), _jsx(Text, { variant: 'secondary', children: message }, void 0), onRetry && (_jsx(Button, { variant: 'secondary', onClick: onRetry, children: t('try_again') }, void 0))] }, void 0));
 });
 export default ErrorState;
 //# sourceMappingURL=ErrorState.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,~~oBACC~~,SAAS,~~IACb~~,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,~~iBAEnF~~,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,EACpB,KAAC,IAAI,~~kBAAC~~,OAAO,EAAC,WAAW,~~gBAAE~~,OAAO,~~YAAQ~~,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,~~kBAAC~~,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,~~gBACzC~~,CAAC,CAAC,WAAW,CAAC,~~YACR~~,CACV,~~aACI~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n /*\n Message to display below the icon.\n * @default 'Unknown error'\n /\n message?: string;\n /* Callback function that if provided renders a localized Retry button. */\n onRetry?: () => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n return css`\n height: 100%;\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${theme.base.palette.urgent};\n }\n `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n const t = useI18n();\n const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n return (\n <Flex\n {...restProps}\n as={StyledErrorState}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon name='warn' />\n <Text variant='secondary'>{message}</Text>\n {onRetry && (\n <Button variant='secondary' onClick={onRetry}>\n {t('try_again')}\n </Button>\n )}\n </Flex>\n );\n }\n);\n\nexport default ErrorState;\n"]}
1	+ {"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,WAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,WACR,CACV,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n /*\n Message to display below the icon.\n * @default 'Unknown error'\n /\n message?: string;\n /* Callback function that if provided renders a localized Retry button. */\n onRetry?: () => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n return css`\n height: 100%;\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${theme.base.palette.urgent};\n }\n `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) => {\n const t = useI18n();\n const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n return (\n <Flex\n {...restProps}\n as={StyledErrorState}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon name='warn' />\n <Text variant='secondary'>{message}</Text>\n {onRetry && (\n <Button variant='secondary' onClick={onRetry}>\n {t('try_again')}\n </Button>\n )}\n </Flex>\n );\n }\n);\n\nexport default ErrorState;\n"]}

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

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, Object.assign({ ref: ref, onTransitionEnd: onTransitionEnd }, restProps, { style: style }, { children: children }), void 0));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }, void 0));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}
1	+ {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}

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

@@ -64,14 +64,14 @@ export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size':
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
 const FieldGroupLegend = ({ children, open, actions, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, Object.assign({ open: open }, restProps, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [children, actions && _jsx(Actions, { items: actions }, void 0)] }), void 0) }), void 0));
+    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [children, actions && _jsx(Actions, { items: actions }, void 0)] }, void 0) }, void 0));
 };
 const FieldGroup = forwardRef(({ children, name, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
-    return (_jsxs(StyledFieldGroup, Object.assign({ "aria-label": name }, restProps, { ref: ref }, { children: [name && (_jsx(FieldGroupLegend, Object.assign({ open: open, actions: actions }, { children: collapsible ? (_jsx(Button, Object.assign({ type: 'button', variant: 'text', onClick: () => {
+    return (_jsxs(StyledFieldGroup, { "aria-label": name, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
                         setOpen(cur => !cur);
-                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]) }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span' }, { children: [_jsx(Icon, { name: 'caret-right' }, void 0), _jsx("span", { children: name }, void 0)] }), void 0) }), void 0)) : (_jsx("span", { children: name }, void 0)) }), void 0)), collapsible ? _jsx(ExpandCollapse, Object.assign({ collapsed: !open }, { children: children }), void 0) : children] }), void 0));
+                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }, void 0), _jsx("span", { children: name }, void 0)] }, void 0) }, void 0)) : (_jsx("span", { children: name }, void 0)) }, void 0)), collapsible ? _jsx(ExpandCollapse, { collapsed: !open, children: children }, void 0) : children] }, void 0));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAsD,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,OAAyB,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAE3D,YAAY,CAAC,cAAc,CAAC,CAAC;AA6B7B,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACjD,CAAC,EACC,IAAI,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC7B,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGL,IAAI;IACN,GAAG,CAAA;0BACmB,OAAO;KAC5B;mCAC8B,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;aAE9D,UAAU;8BACO,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;mCAGnC,UAAU;;;oCAGT,UAAU;;;GAG3C,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;QAGN,sBAAsB,IAAI,YAAY;;;;UAIpC,sBAAsB;qBACX,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;YAGjC,sBAAsB;qBACb,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;cAG/B,sBAAsB;qBACf,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;gBAG7B,sBAAsB;qBACjB,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,gBAAgB,GAA6C,CAAC,EAClE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,sBAAsB,~~kBAAC~~,IAAI,EAAE,IAAI,~~IAAM~~,SAAS,~~cAC~~/C,MAAC,IAAI,~~kBAAC~~,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,~~iBAC1D~~,QAAQ,EACR,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,WAAI,~~aAClC~~,~~YACgB~~,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,gBAAgB,GAAG,KAAK,EACxB,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,gBAAgB,~~gCAAa~~,IAAI,~~IAAM~~,SAAS,~~IAAE~~,GAAG,EAAE,GAAG,~~iBACxD~~,IAAI,IAAI,CACP,KAAC,gBAAgB,~~kBAAC~~,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,~~gBAC3C~~,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,MAAM,~~kBACL~~,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,mBACc,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC1B,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,~~gBAE7D~~,MAAC,IAAI,~~kBACH~~,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC/D,WAAW,EAAC,MAAM,~~iBAElB~~,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,EAC3B,yBAAO,IAAI,WAAQ,~~aACd~~,~~YACA~~,CACV,CAAC,CAAC,CAAC,CACF,yBAAO,IAAI,WAAQ,CACpB,~~YACgB~~,CACpB,EACA,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,~~kBAAC~~,SAAS,EAAE,CAAC,IAAI,~~gBAAG~~,QAAQ,~~YAAkB~~,CAAC,CAAC,CAAC,QAAQ,~~aACtE~~,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: { spacing, animation }\n }\n }) => css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: ${spacing};\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(0);\n }\n `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n\n return (\n <StyledFieldGroup aria-label={name} {...restProps} ref={ref}>\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? <ExpandCollapse collapsed={!open}>{children}</ExpandCollapse> : children}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: { spacing, animation }\n }\n }) => css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: ${spacing};\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(0);\n }\n `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n\n return (\n <StyledFieldGroup aria-label={name} {...restProps} ref={ref}>\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? <ExpandCollapse collapsed={!open}>{children}</ExpandCollapse> : children}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.js CHANGED Viewed

@@ -32,8 +32,8 @@ const StyledAddButton = styled(Button)(({ theme }) => css `
 StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledFieldGroupList, Object.assign({ ref: ref }, restProps, { children: [items.map(({ id, children, name, ...restItemProps }) => {
-                return (_jsx(StyledListItem, Object.assign({ name: name }, restItemProps, { actions: [
+    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
+                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: [
                         {
                             text: 'Delete',
                             icon: 'trash',
@@ -44,8 +44,8 @@ const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref
                                 }
                                 : undefined
                         }
-                    ] }, { children: children }), id));
-            }), _jsxs(StyledAddButton, Object.assign({ variant: 'link', onClick: onAdd }, { children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }), void 0)] }), void 0));
+                    ], children: children }, id));
+            }), _jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }, void 0)] }, void 0));
 });
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.js.map

package/lib/components/FieldGroup/FieldGroupList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,GAAG,CAAC;AAEhD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;kBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE/B,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,~~kBAAC~~,GAAG,EAAE,GAAG,~~IAAM~~,SAAS,~~eAC1C~~,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,~~kBAEb~~,IAAI,EAAE,IAAI,~~IACN~~,aAAa,~~IACjB~~,OAAO,EAAE;wBACP;4BACE,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,IAAI;4BACd,OAAO,EAAE,QAAQ;gCACf,CAAC,CAAC,GAAG,EAAE;oCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;gCACf,CAAC;gCACH,CAAC,CAAC,SAAS;yBACd;qBACF,~~gBAEA~~,QAAQ,~~KAhBJ~~,EAAE,CAiBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACF,MAAC,eAAe,~~kBAAC~~,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,~~iBAC5C~~,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,OAAE,CAAC,CAAC,KAAK,CAAC,~~aACd~~,~~aACG~~,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps } from '.';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n /** The ID of the field group list item /\n id: string;\n}\n\nexport interface FieldGroupListProps {\n items: FieldGroupListItemProps[];\n onAdd?: () => void;\n onDelete?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0 calc(2 ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n margin-bottom: calc(2 * ${theme.base.spacing});\n\n legend {\n margin-bottom: -${theme.base.spacing};\n }\n\n & > * {\n margin: ${theme.base.spacing} 0;\n }\n `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n (\n { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n ref: FieldGroupListProps['ref']\n ) => {\n const t = useI18n();\n\n return (\n <StyledFieldGroupList ref={ref} {...restProps}>\n {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n return (\n <StyledListItem\n key={id}\n name={name}\n {...restItemProps}\n actions={[\n {\n text: 'Delete',\n icon: 'trash',\n iconOnly: true,\n onClick: onDelete\n ? () => {\n onDelete(id);\n }\n : undefined\n }\n ]}\n >\n {children}\n </StyledListItem>\n );\n })}\n <StyledAddButton variant='link' onClick={onAdd}>\n <Icon name='plus' /> {t('add')}\n </StyledAddButton>\n </StyledFieldGroupList>\n );\n }\n);\n\nexport default FieldGroupList;\n"]}
1	+ {"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,GAAG,CAAC;AAEhD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;kBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE/B,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,KACN,aAAa,EACjB,OAAO,EAAE;wBACP;4BACE,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,IAAI;4BACd,OAAO,EAAE,QAAQ;gCACf,CAAC,CAAC,GAAG,EAAE;oCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;gCACf,CAAC;gCACH,CAAC,CAAC,SAAS;yBACd;qBACF,YAEA,QAAQ,IAhBJ,EAAE,CAiBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACF,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,OAAE,CAAC,CAAC,KAAK,CAAC,YACd,YACG,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps } from '.';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n /** The ID of the field group list item /\n id: string;\n}\n\nexport interface FieldGroupListProps {\n items: FieldGroupListItemProps[];\n onAdd?: () => void;\n onDelete?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0 calc(2 ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n margin-bottom: calc(2 * ${theme.base.spacing});\n\n legend {\n margin-bottom: -${theme.base.spacing};\n }\n\n & > * {\n margin: ${theme.base.spacing} 0;\n }\n `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n (\n { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n ref: FieldGroupListProps['ref']\n ) => {\n const t = useI18n();\n\n return (\n <StyledFieldGroupList ref={ref} {...restProps}>\n {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n return (\n <StyledListItem\n key={id}\n name={name}\n {...restItemProps}\n actions={[\n {\n text: 'Delete',\n icon: 'trash',\n iconOnly: true,\n onClick: onDelete\n ? () => {\n onDelete(id);\n }\n : undefined\n }\n ]}\n >\n {children}\n </StyledListItem>\n );\n })}\n <StyledAddButton variant='link' onClick={onAdd}>\n <Icon name='plus' /> {t('add')}\n </StyledAddButton>\n </StyledFieldGroupList>\n );\n }\n);\n\nexport default FieldGroupList;\n"]}

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

@@ -45,18 +45,18 @@ const DynamicHeightValue = ({ children }) => {
             observer.disconnect();
         };
     }, [textRef.current, maxTextHeight]);
-    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, Object.assign({ collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content' }, { children: _jsx(Grid, Object.assign({ ref: textRef }, { children: _jsx("span", { children: children }, void 0) }), void 0) }), void 0), exceedsMaxHeight && (_jsx(Button, Object.assign({ variant: 'link', onClick: () => setCollapsed(current => !current) }, { children: collapsed ? t('show_more') : t('show_less') }), void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx(Grid, { ref: textRef, children: _jsx("span", { children: children }, void 0) }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }, void 0))] }, void 0));
 };
 const FieldValueList = ({ fields, variant = 'inline', ...restProps }) => {
     const Wrapper = variant === 'inline' ? Fragment : 'div';
-    return (_jsx(Grid, Object.assign({}, restProps, { container: {
+    return (_jsx(Grid, { ...restProps, container: {
             cols: variant === 'inline' ? '16ch auto' : 'minmax(0, 1fr)',
             colGap: 2,
             rowGap: 1
-        }, as: StyledFieldValueList }, { children: fields.map(({ id, name, value }) => {
+        }, as: StyledFieldValueList, children: fields.map(({ id, name, value }) => {
             const diplayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }, void 0) : value;
-            return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, Object.assign({ as: StyledFieldName }, { children: name }), void 0), _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0) }, void 0)] }, id ?? name));
-        }) }), void 0));
+            return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }, void 0), _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0)] }, id ?? name));
+        }) }, void 0));
 };
 export default FieldValueList;
 //# sourceMappingURL=FieldValueList.js.map