@pega/cosmos-react-core 9.0.0-build.29.2 → 9.0.0-build.29.21

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 (147) hide show
  1. package/lib/components/AppShell/AppShell.d.ts +0 -2
  2. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  3. package/lib/components/AppShell/AppShell.js +19 -24
  4. package/lib/components/AppShell/AppShell.js.map +1 -1
  5. package/lib/components/AppShell/AppShell.styles.d.ts +5 -2
  6. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  7. package/lib/components/AppShell/AppShell.styles.js +47 -40
  8. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  9. package/lib/components/AppShell/Drawer.d.ts +1 -1
  10. package/lib/components/AppShell/Drawer.d.ts.map +1 -1
  11. package/lib/components/AppShell/Drawer.js +5 -9
  12. package/lib/components/AppShell/Drawer.js.map +1 -1
  13. package/lib/components/Button/Button.d.ts +5 -0
  14. package/lib/components/Button/Button.d.ts.map +1 -1
  15. package/lib/components/Button/Button.js +8 -4
  16. package/lib/components/Button/Button.js.map +1 -1
  17. package/lib/components/Checkbox/CheckboxCard.d.ts +6 -1
  18. package/lib/components/Checkbox/CheckboxCard.d.ts.map +1 -1
  19. package/lib/components/Checkbox/CheckboxCard.js +2 -2
  20. package/lib/components/Checkbox/CheckboxCard.js.map +1 -1
  21. package/lib/components/ClassificationMarking/ClassificationMarking.styles.d.ts.map +1 -1
  22. package/lib/components/ClassificationMarking/ClassificationMarking.styles.js +0 -3
  23. package/lib/components/ClassificationMarking/ClassificationMarking.styles.js.map +1 -1
  24. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  25. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +5 -3
  26. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  27. package/lib/components/FormField/FormField.d.ts +3 -2
  28. package/lib/components/FormField/FormField.d.ts.map +1 -1
  29. package/lib/components/FormField/FormField.js +23 -19
  30. package/lib/components/FormField/FormField.js.map +1 -1
  31. package/lib/components/Fullscreen/Fullscreen.js +1 -1
  32. package/lib/components/Fullscreen/Fullscreen.js.map +1 -1
  33. package/lib/components/Icon/Icon.d.ts.map +1 -1
  34. package/lib/components/Icon/Icon.js +1 -1
  35. package/lib/components/Icon/Icon.js.map +1 -1
  36. package/lib/components/Icon/iconNames.d.ts +1 -1
  37. package/lib/components/Icon/iconNames.d.ts.map +1 -1
  38. package/lib/components/Icon/iconNames.js +1 -0
  39. package/lib/components/Icon/iconNames.js.map +1 -1
  40. package/lib/components/Icon/icons/preview-hide.icon.d.ts +5 -0
  41. package/lib/components/Icon/icons/preview-hide.icon.d.ts.map +1 -0
  42. package/lib/components/Icon/icons/preview-hide.icon.js +7 -0
  43. package/lib/components/Icon/icons/preview-hide.icon.js.map +1 -0
  44. package/lib/components/Icon/streamline-icons/doc-ai.icon.d.ts +5 -0
  45. package/lib/components/Icon/streamline-icons/doc-ai.icon.d.ts.map +1 -0
  46. package/lib/components/Icon/streamline-icons/doc-ai.icon.js +7 -0
  47. package/lib/components/Icon/streamline-icons/doc-ai.icon.js.map +1 -0
  48. package/lib/components/Icon/streamline-icons/field-group.icon.d.ts +5 -0
  49. package/lib/components/Icon/streamline-icons/field-group.icon.d.ts.map +1 -0
  50. package/lib/components/Icon/streamline-icons/field-group.icon.js +7 -0
  51. package/lib/components/Icon/streamline-icons/field-group.icon.js.map +1 -0
  52. package/lib/components/Icon/streamline-icons/preview-bottom.icon.d.ts +5 -0
  53. package/lib/components/Icon/streamline-icons/preview-bottom.icon.d.ts.map +1 -0
  54. package/lib/components/Icon/streamline-icons/preview-bottom.icon.js +7 -0
  55. package/lib/components/Icon/streamline-icons/preview-bottom.icon.js.map +1 -0
  56. package/lib/components/Icon/streamline-icons/preview-hide.icon.d.ts +5 -0
  57. package/lib/components/Icon/streamline-icons/preview-hide.icon.d.ts.map +1 -0
  58. package/lib/components/Icon/streamline-icons/preview-hide.icon.js +7 -0
  59. package/lib/components/Icon/streamline-icons/preview-hide.icon.js.map +1 -0
  60. package/lib/components/Icon/streamline-icons/preview-rtl.icon.d.ts +5 -0
  61. package/lib/components/Icon/streamline-icons/preview-rtl.icon.d.ts.map +1 -0
  62. package/lib/components/Icon/streamline-icons/preview-rtl.icon.js +7 -0
  63. package/lib/components/Icon/streamline-icons/preview-rtl.icon.js.map +1 -0
  64. package/lib/components/Icon/streamline-icons/preview.icon.d.ts +5 -0
  65. package/lib/components/Icon/streamline-icons/preview.icon.d.ts.map +1 -0
  66. package/lib/components/Icon/streamline-icons/preview.icon.js +7 -0
  67. package/lib/components/Icon/streamline-icons/preview.icon.js.map +1 -0
  68. package/lib/components/Icon/streamlineIconNames.d.ts +1 -1
  69. package/lib/components/Icon/streamlineIconNames.d.ts.map +1 -1
  70. package/lib/components/Icon/streamlineIconNames.js +6 -0
  71. package/lib/components/Icon/streamlineIconNames.js.map +1 -1
  72. package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
  73. package/lib/components/Lightbox/Lightbox.js +1 -6
  74. package/lib/components/Lightbox/Lightbox.js.map +1 -1
  75. package/lib/components/LiveLog/LiveLog.js +2 -2
  76. package/lib/components/LiveLog/LiveLog.js.map +1 -1
  77. package/lib/components/LiveLog/LiveLog.types.d.ts +1 -1
  78. package/lib/components/LiveLog/LiveLog.types.js.map +1 -1
  79. package/lib/components/Location/GoogleMapsAPI.d.ts +1 -2
  80. package/lib/components/Location/GoogleMapsAPI.d.ts.map +1 -1
  81. package/lib/components/Location/GoogleMapsAPI.js +45 -45
  82. package/lib/components/Location/GoogleMapsAPI.js.map +1 -1
  83. package/lib/components/Location/LocationAPI.types.d.ts +1 -2
  84. package/lib/components/Location/LocationAPI.types.d.ts.map +1 -1
  85. package/lib/components/Location/LocationAPI.types.js.map +1 -1
  86. package/lib/components/Location/LocationInput.d.ts.map +1 -1
  87. package/lib/components/Location/LocationInput.js +52 -44
  88. package/lib/components/Location/LocationInput.js.map +1 -1
  89. package/lib/components/Modal/Modal.styles.d.ts.map +1 -1
  90. package/lib/components/Modal/Modal.styles.js +1 -0
  91. package/lib/components/Modal/Modal.styles.js.map +1 -1
  92. package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map +1 -1
  93. package/lib/components/MultiStepForm/HorizontalFormProgress.js +4 -3
  94. package/lib/components/MultiStepForm/HorizontalFormProgress.js.map +1 -1
  95. package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map +1 -1
  96. package/lib/components/PageTemplates/CategorySubPage.styles.js +24 -5
  97. package/lib/components/PageTemplates/CategorySubPage.styles.js.map +1 -1
  98. package/lib/components/RadioButton/RadioButtonCard.d.ts +6 -1
  99. package/lib/components/RadioButton/RadioButtonCard.d.ts.map +1 -1
  100. package/lib/components/RadioButton/RadioButtonCard.js +2 -2
  101. package/lib/components/RadioButton/RadioButtonCard.js.map +1 -1
  102. package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
  103. package/lib/components/RadioCheckGroup/RadioCheckGroup.js +18 -10
  104. package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
  105. package/lib/components/SelectionCard/SelectionCard.d.ts.map +1 -1
  106. package/lib/components/SelectionCard/SelectionCard.js +1 -1
  107. package/lib/components/SelectionCard/SelectionCard.js.map +1 -1
  108. package/lib/components/SelectionCard/SelectionCardDisplay.d.ts +6 -1
  109. package/lib/components/SelectionCard/SelectionCardDisplay.d.ts.map +1 -1
  110. package/lib/components/SelectionCard/SelectionCardDisplay.js +2 -2
  111. package/lib/components/SelectionCard/SelectionCardDisplay.js.map +1 -1
  112. package/lib/components/TextArea/TextArea.d.ts.map +1 -1
  113. package/lib/components/TextArea/TextArea.js +21 -2
  114. package/lib/components/TextArea/TextArea.js.map +1 -1
  115. package/lib/components/TextArea/TextArea.styles.d.ts +1 -0
  116. package/lib/components/TextArea/TextArea.styles.d.ts.map +1 -1
  117. package/lib/components/TextArea/TextArea.styles.js +2 -1
  118. package/lib/components/TextArea/TextArea.styles.js.map +1 -1
  119. package/lib/components/Toaster/Toaster.d.ts.map +1 -1
  120. package/lib/components/Toaster/Toaster.js +0 -1
  121. package/lib/components/Toaster/Toaster.js.map +1 -1
  122. package/lib/components/Tree/StandardTree.d.ts.map +1 -1
  123. package/lib/components/Tree/StandardTree.js +4 -3
  124. package/lib/components/Tree/StandardTree.js.map +1 -1
  125. package/lib/components/Tree/StandardTree.styles.d.ts +6 -4
  126. package/lib/components/Tree/StandardTree.styles.d.ts.map +1 -1
  127. package/lib/components/Tree/StandardTree.styles.js +10 -11
  128. package/lib/components/Tree/StandardTree.styles.js.map +1 -1
  129. package/lib/components/Tree/StandardTree.types.d.ts +2 -2
  130. package/lib/components/Tree/StandardTree.types.d.ts.map +1 -1
  131. package/lib/components/Tree/StandardTree.types.js.map +1 -1
  132. package/lib/hooks/useI18n.d.ts +6 -1
  133. package/lib/hooks/useI18n.d.ts.map +1 -1
  134. package/lib/i18n/default.d.ts +6 -1
  135. package/lib/i18n/default.d.ts.map +1 -1
  136. package/lib/i18n/default.js +7 -1
  137. package/lib/i18n/default.js.map +1 -1
  138. package/lib/i18n/i18n.d.ts +6 -1
  139. package/lib/i18n/i18n.d.ts.map +1 -1
  140. package/lib/styles/GlobalStyle.js +2 -2
  141. package/lib/styles/GlobalStyle.js.map +1 -1
  142. package/lib/theme/themes/orionDarkTheme.json +77 -57
  143. package/lib/utils/getEffectiveRect.d.ts +1 -5
  144. package/lib/utils/getEffectiveRect.d.ts.map +1 -1
  145. package/lib/utils/getEffectiveRect.js +78 -10
  146. package/lib/utils/getEffectiveRect.js.map +1 -1
  147. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxProps } from './Checkbox';\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\nexport type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n OmitStrict<CheckboxProps, 'label' | 'variant' | 'indeterminate'> & {\n label: NonNullable<ReactNode>;\n };\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxCardProps>>(\n function CheckboxCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n 'aria-label': ariaLabel,\n disabled,\n readOnly,\n onChange,\n onClick,\n onKeyDown,\n status,\n checked,\n value,\n ...restProps\n } = props;\n const cardId = `${id}-card`;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getCheckboxCardTestIds);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\n\n return (\n <SelectionCard\n {...restProps}\n id={cardId}\n testId={testIds}\n aria-labelledby={ariaLabel ? undefined : labelId}\n aria-label={ariaLabel}\n heading={\n <Checkbox\n testId={testIds.root}\n onChange={onChange}\n onClick={onClick}\n status={status}\n checked={checked}\n value={value}\n id={id}\n disabled={disabled}\n readOnly={readOnly}\n aria-labelledby={labelId}\n label={\n <Text variant='h4' as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n variant='simple'\n ref={inputRef}\n onKeyDown={onKeyDown}\n />\n }\n readOnly={readOnly}\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (readOnly || !containerRef.current?.contains(target)) return;\n if (\n containerRef.current &&\n [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n )\n return;\n e.preventDefault();\n inputRef.current?.click();\n (inputRef.current?.hasAttribute('data-main-focus')\n ? inputRef\n : containerRef\n ).current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === ' ' && containerRef.current === getActiveElement()) {\n e.preventDefault();\n inputRef.current?.click();\n }\n }}\n ref={containerRef}\n />\n );\n }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}
1
+ {"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxProps } from './Checkbox';\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\nexport type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n OmitStrict<CheckboxProps, 'label' | 'variant' | 'indeterminate'> & {\n label: NonNullable<ReactNode>;\n /**\n * Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n };\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxCardProps>>(\n function CheckboxCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n headingTag = 'h4',\n 'aria-label': ariaLabel,\n disabled,\n readOnly,\n onChange,\n onClick,\n onKeyDown,\n status,\n checked,\n value,\n ...restProps\n } = props;\n const cardId = `${id}-card`;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getCheckboxCardTestIds);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\n\n return (\n <SelectionCard\n {...restProps}\n id={cardId}\n testId={testIds}\n aria-labelledby={ariaLabel ? undefined : labelId}\n aria-label={ariaLabel}\n heading={\n <Checkbox\n testId={testIds.root}\n onChange={onChange}\n onClick={onClick}\n status={status}\n checked={checked}\n value={value}\n id={id}\n disabled={disabled}\n readOnly={readOnly}\n aria-labelledby={labelId}\n label={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n variant='simple'\n ref={inputRef}\n onKeyDown={onKeyDown}\n />\n }\n readOnly={readOnly}\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (readOnly || !containerRef.current?.contains(target)) return;\n if (\n containerRef.current &&\n [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n )\n return;\n e.preventDefault();\n inputRef.current?.click();\n (inputRef.current?.hasAttribute('data-main-focus')\n ? inputRef\n : containerRef\n ).current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === ' ' && containerRef.current === getActiveElement()) {\n e.preventDefault();\n inputRef.current?.click();\n }\n }}\n ref={containerRef}\n />\n );\n }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAQf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;YAgB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;YAmCd,CAAC"}
1
+ {"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAKf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;YAgB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;YAmCd,CAAC"}
@@ -8,9 +8,6 @@ import { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';
8
8
  export const ClassificationMarkingGlobalStyle = createGlobalStyle `
9
9
  :root {
10
10
  --marking-height: ${({ height }) => height};
11
- --appshell-top-offset: var(--marking-height);
12
- --appshell-bottom-offset: var(--marking-height);
13
- --appshell-hard-bottom-offset: var(--marking-height);
14
11
  }
15
12
  `;
16
13
  export const StyledMarking = styled.div(({ background, color, height, fontSize, fontFamily, placement, theme }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;cAED,MAAM;mBACD,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;wBACY,MAAM;yBACL,YAAY;wCACG,YAAY;;;;;qBAK/B,eAAe;;;;;;;sBAOd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;;;;;;;;;;;;;GAiB5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';\n\n/**\n * Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n */\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n height: string;\n}>`\n :root {\n --marking-height: ${({ height }) => height};\n --appshell-top-offset: var(--marking-height);\n --appshell-bottom-offset: var(--marking-height);\n --appshell-hard-bottom-offset: var(--marking-height);\n }\n`;\n\nexport const StyledMarking = styled.div<{\n background: string;\n color: string;\n height: string;\n fontSize?: string;\n fontFamily?: string;\n placement: 'top' | 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n return css`\n position: fixed;\n ${placement}: 0;\n inset-inline: 0;\n height: ${height};\n line-height: ${height};\n text-align: center;\n font-weight: ${theme.base['font-weight'].bold};\n ${fontFamily ? `font-family: ${fontFamily};` : ''}\n ${fontSize ? `font-size: ${fontSize};` : ''}\n z-index: ${theme.base['z-index'].max};\n background: ${background};\n color: ${color};\n `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n height: string;\n}>(({ height, theme }) => {\n return css`\n --marking-height: ${height};\n --top-offset: calc(${headerHeight} + var(--marking-height));\n --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));\n height: calc(100% - var(--marking-height));\n min-height: calc(100% - var(--marking-height));\n\n /* Header layout fix: position below top banner */\n & > header:not(${StyledMobileNav}) {\n position: fixed;\n top: var(--marking-height);\n width: 100%;\n }\n\n /* Desktop only: nav and main top offset and min-height */\n @media (width > ${theme.base.breakpoints.sm}) {\n & nav[data-app-region],\n & nav[data-app-region] [role='dialog'],\n & main[data-app-region] {\n top: var(--top-offset);\n min-height: var(--remaining-height);\n }\n\n /* Nav height */\n & nav[data-app-region] {\n height: var(--remaining-height);\n }\n\n & main[data-app-region] {\n padding-block-end: var(--marking-height);\n }\n }\n `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;cAED,MAAM;mBACD,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;wBACY,MAAM;yBACL,YAAY;wCACG,YAAY;;;;;qBAK/B,eAAe;;;;;;;sBAOd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;;;;;;;;;;;;;GAiB5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';\n\n/**\n * Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n */\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n height: string;\n}>`\n :root {\n --marking-height: ${({ height }) => height};\n }\n`;\n\nexport const StyledMarking = styled.div<{\n background: string;\n color: string;\n height: string;\n fontSize?: string;\n fontFamily?: string;\n placement: 'top' | 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n return css`\n position: fixed;\n ${placement}: 0;\n inset-inline: 0;\n height: ${height};\n line-height: ${height};\n text-align: center;\n font-weight: ${theme.base['font-weight'].bold};\n ${fontFamily ? `font-family: ${fontFamily};` : ''}\n ${fontSize ? `font-size: ${fontSize};` : ''}\n z-index: ${theme.base['z-index'].max};\n background: ${background};\n color: ${color};\n `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n height: string;\n}>(({ height, theme }) => {\n return css`\n --marking-height: ${height};\n --top-offset: calc(${headerHeight} + var(--marking-height));\n --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));\n height: calc(100% - var(--marking-height));\n min-height: calc(100% - var(--marking-height));\n\n /* Header layout fix: position below top banner */\n & > header:not(${StyledMobileNav}) {\n position: fixed;\n top: var(--marking-height);\n width: 100%;\n }\n\n /* Desktop only: nav and main top offset and min-height */\n @media (width > ${theme.base.breakpoints.sm}) {\n & nav[data-app-region],\n & nav[data-app-region] [role='dialog'],\n & main[data-app-region] {\n top: var(--top-offset);\n min-height: var(--remaining-height);\n }\n\n /* Nav height */\n & nav[data-app-region] {\n height: var(--remaining-height);\n }\n\n & main[data-app-region] {\n padding-block-end: var(--marking-height);\n }\n }\n `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAGhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiBnD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,eAAO,MAAM,sBAAsB;;mBAYlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAkU7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAGhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiBnD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,eAAO,MAAM,sBAAsB;;mBAYlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAiU7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -35,7 +35,7 @@ const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
35
35
  const uadConfig = useMemo(() => ({
36
36
  focusEl: inputRef.current,
37
37
  scope: listRef.current,
38
- selector: 'li[role="option"]',
38
+ selector: ':scope > li',
39
39
  orientation: 'horizontal',
40
40
  focusReturnEl: focusDescendant,
41
41
  clearFocusReturn: () => {
@@ -200,8 +200,10 @@ const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
200
200
  inputRef.current?.focus();
201
201
  inputRef.current?.click();
202
202
  }
203
- }, children: [selected.length > 0 && (_jsx("ul", { ref: listRef, id: id, role: 'listbox', "aria-label": t('selected_items'), onKeyDown: onListArrowKeyDown, children: selected.map((element, idx) => {
204
- return (_jsx(Selectable, { as: 'li', role: 'option', id: element.id.toString(), status: status, contextualLabel: element.text, onRemove: !readOnly && !disabled
203
+ }, children: [selected.length > 0 && (
204
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
205
+ _jsx("ul", { ref: listRef, id: id, "aria-label": t('selected_items'), onKeyDown: onListArrowKeyDown, children: selected.map((element, idx) => {
206
+ return (_jsx(Selectable, { as: 'li', id: element.id.toString(), status: status, contextualLabel: element.text, onRemove: !readOnly && !disabled
205
207
  ? () => {
206
208
  handleSelectedRemoval(element.id, idx);
207
209
  }
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, KeyboardEvent, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, isInstance, getActiveElement } from '../../../utils';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\nimport type { Selected } from '../ComboBox.types';\n\nimport type { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n`;\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n function MultiSelectInput(\n props: PropsWithoutRef<MultiSelectInputProps>,\n ref: Ref<HTMLInputElement>\n ) {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n required,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: 'li[role=\"option\"]',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n preventInitialScroll: true,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId: Selected['id'], idx: number) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onListArrowKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n // Tab (forward) from within the list: move focus to the input\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n inputRef.current?.focus();\n return;\n }\n\n // Shift+Tab from within the list: exit the combobox entirely\n if (e.key === 'Tab' && e.shiftKey) {\n const focusables = Array.from(listRef.current?.querySelectorAll('a, button') ?? []);\n const elementsToRestore = inputRef.current\n ? [...focusables, inputRef.current]\n : focusables;\n const previousTabIndexes = elementsToRestore.map(el => ({\n el,\n tabindex: el.getAttribute('tabindex')\n }));\n elementsToRestore.forEach(el => el.setAttribute('tabindex', '-1'));\n requestAnimationFrame(() => {\n previousTabIndexes.forEach(({ el, tabindex }) => {\n if (tabindex === null) {\n el.removeAttribute('tabindex');\n } else {\n el.setAttribute('tabindex', tabindex);\n }\n });\n });\n return;\n }\n\n if (e.key !== `Arrow${cap(start)}` && e.key !== `Arrow${cap(end)}`) return;\n\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const currentIndex = items.findIndex(\n item => item === getActiveElement() || item.contains(getActiveElement())\n );\n if (currentIndex === -1) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n if (e.key === `Arrow${cap(start)}` && currentIndex > 0) {\n const prev = items[currentIndex - 1];\n const prevLink = prev.querySelector('a');\n const focusTarget = isInstance(prevLink, HTMLElement) ? prevLink : prev;\n focusTarget.focus();\n } else if (e.key === `Arrow${cap(end)}`) {\n if (currentIndex < items.length - 1) {\n const next = items[currentIndex + 1];\n const nextLink = next.querySelector('a');\n const focusTarget = isInstance(nextLink, HTMLElement) ? nextLink : next;\n focusTarget.focus();\n } else {\n inputRef.current?.focus();\n }\n }\n },\n [start, end, uadConfig.selector]\n );\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n // Shift+Tab: Focus the last selected item's link\n if (e.key === 'Tab' && e.shiftKey && selected.length) {\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const lastItem = items[items.length - 1];\n const link = lastItem?.querySelector('a');\n\n if (isInstance(link, HTMLElement)) {\n e.preventDefault();\n e.stopPropagation();\n link.focus();\n return;\n }\n }\n\n if (\n selected.length &&\n inputRef.current?.selectionStart === 0 &&\n inputRef.current?.selectionEnd === 0\n ) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled,\n start,\n uadConfig.selector,\n onSelectedFocus,\n onSelectedBlur\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n const ariaControlsValue = useMemo(() => {\n if (!pauseDescendantEvaluation) {\n return selected.length > 0 ? id : undefined;\n }\n return ariaControls;\n }, [pauseDescendantEvaluation, selected.length]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n readOnly={readOnly}\n disabled={disabled}\n status={status}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n // Ignore clicks on selection items\n if (\n isInstance(e.target, HTMLElement) &&\n !isInstance(e.target, HTMLInputElement) &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n e.stopPropagation();\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n <ul\n ref={listRef}\n id={id}\n role='listbox'\n aria-label={t('selected_items')}\n onKeyDown={onListArrowKeyDown}\n >\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n role='option'\n id={element.id.toString()}\n status={status}\n contextualLabel={element.text}\n onRemove={\n !readOnly && !disabled\n ? () => {\n handleSelectedRemoval(element.id, idx);\n }\n : undefined\n }\n tabIndex={-1}\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.primary ?? element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='_off'\n autoFocus={autoFocus}\n aria-controls={ariaControlsValue}\n aria-required={!!required}\n {...restProps}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
1
+ {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, KeyboardEvent, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, isInstance, getActiveElement } from '../../../utils';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\nimport type { Selected } from '../ComboBox.types';\n\nimport type { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n`;\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n function MultiSelectInput(\n props: PropsWithoutRef<MultiSelectInputProps>,\n ref: Ref<HTMLInputElement>\n ) {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n required,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: ':scope > li',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n preventInitialScroll: true,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId: Selected['id'], idx: number) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onListArrowKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n // Tab (forward) from within the list: move focus to the input\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n inputRef.current?.focus();\n return;\n }\n\n // Shift+Tab from within the list: exit the combobox entirely\n if (e.key === 'Tab' && e.shiftKey) {\n const focusables = Array.from(listRef.current?.querySelectorAll('a, button') ?? []);\n const elementsToRestore = inputRef.current\n ? [...focusables, inputRef.current]\n : focusables;\n const previousTabIndexes = elementsToRestore.map(el => ({\n el,\n tabindex: el.getAttribute('tabindex')\n }));\n elementsToRestore.forEach(el => el.setAttribute('tabindex', '-1'));\n requestAnimationFrame(() => {\n previousTabIndexes.forEach(({ el, tabindex }) => {\n if (tabindex === null) {\n el.removeAttribute('tabindex');\n } else {\n el.setAttribute('tabindex', tabindex);\n }\n });\n });\n return;\n }\n\n if (e.key !== `Arrow${cap(start)}` && e.key !== `Arrow${cap(end)}`) return;\n\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const currentIndex = items.findIndex(\n item => item === getActiveElement() || item.contains(getActiveElement())\n );\n if (currentIndex === -1) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n if (e.key === `Arrow${cap(start)}` && currentIndex > 0) {\n const prev = items[currentIndex - 1];\n const prevLink = prev.querySelector('a');\n const focusTarget = isInstance(prevLink, HTMLElement) ? prevLink : prev;\n focusTarget.focus();\n } else if (e.key === `Arrow${cap(end)}`) {\n if (currentIndex < items.length - 1) {\n const next = items[currentIndex + 1];\n const nextLink = next.querySelector('a');\n const focusTarget = isInstance(nextLink, HTMLElement) ? nextLink : next;\n focusTarget.focus();\n } else {\n inputRef.current?.focus();\n }\n }\n },\n [start, end, uadConfig.selector]\n );\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n // Shift+Tab: Focus the last selected item's link\n if (e.key === 'Tab' && e.shiftKey && selected.length) {\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const lastItem = items[items.length - 1];\n const link = lastItem?.querySelector('a');\n\n if (isInstance(link, HTMLElement)) {\n e.preventDefault();\n e.stopPropagation();\n link.focus();\n return;\n }\n }\n\n if (\n selected.length &&\n inputRef.current?.selectionStart === 0 &&\n inputRef.current?.selectionEnd === 0\n ) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled,\n start,\n uadConfig.selector,\n onSelectedFocus,\n onSelectedBlur\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n const ariaControlsValue = useMemo(() => {\n if (!pauseDescendantEvaluation) {\n return selected.length > 0 ? id : undefined;\n }\n return ariaControls;\n }, [pauseDescendantEvaluation, selected.length]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n readOnly={readOnly}\n disabled={disabled}\n status={status}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n // Ignore clicks on selection items\n if (\n isInstance(e.target, HTMLElement) &&\n !isInstance(e.target, HTMLInputElement) &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n e.stopPropagation();\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <ul\n ref={listRef}\n id={id}\n aria-label={t('selected_items')}\n onKeyDown={onListArrowKeyDown}\n >\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n id={element.id.toString()}\n status={status}\n contextualLabel={element.text}\n onRemove={\n !readOnly && !disabled\n ? () => {\n handleSelectedRemoval(element.id, idx);\n }\n : undefined\n }\n tabIndex={-1}\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.primary ?? element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='_off'\n autoFocus={autoFocus}\n aria-controls={ariaControlsValue}\n aria-required={!!required}\n {...restProps}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
@@ -70,8 +70,8 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
70
70
  /** Suppresses announcements for status changes. */
71
71
  suppressAnnouncements?: boolean;
72
72
  }
73
- export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & Pick<FormFieldProps, "inline"> & {
74
- $infoAbove?: boolean;
73
+ export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & {
74
+ infoAbove?: boolean;
75
75
  }>> & string;
76
76
  export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
77
77
  inline: boolean;
@@ -79,6 +79,7 @@ export declare const StyledLabelRow: import("styled-components/dist/types").ISty
79
79
  export declare const StyledFormField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FormFieldProps & {
80
80
  asFieldset: boolean;
81
81
  showAdditionalInfo: boolean;
82
+ labelInline?: boolean;
82
83
  }>> & string;
83
84
  declare const _default: FC<FormFieldProps & ForwardProps> & {
84
85
  getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
@@ -1 +1 @@
1
- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;iBACqD,OAAO;YAqC1F,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBACK,OAAO;wBAAsB,OAAO;YAuEnE,CAAC;;;;AAiVH,wBAA2D"}
1
+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;gBACmB,OAAO;YA6BxD,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBAEZ,OAAO;wBACC,OAAO;kBACb,OAAO;YAqFvB,CAAC;;;;AAiVH,wBAA2D"}
@@ -35,24 +35,16 @@ const StyledClearButton = styled(Button)(({ theme }) => {
35
35
  `;
36
36
  });
37
37
  StyledClearButton.defaultProps = defaultThemeProp;
38
- export const StyledFormFieldInfo = styled.div(({ status, inline, $infoAbove, theme }) => {
38
+ export const StyledFormFieldInfo = styled.div(({ status, infoAbove, theme }) => {
39
39
  const { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { 'form-field': formField } } = theme;
40
40
  const fontSizes = calculateFontSize(fontSize, fontScale);
41
41
  const infoFontSize = fontSizes.xxs;
42
- const labelFontSize = fontSizes[theme.components.text.primary['font-size']];
43
42
  return css `
44
- max-width: max-content;
45
43
  font-size: ${infoFontSize};
46
44
  word-break: break-word;
47
45
 
48
- ${inline &&
49
- css `
50
- padding-inline-start: calc(${labelFontSize} / ${infoFontSize} * 14ch);
51
- min-width: 100%;
52
- `}
53
-
54
46
  &:not(:empty) {
55
- ${$infoAbove
47
+ ${infoAbove
56
48
  ? css `
57
49
  margin-block-end: calc(0.25 * ${spacing});
58
50
  `
@@ -81,7 +73,7 @@ export const StyledLabelRow = styled.div(({ inline }) => {
81
73
  }
82
74
  });
83
75
  export const StyledFormField = styled.div(props => {
84
- const { asFieldset, showAdditionalInfo, disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
76
+ const { asFieldset, showAdditionalInfo, disabled, required, labelInline, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
85
77
  return css `
86
78
  ${disabled &&
87
79
  css `
@@ -135,6 +127,18 @@ export const StyledFormField = styled.div(props => {
135
127
  align-self: flex-start;
136
128
  }
137
129
  `}
130
+
131
+ ${labelInline &&
132
+ css `
133
+ display: grid;
134
+ grid-template-columns: 14ch 1fr;
135
+ grid-template-rows: auto 1fr;
136
+ align-items: start;
137
+
138
+ ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {
139
+ grid-row: span 2;
140
+ }
141
+ `}
138
142
  `;
139
143
  });
140
144
  StyledFormField.defaultProps = defaultThemeProp;
@@ -193,15 +197,15 @@ const FormField = forwardRef(function FormField(props, ref) {
193
197
  const labelRef = useRef(null);
194
198
  const [labelText, setLabelText] = useState(null);
195
199
  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
196
- const labelInline = inline && !isRadioCheck;
200
+ const labelInline = inline && !isRadioCheck && !labelHidden;
197
201
  const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;
198
202
  const labelContent = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
199
203
  if (readOnly)
200
204
  e.preventDefault();
201
- }, inline: inline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
205
+ }, inline: labelInline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
202
206
  let labelRow;
203
207
  if (!isRadioCheck && !asFieldset && !labelHidden) {
204
- labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: labelInline ? 'start' : 'between', alignItems: 'end' }, item: { alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));
208
+ labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: labelInline ? 'start' : 'between', alignItems: 'end' }, item: { alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }, inline: labelInline, children: labelContent }));
205
209
  }
206
210
  else if (asFieldset && !labelHidden) {
207
211
  labelRow = (_jsx(Flex, { container: {
@@ -241,13 +245,13 @@ const FormField = forwardRef(function FormField(props, ref) {
241
245
  if (actions) {
242
246
  content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: labelInline ? 1 : undefined }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
243
247
  }
244
- let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, inline: labelInline, "$infoAbove": infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
248
+ let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, infoAbove: infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
245
249
  if (charLimitDisplay) {
246
250
  infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
247
251
  }
248
252
  if (hasSuggestion) {
249
253
  const focusables = getFocusables(consolidatedRef);
250
- infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, "$infoAbove": infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
254
+ infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, infoAbove: infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
251
255
  onResolveSuggestion(false);
252
256
  focusables[0]?.focus();
253
257
  }, "aria-label": `${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('no') }), _jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionAccept, onClick: () => {
@@ -270,11 +274,11 @@ const FormField = forwardRef(function FormField(props, ref) {
270
274
  if (asFieldset && info)
271
275
  descriptionIds.push(`${id}-info`);
272
276
  return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: {
273
- direction: inline ? 'row' : 'column',
274
- alignItems: inline ? 'center' : undefined,
277
+ direction: inline && !labelHidden ? 'row' : 'column',
278
+ alignItems: inline && !labelHidden ? 'center' : undefined,
275
279
  wrap: isRadioCheck || inline ? 'wrap' : undefined,
276
280
  ...container
277
- }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
281
+ }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, labelInline: labelInline, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
278
282
  onClear();
279
283
  }, children: t('clear_selection') }))] }));
280
284
  });
@@ -1 +1 @@
1
- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor,\n type FontSize\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n children: ReactElement | ReactElement[];\n /**\n * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n */\n id?: string;\n /**\n * Determines how the wrapping label should be rendered.\n * @default 'label'\n */\n labelAs?: LabelProps['as'];\n /**\n * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n */\n labelFor?: LabelProps['htmlFor'];\n /**\n * Sets the id of the label.\n * @default undefined\n */\n labelId?: LabelProps['id'];\n /**\n * Visually hides the label region.\n * @default false\n */\n labelHidden?: boolean;\n /**\n * Visually places the label after the input.\n * @default false\n */\n labelAfter?: boolean;\n /**\n * Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n */\n isRadioCheck?: boolean;\n /**\n * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n */\n as?: 'div' | 'fieldset' | ComponentType<any>;\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: boolean;\n /** Optionally utilized by Input or Select. */\n actions?: Action[];\n /** Enables Flex container prop pass through. */\n container?: ExcludeStrict<FlexProps['container'], true>;\n /** Character remaining count. Typically used on Textareas only */\n charLimitDisplay?: ReactNode;\n /** Id of additional describing element. */\n 'aria-describedby'?: string;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: () => void;\n /** Suppresses announcements for status changes. */\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & Pick<FormFieldProps, 'inline'> & { $infoAbove?: boolean }\n>(({ status, inline, $infoAbove, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n const labelFontSize = fontSizes[theme.components.text.primary['font-size'] as FontSize];\n\n return css`\n max-width: max-content;\n font-size: ${infoFontSize};\n word-break: break-word;\n\n ${inline &&\n css`\n padding-inline-start: calc(${labelFontSize} / ${infoFontSize} * 14ch);\n min-width: 100%;\n `}\n\n &:not(:empty) {\n ${$infoAbove\n ? css`\n margin-block-end: calc(0.25 * ${spacing});\n `\n : css`\n margin-block-start: calc(0.25 * ${spacing});\n `}\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { asFieldset: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0*\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n});\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string | null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n const labelInline = inline && !isRadioCheck;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset || Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string | undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() || undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center', gap: 0.5 }}\n inline={labelInline}\n $infoAbove={infoAbove}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n $infoAbove={infoAbove}\n >\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={`${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={`${t('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n wrap: isRadioCheck || inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset || !labelAfter) && labelRow}\n {!readOnly && infoAbove && infoContent}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && !infoAbove && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
1
+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n children: ReactElement | ReactElement[];\n /**\n * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n */\n id?: string;\n /**\n * Determines how the wrapping label should be rendered.\n * @default 'label'\n */\n labelAs?: LabelProps['as'];\n /**\n * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n */\n labelFor?: LabelProps['htmlFor'];\n /**\n * Sets the id of the label.\n * @default undefined\n */\n labelId?: LabelProps['id'];\n /**\n * Visually hides the label region.\n * @default false\n */\n labelHidden?: boolean;\n /**\n * Visually places the label after the input.\n * @default false\n */\n labelAfter?: boolean;\n /**\n * Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n */\n isRadioCheck?: boolean;\n /**\n * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n */\n as?: 'div' | 'fieldset' | ComponentType<any>;\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: boolean;\n /** Optionally utilized by Input or Select. */\n actions?: Action[];\n /** Enables Flex container prop pass through. */\n container?: ExcludeStrict<FlexProps['container'], true>;\n /** Character remaining count. Typically used on Textareas only */\n charLimitDisplay?: ReactNode;\n /** Id of additional describing element. */\n 'aria-describedby'?: string;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: () => void;\n /** Suppresses announcements for status changes. */\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & { infoAbove?: boolean }\n>(({ status, infoAbove, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n\n return css`\n font-size: ${infoFontSize};\n word-break: break-word;\n\n &:not(:empty) {\n ${infoAbove\n ? css`\n margin-block-end: calc(0.25 * ${spacing});\n `\n : css`\n margin-block-start: calc(0.25 * ${spacing});\n `}\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & {\n asFieldset: boolean;\n showAdditionalInfo: boolean;\n labelInline?: boolean;\n }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n labelInline,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0*\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n\n ${labelInline &&\n css`\n display: grid;\n grid-template-columns: 14ch 1fr;\n grid-template-rows: auto 1fr;\n align-items: start;\n\n ${StyledFlex}:has(> ${StyledLabel}), ${StyledFlex}:has(> ${StyledLabelRow}) {\n grid-row: span 2;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n});\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string | null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n const labelInline = inline && !isRadioCheck && !labelHidden;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={labelInline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: labelInline ? 'start' : 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset || Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string | undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() || undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center', gap: 0.5 }}\n infoAbove={infoAbove}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n infoAbove={infoAbove}\n >\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={`${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={`${t('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline && !labelHidden ? 'row' : 'column',\n alignItems: inline && !labelHidden ? 'center' : undefined,\n wrap: isRadioCheck || inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n labelInline={labelInline}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset || !labelAfter) && labelRow}\n {!readOnly && infoAbove && infoContent}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && !infoAbove && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
@@ -12,7 +12,7 @@ export const StyledFullscreen = styled.div(({ theme, fullscreen }) => {
12
12
  ${fullscreen &&
13
13
  css `
14
14
  --content-height-in-view: calc(
15
- 100vh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
15
+ 100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
16
16
  );
17
17
  position: fixed;
18
18
  z-index: ${theme.base['z-index'].backdrop};
@@ -1 +1 @@
1
- {"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useFocusTrap,\n usePopoverMap,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n 'div',\n {\n children: ReactNode;\n }\n> &\n TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n return css`\n ${fullscreen &&\n css`\n --content-height-in-view: calc(\n 100vh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n );\n position: fixed;\n z-index: ${theme.base['z-index'].backdrop};\n inset-inline: 0;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-hard-bottom-offset, 0);\n background: ${theme.base.palette['primary-background']};\n `}\n `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean | undefined, () => void] | undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n // Ensure easier/safer destructuring in use\n return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n parentJSX,\n parentElRef\n}: {\n parentJSX: ReactElement;\n parentElRef: RefObject<HTMLDivElement>;\n}) => {\n const { portalTarget } = useConfiguration();\n useFocusTrap(parentElRef);\n const { disableScroll, enableScroll } = useScrollToggle();\n\n useEffect(() => {\n disableScroll();\n return enableScroll;\n }, []);\n\n return portalTarget\n ? createPortal(\n <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n portalTarget\n )\n : null;\n};\n\nexport default withTestIds(\n forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n { children, testId, ...restProps },\n ref\n ) {\n const testIds = useTestIds(testId, getFullscreenTestIds);\n // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n const [fullscreen, setFullscreen] = useState<boolean | undefined>(undefined);\n\n const ctxValue: FullscreenContextValue = useMemo(() => {\n return [\n fullscreen,\n () => {\n setFullscreen(cur => !cur);\n }\n ];\n }, [fullscreen]);\n\n const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n const parentJSX = (\n <StyledFullscreen\n data-testid={testIds.root}\n data-fullscreen-enabled={fullscreen ? true : undefined}\n {...restProps}\n ref={parentElRef}\n fullscreen={!!fullscreen}\n data-popover-id={popoverId}\n >\n {children}\n </StyledFullscreen>\n );\n\n return (\n <FullscreenContext.Provider value={ctxValue}>\n {fullscreen && parentEl ? (\n <>\n {/* DOM element required for outer event management. */}\n <div ref={setTargetEl} style={{ display: 'none' }} />\n <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n </>\n ) : (\n parentJSX\n )}\n </FullscreenContext.Provider>\n );\n }),\n getFullscreenTestIds\n);\n"]}
1
+ {"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useFocusTrap,\n usePopoverMap,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n 'div',\n {\n children: ReactNode;\n }\n> &\n TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n return css`\n ${fullscreen &&\n css`\n --content-height-in-view: calc(\n 100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n );\n position: fixed;\n z-index: ${theme.base['z-index'].backdrop};\n inset-inline: 0;\n inset-block-start: var(--appshell-top-offset, 0);\n inset-block-end: var(--appshell-hard-bottom-offset, 0);\n background: ${theme.base.palette['primary-background']};\n `}\n `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean | undefined, () => void] | undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n // Ensure easier/safer destructuring in use\n return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n parentJSX,\n parentElRef\n}: {\n parentJSX: ReactElement;\n parentElRef: RefObject<HTMLDivElement>;\n}) => {\n const { portalTarget } = useConfiguration();\n useFocusTrap(parentElRef);\n const { disableScroll, enableScroll } = useScrollToggle();\n\n useEffect(() => {\n disableScroll();\n return enableScroll;\n }, []);\n\n return portalTarget\n ? createPortal(\n <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n portalTarget\n )\n : null;\n};\n\nexport default withTestIds(\n forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n { children, testId, ...restProps },\n ref\n ) {\n const testIds = useTestIds(testId, getFullscreenTestIds);\n // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n const [fullscreen, setFullscreen] = useState<boolean | undefined>(undefined);\n\n const ctxValue: FullscreenContextValue = useMemo(() => {\n return [\n fullscreen,\n () => {\n setFullscreen(cur => !cur);\n }\n ];\n }, [fullscreen]);\n\n const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n const parentJSX = (\n <StyledFullscreen\n data-testid={testIds.root}\n data-fullscreen-enabled={fullscreen ? true : undefined}\n {...restProps}\n ref={parentElRef}\n fullscreen={!!fullscreen}\n data-popover-id={popoverId}\n >\n {children}\n </StyledFullscreen>\n );\n\n return (\n <FullscreenContext.Provider value={ctxValue}>\n {fullscreen && parentEl ? (\n <>\n {/* DOM element required for outer event management. */}\n <div ref={setTargetEl} style={{ display: 'none' }} />\n <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n </>\n ) : (\n parentJSX\n )}\n </FullscreenContext.Provider>\n );\n }),\n getFullscreenTestIds\n);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;YA8C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;YAiE1B,CAAC;AAMH,QAAA,MAAM,IAAI,EAmGJ,yBAAyB,CAAC,SAAS,CAAC,CAAC;AAE3C,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;YA8C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;YAiE1B,CAAC;AAMH,QAAA,MAAM,IAAI,EAqGJ,yBAAyB,CAAC,SAAS,CAAC,CAAC;AAE3C,eAAe,IAAI,CAAC"}
@@ -176,7 +176,7 @@ const Icon = forwardRef(function Icon({ set: setProp, name, size, 'aria-label':
176
176
  })();
177
177
  return () => controller.abort();
178
178
  }, [name, set]);
179
- return typeof restProps.background === 'string' ? (_jsx(StyledIconShape, { ...restProps, background: restProps.background, foreground: restProps.foreground, shape: restProps.shape, size: size, ref: ref, children: _jsx(StyledIcon, { role: role ?? (ariaLabel === undefined ? 'presentation' : 'img'), "aria-label": ariaLabel, viewBox: iconDef.viewBox, children: _jsx(iconDef.Component, {}) }) })) : (_jsx(StyledIcon, { ...restProps, role: role ?? (ariaLabel === undefined ? 'presentation' : 'img'), "aria-label": ariaLabel, viewBox: iconDef.viewBox, size: size, ref: ref, children: _jsx(iconDef.Component, {}) }));
179
+ return typeof restProps.background === 'string' ? (_jsx(StyledIconShape, { ...restProps, background: restProps.background, foreground: restProps.foreground, shape: restProps.shape, size: size, ref: ref, children: _jsx(StyledIcon, { role: role ?? (ariaLabel === undefined ? 'presentation' : 'img'), "aria-label": ariaLabel, viewBox: iconDef.viewBox, "data-icon-name": name, children: _jsx(iconDef.Component, {}) }) })) : (_jsx(StyledIcon, { ...restProps, role: role ?? (ariaLabel === undefined ? 'presentation' : 'img'), "aria-label": ariaLabel, viewBox: iconDef.viewBox, size: size, "data-icon-name": name, ref: ref, children: _jsx(iconDef.Component, {}) }));
180
180
  });
181
181
  export default Icon;
182
182
  //# sourceMappingURL=Icon.js.map