npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.7.0 → 4.0.0-dev.8.0 - Mend

@pega/cosmos-react-core 4.0.0-dev.7.0 → 4.0.0-dev.8.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 (98) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n useRef,\n ReactElement,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp, OmitStrict } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n title: string;\n icon?: string;\n actions?: ReactNode;\n banners?: ReactNode;\n path?: BreadcrumbsProps['path'];\n header?: ReactNode;\n scrollContent?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageTab extends Tab {\n content: ReactNode;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n tabs: OmitStrict<TabsProps, 'tabs' \| 'currentTabId'> & {\n tabs: TabbedPageTab[];\n defaultTabId?: string;\n };\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n tabs?: ReactElement<typeof Tabs>;\n regions: ReactNode[];\n regionsRef?: Ref<HTMLDivElement>;\n cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n const bgColor = theme.base.palette['brand-primary'];\n const color = tryCatch(() => readableColor(bgColor));\n return css`\n height: calc(4 * ${theme.base.spacing});\n width: calc(4 * ${theme.base.spacing});\n background: ${bgColor};\n color: ${color};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n return css`\n ${StyledBreadcrumbs} {\n margin-block-end: ${theme.base.spacing};\n }\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div``;\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n flex-grow: 1;\n max-width: 100%;\n\n ${pad &&\n css`\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n `}\n `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n return css`\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n scrollContent: PageLayoutProps['scrollContent'];\n minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n return css`\n --content-height-in-view: ${emptyContentHeight};\n position: relative;\n min-height: inherit;\n background-color: ${theme.base.palette['app-background']};\n\n ${scrollContent &&\n css`\n ${StyledContent} {\n position: relative;\n }\n\n ${StyledRegions} {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: auto;\n }\n `}\n `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n title,\n icon,\n path,\n actions,\n banners,\n tabs,\n as,\n header,\n regionsRef,\n scrollContent = false,\n ...restProps\n }: PropsWithoutRef<PageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const [contentEl, setContentEl] = useElement<HTMLElement>();\n const isMediumOrAbove = useBreakpoint('md');\n const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n const { headerEl } = useContext(AppShellContext);\n\n const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n const renderSingleRegion = regions?.length === 1;\n\n const [minContentHeight, setMinContentHeight] = useState<number \| undefined>();\n\n useEffect(() => {\n if (consolidatedRegionRef && consolidatedRegionRef.current) {\n const refElement = consolidatedRegionRef.current;\n const regionsPaddingBottomPixels = Number.parseInt(\n window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n 10\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const headerOffset = headerEl?.offsetHeight ?? 0;\n const emptyHeight =\n document.documentElement.offsetHeight -\n (headerOffset + refElement?.offsetTop) -\n regionsPaddingBottomPixels;\n\n setMinContentHeight(emptyHeight);\n });\n\n resizeObserver.observe(refElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [consolidatedRegionRef, headerEl]);\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n alignItems: 'stretch',\n gap: 2\n }}\n scrollContent={scrollContent}\n as={StyledPageLayout}\n forwardedAs={as}\n ref={ref}\n minContentHeight={minContentHeight}\n >\n <Flex\n container={{ direction: 'column', pad: [2, 2, 0] }}\n item={{ grow: 0, shrink: 0 }}\n as={StyledPageHeader}\n >\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n {header \|\| (\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n )}\n\n {banners}\n {tabs}\n </Flex>\n\n <Flex\n container\n item={{ grow: 1 }}\n as={StyledContent}\n ref={scrollContent ? setContentEl : undefined}\n >\n {renderSingleRegion && (\n <StyledRegions ref={consolidatedRegionRef} pad>\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[0] = el;\n }\n }}\n >\n {regions[0]}\n </Flex>\n </StyledRegions>\n )}\n\n {!renderSingleRegion && (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2,\n pad: [0, 2, 2]\n }}\n md={{ container: { cols } }}\n as={StyledRegions}\n ref={consolidatedRegionRef}\n >\n {regions.map((colItems, i) => {\n return (\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[i] = el;\n }\n }}\n >\n {colItems}\n </Flex>\n );\n })}\n </Grid>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n const [tabId, setTabId] = useState(tabs.defaultTabId \|\| tabs.tabs[0]?.id);\n\n const tabPanels = tabs.tabs.map(tab => {\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n as={TabPanel}\n tabId={tab.id}\n currentTabId={tabId}\n key={tab.id}\n >\n {tab.content}\n </Flex>\n );\n });\n\n return (\n <PageLayout\n {...restProps}\n tabs={\n <Tabs\n {...tabs}\n onTabClick={(id, e) => {\n setTabId(id);\n tabs.onTabClick?.(id, e);\n }}\n currentTabId={tabId}\n />\n }\n regions={[<>{tabPanels}</>]}\n ref={ref}\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c, d]}\n ref={ref}\n {...restProps}\n cols='repeat(4, minmax(0, 1fr))'\n />\n );\n }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n );\n }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n );\n }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n />\n );\n }\n );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n />\n );\n }\n );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n />\n );\n }\n );\n"]}
1	+ {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n useRef,\n ReactElement,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp, OmitStrict } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport {\n useBreakpoint,\n useElement,\n useScrollStick,\n useConsolidatedRef,\n useConfiguration\n} from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n title: string;\n icon?: string;\n actions?: ReactNode;\n banners?: ReactNode;\n path?: BreadcrumbsProps['path'];\n header?: ReactNode;\n scrollContent?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageTab extends Tab {\n content: ReactNode;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n tabs: OmitStrict<TabsProps, 'tabs' \| 'currentTabId'> & {\n tabs: TabbedPageTab[];\n defaultTabId?: string;\n };\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n tabs?: ReactElement<typeof Tabs>;\n regions: ReactNode[];\n regionsRef?: Ref<HTMLDivElement>;\n cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n const bgColor = theme.base.palette['brand-primary'];\n const color = tryCatch(() => readableColor(bgColor));\n return css`\n height: calc(4 * ${theme.base.spacing});\n width: calc(4 * ${theme.base.spacing});\n background: ${bgColor};\n color: ${color};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n return css`\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledBreadcrumbs} {\n margin-block-end: ${theme.base.spacing};\n }\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div``;\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n flex-grow: 1;\n max-width: 100%;\n\n ${pad &&\n css`\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n `}\n `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n return css`\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n scrollContent: PageLayoutProps['scrollContent'];\n minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n return css`\n --content-height-in-view: ${emptyContentHeight};\n position: relative;\n min-height: inherit;\n background-color: ${theme.base.palette['app-background']};\n\n ${scrollContent &&\n css`\n ${StyledContent} {\n position: relative;\n }\n\n ${StyledRegions} {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: auto;\n }\n `}\n `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n title,\n icon,\n path,\n actions,\n banners,\n tabs,\n as,\n header,\n regionsRef,\n scrollContent = false,\n ...restProps\n }: PropsWithoutRef<PageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const pageRef = useConsolidatedRef(ref);\n const [contentEl, setContentEl] = useElement<HTMLElement>();\n const isMediumOrAbove = useBreakpoint('md');\n const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n const { headerEl } = useContext(AppShellContext);\n const { loadedRef } = useConfiguration();\n\n const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n const renderSingleRegion = regions?.length === 1;\n\n const [minContentHeight, setMinContentHeight] = useState<number \| undefined>();\n\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n useEffect(() => {\n if (consolidatedRegionRef && consolidatedRegionRef.current) {\n const refElement = consolidatedRegionRef.current;\n const regionsPaddingBottomPixels = Number.parseInt(\n window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n 10\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const headerOffset = headerEl?.offsetHeight ?? 0;\n const emptyHeight =\n document.documentElement.offsetHeight -\n (headerOffset + refElement?.offsetTop) -\n regionsPaddingBottomPixels;\n\n setMinContentHeight(emptyHeight);\n });\n\n resizeObserver.observe(refElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [consolidatedRegionRef, headerEl]);\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n alignItems: 'stretch',\n gap: 2\n }}\n scrollContent={scrollContent}\n as={StyledPageLayout}\n forwardedAs={as}\n ref={pageRef}\n minContentHeight={minContentHeight}\n >\n <Flex\n container={{ direction: 'column', pad: [2, 2, 0] }}\n item={{ grow: 0, shrink: 0 }}\n as={StyledPageHeader}\n >\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n {header \|\| (\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n )}\n\n {banners}\n {tabs}\n </Flex>\n\n <Flex\n container\n item={{ grow: 1 }}\n as={StyledContent}\n ref={scrollContent ? setContentEl : undefined}\n >\n {renderSingleRegion && (\n <StyledRegions ref={consolidatedRegionRef} pad>\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[0] = el;\n }\n }}\n >\n {regions[0]}\n </Flex>\n </StyledRegions>\n )}\n\n {!renderSingleRegion && (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2,\n pad: [0, 2, 2]\n }}\n md={{ container: { cols } }}\n as={StyledRegions}\n ref={consolidatedRegionRef}\n >\n {regions.map((colItems, i) => {\n return (\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[i] = el;\n }\n }}\n >\n {colItems}\n </Flex>\n );\n })}\n </Grid>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n const [tabId, setTabId] = useState(tabs.defaultTabId \|\| tabs.tabs[0]?.id);\n\n const tabPanels = tabs.tabs.map(tab => {\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n as={TabPanel}\n tabId={tab.id}\n currentTabId={tabId}\n key={tab.id}\n >\n {tab.content}\n </Flex>\n );\n });\n\n return (\n <PageLayout\n {...restProps}\n tabs={\n <Tabs\n {...tabs}\n onTabClick={(id, e) => {\n setTabId(id);\n tabs.onTabClick?.(id, e);\n }}\n currentTabId={tabId}\n />\n }\n regions={[<>{tabPanels}</>]}\n ref={ref}\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c, d]}\n ref={ref}\n {...restProps}\n cols='repeat(4, minmax(0, 1fr))'\n />\n );\n }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n );\n }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n );\n }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n />\n );\n }\n );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n />\n );\n }\n );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n />\n );\n }\n );\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAGL~~,EAAE,~~EAKH~~,MAAM,OAAO,CAAC;~~AAGf~~,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;~~AAMjD~~,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CAyI9C~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA+K9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Backdrop from '../Backdrop';
 import Text from '../Text';
@@ -9,81 +9,112 @@ import Bar from './Bar';
 import Ellipsis from './Ellipsis';
 import Ring from './Ring';
 import { StyledMessage, StyledProgress } from './Progress.styles';
-const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible = true, onTransitionEndIn, onTransitionEndOut, value, message, handle, liveConfig, ...restProps }, ref) => {
+const variantMap = {
+    ring: Ring,
+    bar: Bar,
+    ellipsis: Ellipsis
+};
+const delayDuration = 100;
+const minVisibleDuration = 1000;
+const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible: visibleProp = true, focusOnVisible = false, delay = false, onTransitionEndIn, onTransitionEndOut, value, message, liveConfig, ...restProps }, ref) => {
     const t = useI18n();
-    const [isVisible, setIsVisible] = useState(visible);
-    const [isNull, setIsNull] = useState(!visible);
     const { portalTarget } = useConfiguration();
     const { announcePolite } = useLiveLog();
     const progressEl = useConsolidatedRef(ref);
-    const showTime = useRef();
-    const showTimeout = useRef();
-    const hideTimeout = useRef();
-    let Comp = Ring;
-    if (variant === 'bar')
-        Comp = Bar;
-    else if (variant === 'ellipsis')
-        Comp = Ellipsis;
+    // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.
+    const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);
+    const [nullRender, setNullRender] = useState(!isVisibleState);
+    // Refs for timestamps and timeout ids.
+    const timeBeforeVisibleRender = useRef();
+    const timeAfterVisibleRender = useRef();
+    const delayTimer = useRef();
+    const minVisibleTimer = useRef();
+    const hasBackdrop = placement === 'global' || placement === 'local';
     const valString = typeof value === 'number' ? `${value}%` : undefined;
     const label = message && valString ? `${message} - ${valString}` : message || valString;
-    const onBackdropTransitionEnd = () => {
-        setIsNull(true);
-        onTransitionEndOut?.();
+    const renderVisible = () => {
+        setIsVisibleState(true);
+        setNullRender(false);
     };
-    useImperativeHandle(handle, () => ({
-        focus: () => {
-            progressEl.current?.focus();
+    const renderNotVisible = () => {
+        setIsVisibleState(false);
+        // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.
+        if (!hasBackdrop) {
+            setNullRender(true);
         }
-    }));
+    };
+    // Handle render and visible state.
+    useEffect(() => {
+        if (visibleProp) {
+            // Capture a timestamp for additional timers.
+            timeBeforeVisibleRender.current = Date.now();
+            if (delay) {
+                delayTimer.current = window.setTimeout(renderVisible, delayDuration);
+            }
+            else {
+                renderVisible();
+            }
+        }
+        else if (
+        // A timer was started to render visible either avoid it or render null.
+        delayTimer.current !== undefined) {
+            // If a timeout has started to render visible, clear it.
+            clearTimeout(delayTimer.current);
+            // If the indicator has already rendered visible.
+            if (timeAfterVisibleRender.current !== undefined) {
+                const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;
+                // If the indicator has been visible for long enough we can remove it.
+                if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {
+                    renderNotVisible();
+                }
+                else {
+                    // Hold off removing until we hit the minimum visible time.
+                    minVisibleTimer.current = window.setTimeout(renderNotVisible, minVisibleDuration - timeElapsedSinceLastVisibleRender);
+                }
+            }
+            else {
+                renderNotVisible();
+            }
+        }
+        else {
+            renderNotVisible();
+        }
+    },
+    // visibleProp is the only triggerable dependency. Others values will be captured.
+    [visibleProp]);
     // Live announcement
     useEffect(() => {
-        if (liveConfig?.contextualLabel && isVisible) {
+        if (liveConfig?.contextualLabel && isVisibleState) {
             announcePolite({
                 message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,
                 type: 'status'
             });
         }
-    }, [isVisible, label, liveConfig?.contextualLabel]);
-    // Manage show / hide
+    },
+    // isVisibleState is the only triggerable dependency. Others values will be captured.
+    [isVisibleState]);
+    // Auto focusing and render timestamping.
     useEffect(() => {
-        if (visible) {
-            clearTimeout(hideTimeout.current);
-            showTime.current = Date.now();
-            showTimeout.current = window.setTimeout(() => {
-                setIsVisible(true);
-                setIsNull(false);
-            }, 100);
+        if (!nullRender && isVisibleState) {
+            // After a visible render set a timestamp for timers above.
+            timeAfterVisibleRender.current = Date.now();
+            if (focusOnVisible)
+                progressEl.current?.focus();
         }
-        else {
-            clearTimeout(showTimeout.current);
-            if (typeof showTime.current === 'number') {
-                const minimumDuration = 1000;
-                const timeElapsed = Date.now() - showTime.current;
-                if (timeElapsed > minimumDuration)
-                    setIsVisible(false);
-                else {
-                    hideTimeout.current = window.setTimeout(() => {
-                        setIsVisible(false);
-                    }, minimumDuration - timeElapsed);
-                }
-            }
-            else
-                setIsVisible(false);
-        }
-    }, [visible]);
-    useEffect(() => {
-        return () => {
-            clearTimeout(showTimeout.current);
-            clearTimeout(hideTimeout.current);
-        };
-    }, []);
-    if (isNull)
+    },
+    // nullRender is the only triggerable dependency. Others values will be captured.
+    [nullRender]);
+    if (nullRender)
         return null;
-    let indicator = (_jsx(Comp, { "aria-label": typeof value !== 'number' ? label : t('loading'), ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
+    const CompVariant = variantMap[variant];
+    let indicator = (_jsx(CompVariant, { "aria-label": typeof value !== 'number' ? label : t('loading'), ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
     if (placement !== 'inline') {
         indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": 'true', children: message }))] }));
     }
-    const content = placement === 'block' || placement === 'inline' ? (indicator) : (_jsx(Backdrop, { open: isVisible, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: onBackdropTransitionEnd, children: indicator }));
+    const content = hasBackdrop ? (_jsx(Backdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: () => {
+            setNullRender(true);
+            onTransitionEndOut?.();
+        }, children: indicator })) : (indicator);
     return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;
 });
 export default Progress;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n FC,\n useState,\n useEffect,\n useImperativeHandle,\n useRef\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress } from './Progress.styles';\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'ring',\n placement = 'global',\n visible = true,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n handle,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n ) => {\n const t = useI18n();\n const [isVisible, setIsVisible] = useState(visible);\n const [isNull, setIsNull] = useState(!visible);\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n const showTime = useRef<number>();\n const showTimeout = useRef<number>();\n const hideTimeout = useRef<number>();\n\n let Comp = Ring;\n if (variant === 'bar') Comp = Bar;\n else if (variant === 'ellipsis') Comp = Ellipsis;\n\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message \|\| valString;\n\n const onBackdropTransitionEnd = () => {\n setIsNull(true);\n onTransitionEndOut?.();\n };\n\n useImperativeHandle(handle, () => ({\n focus: () => {\n progressEl.current?.focus();\n }\n }));\n\n // Live announcement\n useEffect(() => {\n if (liveConfig?.contextualLabel && isVisible) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n }, [isVisible, label, liveConfig?.contextualLabel]);\n\n // Manage show / hide\n useEffect(() => {\n if (visible) {\n clearTimeout(hideTimeout.current);\n showTime.current = Date.now();\n showTimeout.current = window.setTimeout(() => {\n setIsVisible(true);\n setIsNull(false);\n }, 100);\n } else {\n clearTimeout(showTimeout.current);\n\n if (typeof showTime.current === 'number') {\n const minimumDuration = 1000;\n const timeElapsed = Date.now() - showTime.current;\n\n if (timeElapsed > minimumDuration) setIsVisible(false);\n else {\n hideTimeout.current = window.setTimeout(() => {\n setIsVisible(false);\n }, minimumDuration - timeElapsed);\n }\n } else setIsVisible(false);\n }\n }, [visible]);\n\n useEffect(() => {\n return () => {\n clearTimeout(showTimeout.current);\n clearTimeout(hideTimeout.current);\n };\n }, []);\n\n if (isNull) return null;\n\n let indicator = (\n <Comp\n aria-label={typeof value !== 'number' ? label : t('loading')}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content =\n placement === 'block' \|\| placement === 'inline' ? (\n indicator\n ) : (\n <Backdrop\n open={isVisible}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.5}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={onBackdropTransitionEnd}\n >\n {indicator}\n </Backdrop>\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Progress;\n"]}
1	+ {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Backdrop from '../Backdrop';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n ) => {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' \|\| placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message \|\| valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' ? label : t('loading')}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content = hasBackdrop ? (\n <Backdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.5}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </Backdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Progress;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAcjD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAmDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,~~uIAuEjC~~,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,+NAc1B,CAAC"}
1	+ {"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAcjD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAmDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAsEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,+NAc1B,CAAC"}

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

@@ -146,7 +146,6 @@ export const StyledProgressEllipsis = styled(StyledProgressVisual)(({ theme, pla
       ${placement === 'inline' &&
         css `
         display: inline-flex;
-        margin-inline-start: 0.1875rem;
       `}
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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~~;;;OAGF~~;;;;;oBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;4CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;QAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;QAEC,CAAC,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,CAAC;QAClD,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;;uCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;OAC1D;;;;;;;2BAOoB,MAAM,GAAG,CAAC;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,CACT,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAa,CAAC;mBACvD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;aAC5C,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACxC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;QACN,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;OAEF;;QAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;iCACwB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC5C;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n return css`\n &:focus-visible {\n box-shadow: ${theme.components.button['focus-shadow']};\n outline: none;\n border-radius: calc(9999 * ${theme.base['border-radius']});\n }\n `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n const size = placement === 'inline' ? '1em' : '2rem';\n\n return css`\n @keyframes LoadingRing {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n position: relative;\n\n svg {\n display: block;\n width: ${size};\n height: ${size};\n\n circle {\n fill: transparent;\n stroke: ${theme.base.colors.gray['extra-light']};\n stroke-width: 2;\n r: 45%;\n cx: 50%;\n cy: 50%;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n\n &:nth-child(2) {\n stroke: ${theme.components.progress['progress-color']};\n transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n\n ${!determinate &&\n css`\n animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n `}\n }\n }\n }\n\n ${placement === 'inline' &&\n css`\n display: inline-flex;\n vertical-align: top;\n `}\n `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n return css`\n background-color: ${theme.base.colors.gray['extra-light']};\n border-radius: ${theme.base['border-radius']};\n width: calc(100% - ${placement === 'local' ? css`4 * ${theme.base.spacing}` : '0rem'});\n height: 0.375rem;\n min-width: 2rem;\n max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n overflow: hidden;\n\n @keyframes LoadingBar {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(200%);\n }\n }\n\n ::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n left: 0;\n border-radius: ${theme.base['border-radius']};\n background-color: ${theme.components.progress['progress-color']};\n ${determinate &&\n css`\n transform: translateX(var(--progress, 0));\n transform-origin: 0 50%;\n transition: transform calc(0.5 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n `}\n\n ${!determinate &&\n css`\n animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n width: 50%;\n `}\n }\n\n ${placement === 'inline' &&\n css`\n width: 3rem;\n display: inline-block;\n position: relative;\n `}\n `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n return css`\n line-height: 1;\n display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n @keyframes LoadingEllipsis {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n }\n\n > span {\n display: flex;\n justify-content: center;\n mix-blend-mode: multiply;\n\n ${placement === 'inline' &&\n css`\n display: inline-flex;\n ~~margin-inline-start: 0.1875rem;\n~~ `}\n }\n\n > span span {\n margin: 0 0.3125rem;\n background: ${theme.components.progress['progress-color']};\n border-radius: 50%;\n animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n ${placement === 'global' &&\n css`\n width: 1.25rem;\n height: 1.25rem;\n `}\n\n ${(placement === 'local' \|\| placement === 'block') &&\n css`\n width: 0.625rem;\n height: 0.625rem;\n `}\n\n ${placement === 'inline' &&\n css`\n width: 0.1875rem;\n height: 0.1875rem;\n margin: 0 0.1875rem;\n animation-duration: calc(4 * ${theme.base.animation.speed});\n `}\n\n &:nth-child(2) {\n animation-delay: 0.1667s;\n }\n\n &:nth-child(3) {\n animation-delay: ${0.1667 * 2}s;\n }\n }\n `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n const color = tryCatch(() => {\n return rgba(\n readableColor(theme.base.palette['primary-background']),\n theme.base.transparency['transparent-3']\n );\n });\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${color};\n `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n ({ theme, placement }) => {\n return css`\n ${placement !== 'inline' &&\n css`\n width: 100%;\n `}\n\n ${placement === 'block' &&\n css`\n margin-block: calc(2 * ${theme.base.spacing});\n `}\n `;\n }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAI3B,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;oBAEQ,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;mCAExB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAE3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAE5D,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,MAAM,IAAI,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAErD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;eAcG,IAAI;gBACH,IAAI;;;;kBAIF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;;;;oBASnC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;qDACV,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACjE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAElC,CAAC,WAAW;QACd,GAAG,CAAA;8CACiC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;WAC7D;;;;;MAKL,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;KAGF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAE3D,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;qBACxC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;yBACvB,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAA,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM;;;sCAGlD,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;uBAmBrE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;0BACxB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;QAC7D,WAAW;QACb,GAAG,CAAA;;;2CAGkC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;YACzD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;OACrC;;QAEC,CAAC,WAAW;QACd,GAAG,CAAA;yCACgC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;OAE5D;;;MAGD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAEhE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACzB,OAAO,GAAG,CAAA;;eAEG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;QAwBvD,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;OAEF;;;;;oBAKa,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC;;4CAEnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;QAE9D,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;OAGF;;QAEC,CAAC,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,CAAC;QAClD,GAAG,CAAA;;;OAGF;;QAEC,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;;;uCAI8B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;OAC1D;;;;;;;2BAOoB,MAAM,GAAG,CAAC;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,CACT,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAa,CAAC;mBACvD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;aAC5C,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACxC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;QACN,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;OAEF;;QAEC,SAAS,KAAK,OAAO;QACvB,GAAG,CAAA;iCACwB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC5C;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n return css`\n &:focus-visible {\n box-shadow: ${theme.components.button['focus-shadow']};\n outline: none;\n border-radius: calc(9999 * ${theme.base['border-radius']});\n }\n `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n const size = placement === 'inline' ? '1em' : '2rem';\n\n return css`\n @keyframes LoadingRing {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n position: relative;\n\n svg {\n display: block;\n width: ${size};\n height: ${size};\n\n circle {\n fill: transparent;\n stroke: ${theme.base.colors.gray['extra-light']};\n stroke-width: 2;\n r: 45%;\n cx: 50%;\n cy: 50%;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n\n &:nth-child(2) {\n stroke: ${theme.components.progress['progress-color']};\n transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n\n ${!determinate &&\n css`\n animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n `}\n }\n }\n }\n\n ${placement === 'inline' &&\n css`\n display: inline-flex;\n vertical-align: top;\n `}\n `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n return css`\n background-color: ${theme.base.colors.gray['extra-light']};\n border-radius: ${theme.base['border-radius']};\n width: calc(100% - ${placement === 'local' ? css`4 * ${theme.base.spacing}` : '0rem'});\n height: 0.375rem;\n min-width: 2rem;\n max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n overflow: hidden;\n\n @keyframes LoadingBar {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(200%);\n }\n }\n\n ::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n left: 0;\n border-radius: ${theme.base['border-radius']};\n background-color: ${theme.components.progress['progress-color']};\n ${determinate &&\n css`\n transform: translateX(var(--progress, 0));\n transform-origin: 0 50%;\n transition: transform calc(0.5 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n `}\n\n ${!determinate &&\n css`\n animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n width: 50%;\n `}\n }\n\n ${placement === 'inline' &&\n css`\n width: 3rem;\n display: inline-block;\n position: relative;\n `}\n `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n return css`\n line-height: 1;\n display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n @keyframes LoadingEllipsis {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n }\n\n > span {\n display: flex;\n justify-content: center;\n mix-blend-mode: multiply;\n\n ${placement === 'inline' &&\n css`\n display: inline-flex;\n `}\n }\n\n > span span {\n margin: 0 0.3125rem;\n background: ${theme.components.progress['progress-color']};\n border-radius: 50%;\n animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n ${placement === 'global' &&\n css`\n width: 1.25rem;\n height: 1.25rem;\n `}\n\n ${(placement === 'local' \|\| placement === 'block') &&\n css`\n width: 0.625rem;\n height: 0.625rem;\n `}\n\n ${placement === 'inline' &&\n css`\n width: 0.1875rem;\n height: 0.1875rem;\n margin: 0 0.1875rem;\n animation-duration: calc(4 * ${theme.base.animation.speed});\n `}\n\n &:nth-child(2) {\n animation-delay: 0.1667s;\n }\n\n &:nth-child(3) {\n animation-delay: ${0.1667 * 2}s;\n }\n }\n `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n const color = tryCatch(() => {\n return rgba(\n readableColor(theme.base.palette['primary-background']),\n theme.base.transparency['transparent-3']\n );\n });\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${color};\n `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n ({ theme, placement }) => {\n return css`\n ${placement !== 'inline' &&\n css`\n width: 100%;\n `}\n\n ${placement === 'block' &&\n css`\n margin-block: calc(2 * ${theme.base.spacing});\n `}\n `;\n }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Progress/Progress.types.d.ts CHANGED Viewed

@@ -1,9 +1,6 @@
 import { Ref } from 'react';
 import { BaseProps, NoChildrenProp } from '../../types';
 import { BackdropProps } from '../Backdrop/Backdrop';
-export interface ProgressHandleValue {
-    focus: () => void;
-}
 export interface ProgressProps extends BaseProps, NoChildrenProp {
     /**
      * Determines which variant should be rendered.
@@ -33,21 +30,31 @@ export interface ProgressProps extends BaseProps, NoChildrenProp {
      * When true, fade in occurs when component mounts.
      * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.
      * This is technically not the same as unmounting via parent.
+     * Applicable for all placements but the fade effect is only applicable to 'global' | 'local' placement.
      * @default true
      */
     visible?: boolean;
+    /**
+     * If true, upon visible render the indicator element will take focus.
+     * @default false
+     */
+    focusOnVisible?: boolean;
+    /**
+     * If true, the indicator will not render as visible until 1sec after the visible prop is set to true.
+     * This is a best estimate to avoid visual flicker where progress is resolved within 1sec.
+     * @default false
+     */
+    delay?: boolean;
     /** Called when the css transition ends on the way in. */
     onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];
     /** Called when the css transition ends on the way out...A good time to unmount! */
     onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];
-    /** Ref for the wrapping element. */
-    ref?: Ref<HTMLDivElement>;
-    /** Imperative handle */
-    handle?: Ref<ProgressHandleValue>;
     /** Triggers live announcement on show and value or message change. */
     liveConfig?: {
         /** Distinguishes the source of the update on the page. */
         contextualLabel: string;
     };
+    /** Ref to the visual indicator element, currently a role of progressbar. */
+    ref?: Ref<HTMLDivElement>;
 }
 //# sourceMappingURL=Progress.types.d.ts.map

package/lib/components/Progress/Progress.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,~~mBAAmB;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,~~aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD~~;;;;;OAKG~~;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB~~,yDAAyD~~;~~IACzD~~,~~iBAAiB~~,CAAC,EAAE,~~aAAa~~,CAAC~~,qBAAqB,CAAC,CAAC~~;~~IACzD,mFAAmF~~;~~IACnF~~,~~kBAAkB~~,CAAC,EAAE,~~aAAa~~,CAAC~~,sBAAsB,CAAC,CAAC~~;~~IAC3D~~,~~oCAAoC~~;~~IACpC~~,~~GAAG~~,CAAC,EAAE,~~GAAG~~,CAAC,~~cAAc~~,CAAC,CAAC;~~IAC1B~~,~~wBAAwB~~;~~IACxB~~,~~MAAM~~,CAAC,EAAE,~~GAAG~~,CAAC,~~mBAAmB~~,CAAC,CAAC;~~IAClC~~,sEAAsE;IACtE,UAAU,CAAC,EAAE;QACX,0DAA0D;QAC1D,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;~~CACH~~"}
1	+ {"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzD,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,sEAAsE;IACtE,UAAU,CAAC,EAAE;QACX,0DAA0D;QAC1D,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,4EAA4E;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Progress/Progress.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ~~ProgressHandleValue {\n focus: () => void;\n}\n\nexport interface~~ ProgressProps extends BaseProps, NoChildrenProp {\n /*\n Determines which variant should be rendered.\n * @default \"ring\"\n /\n variant?: 'ring' \| 'bar' \| 'ellipsis';\n /\n Minimum possible value.\n * @default 0\n /\n minValue?: number;\n /\n Maximum possible value.\n * @default 100\n /\n maxValue?: number;\n /* Current progress value within the range specified, or the default range of 0-100. /\n value?: number;\n /* Provides a message to the user along with the component. /\n message?: string;\n /\n Determines the placement of the component.\n * @default \"global\"\n /\n placement?: 'global' \| 'local' \| 'block' \| 'inline';\n /\n When true, fade in occurs when component mounts.\n * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n * This is technically not the same as unmounting via parent.\n * @default true\n /\n visible?: boolean;\n /* Called when the css transition ends on the way in. /\n onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n /* Called when the css transition ends on the way out...A good time to unmount! /\n onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n /* Imperative handle /\n handle?: Ref<ProgressHandleValue>;\n /* Triggers live announcement on show and value or message change. /\n liveConfig?: {\n /* Distinguishes the source of the update on the page. */\n contextualLabel: string;\n };\n}\n"]}
1	+ {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ProgressProps extends BaseProps, NoChildrenProp {\n /*\n Determines which variant should be rendered.\n * @default \"ring\"\n /\n variant?: 'ring' \| 'bar' \| 'ellipsis';\n /\n Minimum possible value.\n * @default 0\n /\n minValue?: number;\n /\n Maximum possible value.\n * @default 100\n /\n maxValue?: number;\n /* Current progress value within the range specified, or the default range of 0-100. /\n value?: number;\n /* Provides a message to the user along with the component. /\n message?: string;\n /\n Determines the placement of the component.\n * @default \"global\"\n /\n placement?: 'global' \| 'local' \| 'block' \| 'inline';\n /\n When true, fade in occurs when component mounts.\n * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n * This is technically not the same as unmounting via parent.\n * Applicable for all placements but the fade effect is only applicable to 'global' \| 'local' placement.\n * @default true\n /\n visible?: boolean;\n /\n If true, upon visible render the indicator element will take focus.\n * @default false\n /\n focusOnVisible?: boolean;\n /\n If true, the indicator will not render as visible until 1sec after the visible prop is set to true.\n * This is a best estimate to avoid visual flicker where progress is resolved within 1sec.\n * @default false\n /\n delay?: boolean;\n /* Called when the css transition ends on the way in. /\n onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n /* Called when the css transition ends on the way out...A good time to unmount! /\n onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n /* Triggers live announcement on show and value or message change. /\n liveConfig?: {\n /* Distinguishes the source of the update on the page. /\n contextualLabel: string;\n };\n /* Ref to the visual indicator element, currently a role of progressbar. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Progress/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export { default } from './Progress';
-export { ProgressProps, ProgressHandleValue } from './Progress.types';
+export { ProgressProps } from './Progress.types';
 export { StyledProgressBar, StyledProgressRing, StyledProgressEllipsis } from './Progress.styles';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Progress/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,~~mBAAmB,EAAE,~~MAAM,kBAAkB,CAAC;~~AACtE~~,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Progress/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Progress';\nexport { ProgressProps, ~~ProgressHandleValue~~ } from './Progress.types';\nexport { StyledProgressBar, StyledProgressRing, StyledProgressEllipsis } from './Progress.styles';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Progress';\nexport { ProgressProps } from './Progress.types';\nexport { StyledProgressBar, StyledProgressRing, StyledProgressEllipsis } from './Progress.styles';\n"]}

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

@@ -1,12 +1,13 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
+export declare const StyledEmptyQRWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export interface QRCodeProps extends BaseProps {
     /** Text that need to be encoded into QR code. */
     value: string;
     /** The HTML alt attribute for the image. */
     label?: string;
     /** Ref for the wrapping element. */
-    ref?: Ref<HTMLImageElement>;
+    ref?: Ref<HTMLImageElement | HTMLDivElement>;
 }
 declare const QRCode: FunctionComponent<QRCodeProps & ForwardProps>;
 export default QRCode;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAuB,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAEtD~~,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;~~CAC7B~~;AAED,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CAiBzD~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAuB,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,eAAO,MAAM,oBAAoB,yGAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAmCzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,9 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from 'react';
 import * as QRCodeLib from 'qrcode';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import Flex from '../Flex';
 import Image from '../Image';
+import { useI18n } from '../../hooks';
+import EmptyState from '../EmptyState';
+export const StyledEmptyQRWrapper = styled.div(({ theme }) => {
+    return css `
+    height: ${theme.base['content-width'].xs};
+    width: ${theme.base['content-width'].xs};
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+    border-radius: calc(${theme.base['border-radius']} / 2);
+    text-align: center;
+  `;
+});
+StyledEmptyQRWrapper.defaultProps = defaultThemeProp;
 const QRCode = forwardRef(({ value, label = value, ...restProps }, ref) => {
     const [dataURL, setDataURL] = useState('');
+    const t = useI18n();
     useEffect(() => {
         QRCodeLib.toDataURL(value)
             .then(setDataURL)
@@ -11,7 +27,13 @@ const QRCode = forwardRef(({ value, label = value, ...restProps }, ref) => {
             setDataURL('');
         });
     }, [value]);
-    return dataURL ? _jsx(Image, { ...restProps, ref: ref, src: dataURL, alt: label }) : null;
+    return dataURL ? (_jsx(Image, { ...restProps, ref: ref, src: dataURL, alt: label })) : (_jsx(Flex, { ...restProps, ref: ref, container: {
+            direction: 'column',
+            alignItems: 'center',
+            justify: 'center',
+            gap: 1,
+            pad: 2
+        }, as: StyledEmptyQRWrapper, children: _jsx(EmptyState, { message: t('qr_code_not_available') }) }));
 });
 export default QRCode;
 //# sourceMappingURL=QRCode.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjG,OAAO,KAAK,SAAS,MAAM,QAAQ,CAAC;~~AAEpC~~,OAAO,KAAK,MAAM,UAAU,CAAC;~~AAY7B~~,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,SAAS,EAAgC,EACpE,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;~~IAE3C~~,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;aACvB,IAAI,CAAC,UAAU,CAAC;aAChB,KAAK,CAAC,GAAG,EAAE;YACV,UAAU,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,OAAK,SAAS,EAAE,GAAG,EAAE,~~GAAG~~,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;~~AACvF~~,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useState } from 'react';\nimport * as QRCodeLib from 'qrcode';\n\nimport ~~Image~~ from '~~../Image~~';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface QRCodeProps extends BaseProps {\n /** Text that need to be encoded into QR code. /\n value: string;\n /* The HTML alt attribute for the image. /\n label?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLImageElement>;\n}\n\nconst QRCode: FunctionComponent<QRCodeProps & ForwardProps> = forwardRef(\n (\n { value, label = value, ...restProps }: PropsWithoutRef<QRCodeProps>,\n ref: QRCodeProps['ref']\n ) => {\n const [dataURL, setDataURL] = useState('');\n\n useEffect(() => {\n QRCodeLib.toDataURL(value)\n .then(setDataURL)\n .catch(() => {\n setDataURL('');\n });\n }, [value]);\n\n return dataURL ? <Image {...restProps} ref={ref} src={dataURL} alt={label} /> : ~~null~~;\n }\n);\n\nexport default QRCode;\n"]}
1	+ {"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjG,OAAO,KAAK,SAAS,MAAM,QAAQ,CAAC;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;aAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;8BACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACrC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAWrD,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,SAAS,EAAgC,EACpE,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;aACvB,IAAI,CAAC,UAAU,CAAC;aAChB,KAAK,CAAC,GAAG,EAAE;YACV,UAAU,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,KAAK,OAAK,SAAS,EAAE,GAAG,EAAE,GAA4B,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,GAAI,CACtF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;YACjB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,oBAAoB,YAExB,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,uBAAuB,CAAC,GAAI,GAC9C,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useState } from 'react';\nimport * as QRCodeLib from 'qrcode';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport { useI18n } from '../../hooks';\nimport EmptyState from '../EmptyState';\n\nexport const StyledEmptyQRWrapper = styled.div(({ theme }) => {\n return css`\n height: ${theme.base['content-width'].xs};\n width: ${theme.base['content-width'].xs};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(${theme.base['border-radius']} / 2);\n text-align: center;\n `;\n});\n\nStyledEmptyQRWrapper.defaultProps = defaultThemeProp;\n\nexport interface QRCodeProps extends BaseProps {\n /** Text that need to be encoded into QR code. /\n value: string;\n /* The HTML alt attribute for the image. /\n label?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLImageElement \| HTMLDivElement>;\n}\n\nconst QRCode: FunctionComponent<QRCodeProps & ForwardProps> = forwardRef(\n (\n { value, label = value, ...restProps }: PropsWithoutRef<QRCodeProps>,\n ref: QRCodeProps['ref']\n ) => {\n const [dataURL, setDataURL] = useState('');\n const t = useI18n();\n\n useEffect(() => {\n QRCodeLib.toDataURL(value)\n .then(setDataURL)\n .catch(() => {\n setDataURL('');\n });\n }, [value]);\n\n return dataURL ? (\n <Image {...restProps} ref={ref as Ref<HTMLImageElement>} src={dataURL} alt={label} />\n ) : (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center',\n justify: 'center',\n gap: 1,\n pad: 2\n }}\n as={StyledEmptyQRWrapper}\n >\n <EmptyState message={t('qr_code_not_available')} />\n </Flex>\n );\n }\n);\n\nexport default QRCode;\n"]}

package/lib/components/Tree/StandardTree.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAA8C,MAAM,OAAO,CAAC;~~AAO3F~~,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAiBxD~~,OAAO,KAAK,EAGV,iBAAiB,EAElB,MAAM,sBAAsB,CAAC;~~AAyU9B~~,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAIrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"StandardTree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAM3F,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAmBxD,OAAO,KAAK,EAGV,iBAAiB,EAElB,MAAM,sBAAsB,CAAC;AAwY9B,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAIrE,CAAC;AAEF,eAAe,YAAY,CAAC"}