@bcgov/design-system-react-components 0.4.1-rc1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +185 -181
- package/dist/cjs/index.cjs +1501 -836
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/Accordion/Accordion.d.ts +6 -0
- package/dist/cjs/types/components/Accordion/index.d.ts +2 -0
- package/dist/cjs/types/components/AccordionGroup/AccordionGroup.d.ts +7 -0
- package/dist/cjs/types/components/AccordionGroup/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +2 -0
- package/dist/esm/index.js +1500 -837
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Accordion/Accordion.d.ts +6 -0
- package/dist/esm/types/components/Accordion/index.d.ts +2 -0
- package/dist/esm/types/components/AccordionGroup/AccordionGroup.d.ts +7 -0
- package/dist/esm/types/components/AccordionGroup/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +2 -0
- package/dist/index.d.ts +13 -2
- package/package.json +86 -86
package/dist/esm/index.js
CHANGED
|
@@ -29,11 +29,8 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z$m = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
33
|
-
styleInject(css_248z$
|
|
34
|
-
|
|
35
|
-
var css_248z$l = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n max-width: 1100px;\n padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n\n.bcds-Alert-Banner--Icon {\n align-self: first baseline;\n justify-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n display: inline-flex;\n gap: var(--layout-margin-medium);\n align-items: first baseline;\n flex-grow: 1;\n flex-wrap: wrap;\n font: var(--typography-regular-body);\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon {\n align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n background-color: var(--theme-gray-110);\n}\n";
|
|
36
|
-
styleInject(css_248z$l);
|
|
32
|
+
var css_248z$o = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /* Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
33
|
+
styleInject(css_248z$o);
|
|
37
34
|
|
|
38
35
|
/*
|
|
39
36
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -390,11 +387,8 @@ class $681cc3c98f569e39$export$dc064fe9e59310fd extends $681cc3c98f569e39$export
|
|
|
390
387
|
setAttributeNS() {}
|
|
391
388
|
removeAttribute() {}
|
|
392
389
|
constructor(type, ownerDocument){
|
|
393
|
-
super(ownerDocument)
|
|
394
|
-
this.
|
|
395
|
-
;
|
|
396
|
-
this._index = 0;
|
|
397
|
-
this.hasSetProps = false;
|
|
390
|
+
super(ownerDocument), this.nodeType = 8 // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
|
|
391
|
+
, this._index = 0, this.hasSetProps = false;
|
|
398
392
|
this.node = new ($23b9f4fcf0fe224b$export$d68d59712b04d9d1)(type, `react-aria-${++ownerDocument.nodeId}`);
|
|
399
393
|
// Start a transaction so that no updates are emitted from the collection
|
|
400
394
|
// until the props for this node are set. We don't know the real id for the
|
|
@@ -490,18 +484,8 @@ class $681cc3c98f569e39$export$b34a105447964f9f extends $681cc3c98f569e39$export
|
|
|
490
484
|
}
|
|
491
485
|
constructor(collection){
|
|
492
486
|
// @ts-ignore
|
|
493
|
-
super(null)
|
|
494
|
-
this.
|
|
495
|
-
;
|
|
496
|
-
this.ownerDocument = this;
|
|
497
|
-
this.dirtyNodes = new Set();
|
|
498
|
-
this.isSSR = false;
|
|
499
|
-
this.nodeId = 0;
|
|
500
|
-
this.nodesByProps = new WeakMap();
|
|
501
|
-
this.isMounted = true;
|
|
502
|
-
this.mutatedNodes = new Set();
|
|
503
|
-
this.subscriptions = new Set();
|
|
504
|
-
this.transactionCount = 0;
|
|
487
|
+
super(null), this.nodeType = 11 // DOCUMENT_FRAGMENT_NODE
|
|
488
|
+
, this.ownerDocument = this, this.dirtyNodes = new Set(), this.isSSR = false, this.nodeId = 0, this.nodesByProps = new WeakMap(), this.isMounted = true, this.mutatedNodes = new Set(), this.subscriptions = new Set(), this.transactionCount = 0;
|
|
505
489
|
this.collection = collection;
|
|
506
490
|
this.collectionMutated = true;
|
|
507
491
|
}
|
|
@@ -533,9 +517,7 @@ function $e948873055cbafe4$export$727c8fc270210f13(props) {
|
|
|
533
517
|
var _rendered_props_id, _ref;
|
|
534
518
|
// @ts-ignore
|
|
535
519
|
let key = (_ref = (_rendered_props_id = rendered.props.id) !== null && _rendered_props_id !== void 0 ? _rendered_props_id : item.key) !== null && _ref !== void 0 ? _ref : item.id;
|
|
536
|
-
// eslint-disable-next-line max-depth
|
|
537
520
|
if (key == null) throw new Error('Could not determine key for item');
|
|
538
|
-
// eslint-disable-next-line max-depth
|
|
539
521
|
if (idScope) key = idScope + ':' + key;
|
|
540
522
|
// Note: only works if wrapped Item passes through id...
|
|
541
523
|
rendered = (cloneElement)(rendered, addIdAndValue ? {
|
|
@@ -635,7 +617,6 @@ function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
|
|
|
635
617
|
return defaultId || `${prefix}-${counter}`;
|
|
636
618
|
}
|
|
637
619
|
function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
|
|
638
|
-
// @ts-ignore
|
|
639
620
|
let id = ($dbSRa$react).useId();
|
|
640
621
|
let [didSSR] = (useState)($b5e257d569688ac6$export$535bd6ca7f90a273());
|
|
641
622
|
let prefix = didSSR || process.env.NODE_ENV === 'test' ? 'react-aria' : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
|
|
@@ -830,7 +811,16 @@ function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
|
|
|
830
811
|
let updateValue = (useCallback)((val)=>{
|
|
831
812
|
nextId.current = val;
|
|
832
813
|
}, []);
|
|
833
|
-
if ($bdb11010cef70236$var$canUseDOM)
|
|
814
|
+
if ($bdb11010cef70236$var$canUseDOM) {
|
|
815
|
+
// TS not smart enough to know that `has` means the value exists
|
|
816
|
+
if ($bdb11010cef70236$var$idsUpdaterMap.has(res) && !$bdb11010cef70236$var$idsUpdaterMap.get(res).includes(updateValue)) $bdb11010cef70236$var$idsUpdaterMap.set(res, [
|
|
817
|
+
...$bdb11010cef70236$var$idsUpdaterMap.get(res),
|
|
818
|
+
updateValue
|
|
819
|
+
]);
|
|
820
|
+
else $bdb11010cef70236$var$idsUpdaterMap.set(res, [
|
|
821
|
+
updateValue
|
|
822
|
+
]);
|
|
823
|
+
}
|
|
834
824
|
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
835
825
|
let r = res;
|
|
836
826
|
return ()=>{
|
|
@@ -852,14 +842,14 @@ function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
|
|
|
852
842
|
}
|
|
853
843
|
function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
|
|
854
844
|
if (idA === idB) return idA;
|
|
855
|
-
let
|
|
856
|
-
if (
|
|
857
|
-
|
|
845
|
+
let setIdsA = $bdb11010cef70236$var$idsUpdaterMap.get(idA);
|
|
846
|
+
if (setIdsA) {
|
|
847
|
+
setIdsA.forEach((fn)=>fn(idB));
|
|
858
848
|
return idB;
|
|
859
849
|
}
|
|
860
|
-
let
|
|
861
|
-
if (
|
|
862
|
-
|
|
850
|
+
let setIdsB = $bdb11010cef70236$var$idsUpdaterMap.get(idB);
|
|
851
|
+
if (setIdsB) {
|
|
852
|
+
setIdsB.forEach((fn)=>fn(idA));
|
|
863
853
|
return idA;
|
|
864
854
|
}
|
|
865
855
|
return idB;
|
|
@@ -1038,7 +1028,7 @@ function $7215afc6de606d6b$var$supportsPreventScroll() {
|
|
|
1038
1028
|
return true;
|
|
1039
1029
|
}
|
|
1040
1030
|
});
|
|
1041
|
-
} catch
|
|
1031
|
+
} catch {
|
|
1042
1032
|
// Ignore
|
|
1043
1033
|
}
|
|
1044
1034
|
}
|
|
@@ -1200,8 +1190,10 @@ function $ea8dcbcb9ea1b556$var$openSyntheticLink(target, modifiers) {
|
|
|
1200
1190
|
}
|
|
1201
1191
|
function $ea8dcbcb9ea1b556$export$bdc77b0c0a3a85d6(props) {
|
|
1202
1192
|
let router = $ea8dcbcb9ea1b556$export$9a302a45f65d0572();
|
|
1193
|
+
var _props_href;
|
|
1194
|
+
const href = router.useHref((_props_href = props.href) !== null && _props_href !== void 0 ? _props_href : '');
|
|
1203
1195
|
return {
|
|
1204
|
-
'data-href': props.href ?
|
|
1196
|
+
'data-href': props.href ? href : undefined,
|
|
1205
1197
|
'data-target': props.target,
|
|
1206
1198
|
'data-rel': props.rel,
|
|
1207
1199
|
'data-download': props.download,
|
|
@@ -1211,8 +1203,10 @@ function $ea8dcbcb9ea1b556$export$bdc77b0c0a3a85d6(props) {
|
|
|
1211
1203
|
}
|
|
1212
1204
|
function $ea8dcbcb9ea1b556$export$7e924b3091a3bd18(props) {
|
|
1213
1205
|
let router = $ea8dcbcb9ea1b556$export$9a302a45f65d0572();
|
|
1206
|
+
var _props_href;
|
|
1207
|
+
const href = router.useHref((_props_href = props === null || props === void 0 ? void 0 : props.href) !== null && _props_href !== void 0 ? _props_href : '');
|
|
1214
1208
|
return {
|
|
1215
|
-
href: (props === null || props === void 0 ? void 0 : props.href) ?
|
|
1209
|
+
href: (props === null || props === void 0 ? void 0 : props.href) ? href : undefined,
|
|
1216
1210
|
target: props === null || props === void 0 ? void 0 : props.target,
|
|
1217
1211
|
rel: props === null || props === void 0 ? void 0 : props.rel,
|
|
1218
1212
|
download: props === null || props === void 0 ? void 0 : props.download,
|
|
@@ -1335,7 +1329,6 @@ function $03deb23ff14920c4$export$4eaf04e54aa8eed6() {
|
|
|
1335
1329
|
}, [
|
|
1336
1330
|
removeGlobalListener
|
|
1337
1331
|
]);
|
|
1338
|
-
// eslint-disable-next-line arrow-body-style
|
|
1339
1332
|
(useEffect)(()=>{
|
|
1340
1333
|
return removeAllGlobalListeners;
|
|
1341
1334
|
}, [
|
|
@@ -1502,6 +1495,7 @@ function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
|
|
|
1502
1495
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1503
1496
|
* governing permissions and limitations under the License.
|
|
1504
1497
|
*/ function $cc38e7bd3fc7b213$export$2bb74740c4e19def(node, checkForOverflow) {
|
|
1498
|
+
if (!node) return false;
|
|
1505
1499
|
let style = window.getComputedStyle(node);
|
|
1506
1500
|
let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
|
|
1507
1501
|
if (isScrollable && checkForOverflow) isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
|
|
@@ -1558,7 +1552,6 @@ function $a40c673dc9f6d9c7$export$94ed1c92c7beeb22(node, checkForOverflow) {
|
|
|
1558
1552
|
* governing permissions and limitations under the License.
|
|
1559
1553
|
*/
|
|
1560
1554
|
|
|
1561
|
-
// @ts-ignore
|
|
1562
1555
|
let $5df64b3807dc15ee$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
1563
1556
|
function $5df64b3807dc15ee$export$d699905dd57c73ca() {
|
|
1564
1557
|
let isSSR = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
|
|
@@ -1723,7 +1716,7 @@ function $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollView, element) {
|
|
|
1723
1716
|
return sum;
|
|
1724
1717
|
}
|
|
1725
1718
|
function $2f04cbc44ee30ce0$export$c826860796309d1b(targetElement, opts) {
|
|
1726
|
-
if (document.contains(targetElement)) {
|
|
1719
|
+
if (targetElement && document.contains(targetElement)) {
|
|
1727
1720
|
let root = document.scrollingElement || document.documentElement;
|
|
1728
1721
|
let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
|
|
1729
1722
|
// If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
|
|
@@ -2400,10 +2393,6 @@ function $e1995378a142960e$var$CollectionRoot({ children: children }) {
|
|
|
2400
2393
|
*/
|
|
2401
2394
|
|
|
2402
2395
|
const $7135fc7d473fd974$export$d40e14dec8b060a8 = /*#__PURE__*/ (createContext)(null);
|
|
2403
|
-
const $7135fc7d473fd974$export$6e2c8f0811a474ce = /*#__PURE__*/ ($e1995378a142960e$export$e953bb1cd0f19726)('section', (props, ref, section)=>{
|
|
2404
|
-
let { render: render } = (useContext)($7135fc7d473fd974$export$d40e14dec8b060a8);
|
|
2405
|
-
return render(props, ref, section);
|
|
2406
|
-
});
|
|
2407
2396
|
const $7135fc7d473fd974$export$a164736487e3f0ae = {
|
|
2408
2397
|
CollectionRoot ({ collection: collection, renderDropIndicator: renderDropIndicator }) {
|
|
2409
2398
|
return $7135fc7d473fd974$var$useCollectionRender(collection, null, renderDropIndicator);
|
|
@@ -2662,7 +2651,6 @@ let $14c0b72509d70225$var$modifiedElementMap = new WeakMap();
|
|
|
2662
2651
|
function $14c0b72509d70225$export$16a4697467175487(target) {
|
|
2663
2652
|
if (($c87311424ea30a05$export$fedb369cb70207f1)()) {
|
|
2664
2653
|
if ($14c0b72509d70225$var$state === 'default') {
|
|
2665
|
-
// eslint-disable-next-line no-restricted-globals
|
|
2666
2654
|
const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(target);
|
|
2667
2655
|
$14c0b72509d70225$var$savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
|
|
2668
2656
|
documentObject.documentElement.style.webkitUserSelect = 'none';
|
|
@@ -2689,7 +2677,6 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
|
|
|
2689
2677
|
($bbed8b41f857bcc0$export$24490316f764c430)(()=>{
|
|
2690
2678
|
// Avoid race conditions
|
|
2691
2679
|
if ($14c0b72509d70225$var$state === 'restoring') {
|
|
2692
|
-
// eslint-disable-next-line no-restricted-globals
|
|
2693
2680
|
const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(target);
|
|
2694
2681
|
if (documentObject.documentElement.style.webkitUserSelect === 'none') documentObject.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || '';
|
|
2695
2682
|
$14c0b72509d70225$var$savedUserSelect = '';
|
|
@@ -3028,7 +3015,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
3028
3015
|
}
|
|
3029
3016
|
// Due to browser inconsistencies, especially on mobile browsers, we prevent
|
|
3030
3017
|
// default on pointer down and handle focusing the pressable element ourselves.
|
|
3031
|
-
if ($f6c31cce2adf654f$var$
|
|
3018
|
+
if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
|
|
3032
3019
|
state.pointerType = e.pointerType;
|
|
3033
3020
|
let shouldStopPropagation = true;
|
|
3034
3021
|
if (!state.isPressed) {
|
|
@@ -3051,7 +3038,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
3051
3038
|
// Chrome and Firefox on touch Windows devices require mouse down events
|
|
3052
3039
|
// to be canceled in addition to pointer events, or an extra asynchronous
|
|
3053
3040
|
// focus event will be fired.
|
|
3054
|
-
if ($f6c31cce2adf654f$var$
|
|
3041
|
+
if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
|
|
3055
3042
|
e.stopPropagation();
|
|
3056
3043
|
}
|
|
3057
3044
|
};
|
|
@@ -3089,8 +3076,23 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
3089
3076
|
state.pointerType = null;
|
|
3090
3077
|
removeAllGlobalListeners();
|
|
3091
3078
|
if (!allowTextSelectionOnPress) ($14c0b72509d70225$export$b0d6fa1ab32e3295)(state.target);
|
|
3079
|
+
// Prevent subsequent touchend event from triggering onClick on unrelated elements on Android. See below.
|
|
3080
|
+
// Both 'touch' and 'pen' pointerTypes trigger onTouchEnd, but 'mouse' does not.
|
|
3081
|
+
if ('ontouchend' in state.target && e.pointerType !== 'mouse') addGlobalListener(state.target, 'touchend', onTouchEnd, {
|
|
3082
|
+
once: true
|
|
3083
|
+
});
|
|
3092
3084
|
}
|
|
3093
3085
|
};
|
|
3086
|
+
// This is a workaround for an Android Chrome/Firefox issue where click events are fired on an incorrect element
|
|
3087
|
+
// if the original target is removed during onPointerUp (before onClick).
|
|
3088
|
+
// https://github.com/adobe/react-spectrum/issues/1513
|
|
3089
|
+
// https://issues.chromium.org/issues/40732224
|
|
3090
|
+
// Note: this event must be registered directly on the element, not via React props in order to work.
|
|
3091
|
+
// https://github.com/facebook/react/issues/9809
|
|
3092
|
+
let onTouchEnd = (e)=>{
|
|
3093
|
+
// Don't preventDefault if we actually want the default (e.g. submit/link click).
|
|
3094
|
+
if ($f6c31cce2adf654f$var$shouldPreventDefaultUp(e.currentTarget)) e.preventDefault();
|
|
3095
|
+
};
|
|
3094
3096
|
let onPointerCancel = (e)=>{
|
|
3095
3097
|
cancel(e);
|
|
3096
3098
|
};
|
|
@@ -3105,7 +3107,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
3105
3107
|
if (e.button !== 0 || !e.currentTarget.contains(e.target)) return;
|
|
3106
3108
|
// Due to browser inconsistencies, especially on mobile browsers, we prevent
|
|
3107
3109
|
// default on mouse down and handle focusing the pressable element ourselves.
|
|
3108
|
-
if ($f6c31cce2adf654f$var$
|
|
3110
|
+
if ($f6c31cce2adf654f$var$shouldPreventDefaultDown(e.currentTarget)) e.preventDefault();
|
|
3109
3111
|
if (state.ignoreEmulatedMouseEvents) {
|
|
3110
3112
|
e.stopPropagation();
|
|
3111
3113
|
return;
|
|
@@ -3246,7 +3248,6 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
3246
3248
|
triggerPressUp
|
|
3247
3249
|
]);
|
|
3248
3250
|
// Remove user-select: none in case component unmounts immediately after pressStart
|
|
3249
|
-
// eslint-disable-next-line arrow-body-style
|
|
3250
3251
|
(useEffect)(()=>{
|
|
3251
3252
|
return ()=>{
|
|
3252
3253
|
var _ref_current_target;
|
|
@@ -3342,16 +3343,20 @@ function $f6c31cce2adf654f$var$isOverTarget(point, target) {
|
|
|
3342
3343
|
let pointRect = $f6c31cce2adf654f$var$getPointClientRect(point);
|
|
3343
3344
|
return $f6c31cce2adf654f$var$areRectanglesOverlapping(rect, pointRect);
|
|
3344
3345
|
}
|
|
3345
|
-
function $f6c31cce2adf654f$var$
|
|
3346
|
+
function $f6c31cce2adf654f$var$shouldPreventDefaultDown(target) {
|
|
3346
3347
|
// We cannot prevent default if the target is a draggable element.
|
|
3347
3348
|
return !(target instanceof HTMLElement) || !target.hasAttribute('draggable');
|
|
3348
3349
|
}
|
|
3349
|
-
function $f6c31cce2adf654f$var$
|
|
3350
|
-
if (target instanceof HTMLInputElement) return
|
|
3350
|
+
function $f6c31cce2adf654f$var$shouldPreventDefaultUp(target) {
|
|
3351
|
+
if (target instanceof HTMLInputElement) return false;
|
|
3351
3352
|
if (target instanceof HTMLButtonElement) return target.type !== 'submit' && target.type !== 'reset';
|
|
3352
3353
|
if ($f6c31cce2adf654f$var$isHTMLAnchorLink(target)) return false;
|
|
3353
3354
|
return true;
|
|
3354
3355
|
}
|
|
3356
|
+
function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
|
|
3357
|
+
if (target instanceof HTMLInputElement) return !$f6c31cce2adf654f$var$isValidInputKey(target, key);
|
|
3358
|
+
return $f6c31cce2adf654f$var$shouldPreventDefaultUp(target);
|
|
3359
|
+
}
|
|
3355
3360
|
const $f6c31cce2adf654f$var$nonTextInputTypes = new Set([
|
|
3356
3361
|
'checkbox',
|
|
3357
3362
|
'radio',
|
|
@@ -3461,7 +3466,6 @@ function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
|
|
|
3461
3466
|
observer: null
|
|
3462
3467
|
});
|
|
3463
3468
|
// Clean up MutationObserver on unmount. See below.
|
|
3464
|
-
// eslint-disable-next-line arrow-body-style
|
|
3465
3469
|
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
3466
3470
|
const state = stateRef.current;
|
|
3467
3471
|
return ()=>{
|
|
@@ -4559,7 +4563,6 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
|
|
|
4559
4563
|
contain
|
|
4560
4564
|
]);
|
|
4561
4565
|
// This is a useLayoutEffect so it is guaranteed to run before our async synthetic blur
|
|
4562
|
-
// eslint-disable-next-line arrow-body-style
|
|
4563
4566
|
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
4564
4567
|
return ()=>{
|
|
4565
4568
|
if (raf.current) cancelAnimationFrame(raf.current);
|
|
@@ -4601,12 +4604,12 @@ function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
|
|
|
4601
4604
|
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
|
|
4602
4605
|
if (element != null && !scroll) try {
|
|
4603
4606
|
(0, $6a99195332edec8b$export$80f3e147d781571c)(element);
|
|
4604
|
-
} catch
|
|
4607
|
+
} catch {
|
|
4605
4608
|
// ignore
|
|
4606
4609
|
}
|
|
4607
4610
|
else if (element != null) try {
|
|
4608
4611
|
element.focus();
|
|
4609
|
-
} catch
|
|
4612
|
+
} catch {
|
|
4610
4613
|
// ignore
|
|
4611
4614
|
}
|
|
4612
4615
|
}
|
|
@@ -4713,7 +4716,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
4713
4716
|
let onKeyDown = (e)=>{
|
|
4714
4717
|
if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
|
|
4715
4718
|
let focusedElement = ownerDocument.activeElement;
|
|
4716
|
-
if (!$9bf71ea28793e738$var$
|
|
4719
|
+
if (!$9bf71ea28793e738$var$isElementInChildScope(focusedElement, scopeRef) || !$9bf71ea28793e738$var$shouldRestoreFocus(scopeRef)) return;
|
|
4717
4720
|
let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
|
|
4718
4721
|
if (!treeNode) return;
|
|
4719
4722
|
let nodeToRestore = treeNode.nodeToRestore;
|
|
@@ -4730,11 +4733,11 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
4730
4733
|
}
|
|
4731
4734
|
// If there is no next element, or it is outside the current scope, move focus to the
|
|
4732
4735
|
// next element after the node to restore to instead.
|
|
4733
|
-
if ((!nextElement || !$9bf71ea28793e738$var$
|
|
4736
|
+
if ((!nextElement || !$9bf71ea28793e738$var$isElementInChildScope(nextElement, scopeRef)) && nodeToRestore) {
|
|
4734
4737
|
walker.currentNode = nodeToRestore;
|
|
4735
4738
|
// Skip over elements within the scope, in case the scope immediately follows the node to restore.
|
|
4736
4739
|
do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
|
|
4737
|
-
while ($9bf71ea28793e738$var$
|
|
4740
|
+
while ($9bf71ea28793e738$var$isElementInChildScope(nextElement, scopeRef));
|
|
4738
4741
|
e.preventDefault();
|
|
4739
4742
|
e.stopPropagation();
|
|
4740
4743
|
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
|
|
@@ -4767,8 +4770,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
|
|
|
4767
4770
|
if (!treeNode) return;
|
|
4768
4771
|
let nodeToRestore = treeNode.nodeToRestore;
|
|
4769
4772
|
// if we already lost focus to the body and this was the active scope, then we should attempt to restore
|
|
4770
|
-
if (restoreFocus && nodeToRestore &&
|
|
4771
|
-
($9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, scopeRef.current) || ownerDocument.activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
|
|
4773
|
+
if (restoreFocus && nodeToRestore && (ownerDocument.activeElement && $9bf71ea28793e738$var$isElementInChildScope(ownerDocument.activeElement, scopeRef) || ownerDocument.activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
|
|
4772
4774
|
// freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
|
|
4773
4775
|
let clonedTree = $9bf71ea28793e738$export$d06fae2ee68b101e.clone();
|
|
4774
4776
|
requestAnimationFrame(()=>{
|
|
@@ -5090,7 +5092,6 @@ const $148a7a147e38ea7f$var$RTL_LANGS = new Set([
|
|
|
5090
5092
|
]);
|
|
5091
5093
|
function $148a7a147e38ea7f$export$702d680b21cbd764(localeString) {
|
|
5092
5094
|
// If the Intl.Locale API is available, use it to get the locale's text direction.
|
|
5093
|
-
// @ts-ignore
|
|
5094
5095
|
if (Intl.Locale) {
|
|
5095
5096
|
let locale = new Intl.Locale(localeString).maximize();
|
|
5096
5097
|
// Use the text info object to get the direction if possible.
|
|
@@ -5125,11 +5126,10 @@ const $1e5a04cdaf7d1af8$var$localeSymbol = Symbol.for('react-aria.i18n.locale');
|
|
|
5125
5126
|
function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
|
|
5126
5127
|
let locale = typeof window !== 'undefined' && window[$1e5a04cdaf7d1af8$var$localeSymbol] || typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US';
|
|
5127
5128
|
try {
|
|
5128
|
-
// @ts-ignore
|
|
5129
5129
|
Intl.DateTimeFormat.supportedLocalesOf([
|
|
5130
5130
|
locale
|
|
5131
5131
|
]);
|
|
5132
|
-
} catch
|
|
5132
|
+
} catch {
|
|
5133
5133
|
locale = 'en-US';
|
|
5134
5134
|
}
|
|
5135
5135
|
return {
|
|
@@ -5375,8 +5375,7 @@ function $325a3faab7a68acd$export$a16aca283550c30d(options) {
|
|
|
5375
5375
|
|
|
5376
5376
|
|
|
5377
5377
|
function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
|
|
5378
|
-
let { elementType: elementType = 'button', isDisabled: isDisabled, onPress: onPress, onPressStart: onPressStart, onPressEnd: onPressEnd, onPressUp: onPressUp, onPressChange: onPressChange, preventFocusOnPress: // @ts-ignore - undocumented
|
|
5379
|
-
preventFocusOnPress, allowFocusWhenDisabled: // @ts-ignore - undocumented
|
|
5378
|
+
let { elementType: elementType = 'button', isDisabled: isDisabled, onPress: onPress, onPressStart: onPressStart, onPressEnd: onPressEnd, onPressUp: onPressUp, onPressChange: onPressChange, preventFocusOnPress: preventFocusOnPress, allowFocusWhenDisabled: // @ts-ignore - undocumented
|
|
5380
5379
|
allowFocusWhenDisabled, // @ts-ignore
|
|
5381
5380
|
onClick: deprecatedOnClick, href: href, target: target, rel: rel, type: type = 'button' } = props;
|
|
5382
5381
|
let additionalProps;
|
|
@@ -5387,7 +5386,7 @@ function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
|
|
|
5387
5386
|
else additionalProps = {
|
|
5388
5387
|
role: 'button',
|
|
5389
5388
|
tabIndex: isDisabled ? undefined : 0,
|
|
5390
|
-
href: elementType === 'a' && isDisabled ?
|
|
5389
|
+
href: elementType === 'a' && !isDisabled ? href : undefined,
|
|
5391
5390
|
target: elementType === 'a' ? target : undefined,
|
|
5392
5391
|
type: elementType === 'input' ? type : undefined,
|
|
5393
5392
|
disabled: elementType === 'input' ? isDisabled : undefined,
|
|
@@ -5439,8 +5438,20 @@ function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
|
|
|
5439
5438
|
*/ /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */ const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7000;
|
|
5440
5439
|
let $319e236875307eab$var$liveAnnouncer = null;
|
|
5441
5440
|
function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
|
|
5442
|
-
if (!$319e236875307eab$var$liveAnnouncer)
|
|
5443
|
-
|
|
5441
|
+
if (!$319e236875307eab$var$liveAnnouncer) {
|
|
5442
|
+
$319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
|
|
5443
|
+
// wait for the live announcer regions to be added to the dom, then announce
|
|
5444
|
+
// otherwise Safari won't announce the message if it's added too quickly
|
|
5445
|
+
// found most times less than 100ms were not consistent when announcing with Safari
|
|
5446
|
+
// IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
|
|
5447
|
+
// https://github.com/reactwg/react-18/discussions/102
|
|
5448
|
+
// if we're in a test environment, announce without waiting
|
|
5449
|
+
// @ts-ignore
|
|
5450
|
+
if (!(typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined')) setTimeout(()=>{
|
|
5451
|
+
if ($319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.isAttached()) $319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
5452
|
+
}, 100);
|
|
5453
|
+
else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
5454
|
+
} else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
|
|
5444
5455
|
}
|
|
5445
5456
|
// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
|
|
5446
5457
|
// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
|
|
@@ -5449,6 +5460,10 @@ function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'ass
|
|
|
5449
5460
|
// is simple enough to implement without React, so that's what we do here.
|
|
5450
5461
|
// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638
|
|
5451
5462
|
class $319e236875307eab$var$LiveAnnouncer {
|
|
5463
|
+
isAttached() {
|
|
5464
|
+
var _this_node;
|
|
5465
|
+
return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
|
|
5466
|
+
}
|
|
5452
5467
|
createLog(ariaLive) {
|
|
5453
5468
|
let node = document.createElement('div');
|
|
5454
5469
|
node.setAttribute('role', 'log');
|
|
@@ -5462,146 +5477,52 @@ class $319e236875307eab$var$LiveAnnouncer {
|
|
|
5462
5477
|
this.node = null;
|
|
5463
5478
|
}
|
|
5464
5479
|
announce(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
|
|
5480
|
+
var _this_assertiveLog, _this_politeLog;
|
|
5465
5481
|
if (!this.node) return;
|
|
5466
5482
|
let node = document.createElement('div');
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5483
|
+
if (typeof message === 'object') {
|
|
5484
|
+
// To read an aria-labelledby, the element must have an appropriate role, such as img.
|
|
5485
|
+
node.setAttribute('role', 'img');
|
|
5486
|
+
node.setAttribute('aria-labelledby', message['aria-labelledby']);
|
|
5487
|
+
} else node.textContent = message;
|
|
5488
|
+
if (assertiveness === 'assertive') (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
|
|
5489
|
+
else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
|
|
5470
5490
|
if (message !== '') setTimeout(()=>{
|
|
5471
5491
|
node.remove();
|
|
5472
5492
|
}, timeout);
|
|
5473
5493
|
}
|
|
5474
5494
|
clear(assertiveness) {
|
|
5475
5495
|
if (!this.node) return;
|
|
5476
|
-
if (!assertiveness || assertiveness === 'assertive') this.assertiveLog.innerHTML = '';
|
|
5477
|
-
if (!assertiveness || assertiveness === 'polite') this.politeLog.innerHTML = '';
|
|
5496
|
+
if ((!assertiveness || assertiveness === 'assertive') && this.assertiveLog) this.assertiveLog.innerHTML = '';
|
|
5497
|
+
if ((!assertiveness || assertiveness === 'polite') && this.politeLog) this.politeLog.innerHTML = '';
|
|
5478
5498
|
}
|
|
5479
5499
|
constructor(){
|
|
5480
|
-
this.node =
|
|
5481
|
-
this.
|
|
5482
|
-
|
|
5483
|
-
|
|
5484
|
-
|
|
5485
|
-
|
|
5486
|
-
|
|
5487
|
-
|
|
5488
|
-
|
|
5489
|
-
|
|
5490
|
-
|
|
5491
|
-
|
|
5492
|
-
|
|
5493
|
-
|
|
5494
|
-
|
|
5495
|
-
|
|
5496
|
-
|
|
5497
|
-
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
5505
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
5506
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5507
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
5508
|
-
*
|
|
5509
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
5510
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
5511
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
5512
|
-
* governing permissions and limitations under the License.
|
|
5513
|
-
*/
|
|
5514
|
-
|
|
5515
|
-
|
|
5516
|
-
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
5517
|
-
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
5518
|
-
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
5519
|
-
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
5520
|
-
if (validationBehavior === 'native' && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
5521
|
-
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
|
|
5522
|
-
ref.current.setCustomValidity(errorMessage);
|
|
5523
|
-
// Prevent default tooltip for validation message.
|
|
5524
|
-
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
5525
|
-
if (!ref.current.hasAttribute('title')) ref.current.title = '';
|
|
5526
|
-
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
5527
|
-
}
|
|
5528
|
-
});
|
|
5529
|
-
let onReset = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
|
|
5530
|
-
state.resetValidation();
|
|
5531
|
-
});
|
|
5532
|
-
let onInvalid = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((e)=>{
|
|
5533
|
-
var _ref_current;
|
|
5534
|
-
// Only commit validation if we are not already displaying one.
|
|
5535
|
-
// This avoids clearing server errors that the user didn't actually fix.
|
|
5536
|
-
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
5537
|
-
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
5538
|
-
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
5539
|
-
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
5540
|
-
var _ref_current1;
|
|
5541
|
-
if (focus) focus();
|
|
5542
|
-
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
5543
|
-
// Always show focus ring.
|
|
5544
|
-
($507fabe10e71c6fb$export$8397ddfc504fdb9a)('keyboard');
|
|
5500
|
+
this.node = null;
|
|
5501
|
+
this.assertiveLog = null;
|
|
5502
|
+
this.politeLog = null;
|
|
5503
|
+
if (typeof document !== 'undefined') {
|
|
5504
|
+
this.node = document.createElement('div');
|
|
5505
|
+
this.node.dataset.liveAnnouncer = 'true';
|
|
5506
|
+
// copied from VisuallyHidden
|
|
5507
|
+
Object.assign(this.node.style, {
|
|
5508
|
+
border: 0,
|
|
5509
|
+
clip: 'rect(0 0 0 0)',
|
|
5510
|
+
clipPath: 'inset(50%)',
|
|
5511
|
+
height: '1px',
|
|
5512
|
+
margin: '-1px',
|
|
5513
|
+
overflow: 'hidden',
|
|
5514
|
+
padding: 0,
|
|
5515
|
+
position: 'absolute',
|
|
5516
|
+
width: '1px',
|
|
5517
|
+
whiteSpace: 'nowrap'
|
|
5518
|
+
});
|
|
5519
|
+
this.assertiveLog = this.createLog('assertive');
|
|
5520
|
+
this.node.appendChild(this.assertiveLog);
|
|
5521
|
+
this.politeLog = this.createLog('polite');
|
|
5522
|
+
this.node.appendChild(this.politeLog);
|
|
5523
|
+
document.body.prepend(this.node);
|
|
5545
5524
|
}
|
|
5546
|
-
// Prevent default browser error UI from appearing.
|
|
5547
|
-
e.preventDefault();
|
|
5548
|
-
});
|
|
5549
|
-
let onChange = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
|
|
5550
|
-
state.commitValidation();
|
|
5551
|
-
});
|
|
5552
|
-
(useEffect)(()=>{
|
|
5553
|
-
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5554
|
-
if (!input) return;
|
|
5555
|
-
let form = input.form;
|
|
5556
|
-
input.addEventListener('invalid', onInvalid);
|
|
5557
|
-
input.addEventListener('change', onChange);
|
|
5558
|
-
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
5559
|
-
return ()=>{
|
|
5560
|
-
input.removeEventListener('invalid', onInvalid);
|
|
5561
|
-
input.removeEventListener('change', onChange);
|
|
5562
|
-
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
5563
|
-
};
|
|
5564
|
-
}, [
|
|
5565
|
-
ref,
|
|
5566
|
-
onInvalid,
|
|
5567
|
-
onChange,
|
|
5568
|
-
onReset,
|
|
5569
|
-
validationBehavior
|
|
5570
|
-
]);
|
|
5571
|
-
}
|
|
5572
|
-
function $e93e671b31057976$var$getValidity(input) {
|
|
5573
|
-
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
5574
|
-
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
5575
|
-
let validity = input.validity;
|
|
5576
|
-
return {
|
|
5577
|
-
badInput: validity.badInput,
|
|
5578
|
-
customError: validity.customError,
|
|
5579
|
-
patternMismatch: validity.patternMismatch,
|
|
5580
|
-
rangeOverflow: validity.rangeOverflow,
|
|
5581
|
-
rangeUnderflow: validity.rangeUnderflow,
|
|
5582
|
-
stepMismatch: validity.stepMismatch,
|
|
5583
|
-
tooLong: validity.tooLong,
|
|
5584
|
-
tooShort: validity.tooShort,
|
|
5585
|
-
typeMismatch: validity.typeMismatch,
|
|
5586
|
-
valueMissing: validity.valueMissing,
|
|
5587
|
-
valid: validity.valid
|
|
5588
|
-
};
|
|
5589
|
-
}
|
|
5590
|
-
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
5591
|
-
return {
|
|
5592
|
-
isInvalid: !input.validity.valid,
|
|
5593
|
-
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
5594
|
-
validationErrors: input.validationMessage ? [
|
|
5595
|
-
input.validationMessage
|
|
5596
|
-
] : []
|
|
5597
|
-
};
|
|
5598
|
-
}
|
|
5599
|
-
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
5600
|
-
for(let i = 0; i < form.elements.length; i++){
|
|
5601
|
-
let element = form.elements[i];
|
|
5602
|
-
if (!element.validity.valid) return element;
|
|
5603
5525
|
}
|
|
5604
|
-
return null;
|
|
5605
5526
|
}
|
|
5606
5527
|
|
|
5607
5528
|
/*
|
|
@@ -5666,11 +5587,15 @@ function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
|
|
|
5666
5587
|
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
|
|
5667
5588
|
} : null;
|
|
5668
5589
|
// Perform custom client side validation.
|
|
5669
|
-
let clientError = (useMemo)(()
|
|
5590
|
+
let clientError = (useMemo)(()=>{
|
|
5591
|
+
if (!validate || value == null) return null;
|
|
5592
|
+
let validateErrors = $e5be200c675c3b3a$var$runValidate(validate, value);
|
|
5593
|
+
return $e5be200c675c3b3a$var$getValidationResult(validateErrors);
|
|
5594
|
+
}, [
|
|
5670
5595
|
validate,
|
|
5671
5596
|
value
|
|
5672
5597
|
]);
|
|
5673
|
-
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation =
|
|
5598
|
+
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = undefined;
|
|
5674
5599
|
// Get relevant server errors from the form.
|
|
5675
5600
|
let serverErrors = (useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
|
|
5676
5601
|
let serverErrorMessages = (useMemo)(()=>{
|
|
@@ -5762,7 +5687,7 @@ function $e5be200c675c3b3a$var$getValidationResult(errors) {
|
|
|
5762
5687
|
}
|
|
5763
5688
|
function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
|
|
5764
5689
|
if (a === b) return true;
|
|
5765
|
-
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
|
|
5690
|
+
return !!a && !!b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
|
|
5766
5691
|
}
|
|
5767
5692
|
function $e5be200c675c3b3a$export$75ee7c75d68f5b0e(...results) {
|
|
5768
5693
|
let errors = new Set();
|
|
@@ -5787,6 +5712,110 @@ function $e5be200c675c3b3a$export$75ee7c75d68f5b0e(...results) {
|
|
|
5787
5712
|
};
|
|
5788
5713
|
}
|
|
5789
5714
|
|
|
5715
|
+
/*
|
|
5716
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
5717
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
5718
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5719
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
5720
|
+
*
|
|
5721
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
5722
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
5723
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
5724
|
+
* governing permissions and limitations under the License.
|
|
5725
|
+
*/
|
|
5726
|
+
|
|
5727
|
+
|
|
5728
|
+
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
5729
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
5730
|
+
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
5731
|
+
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
5732
|
+
if (validationBehavior === 'native' && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
5733
|
+
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
|
|
5734
|
+
ref.current.setCustomValidity(errorMessage);
|
|
5735
|
+
// Prevent default tooltip for validation message.
|
|
5736
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
5737
|
+
if (!ref.current.hasAttribute('title')) ref.current.title = '';
|
|
5738
|
+
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
5739
|
+
}
|
|
5740
|
+
});
|
|
5741
|
+
let onReset = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
|
|
5742
|
+
state.resetValidation();
|
|
5743
|
+
});
|
|
5744
|
+
let onInvalid = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((e)=>{
|
|
5745
|
+
var _ref_current;
|
|
5746
|
+
// Only commit validation if we are not already displaying one.
|
|
5747
|
+
// This avoids clearing server errors that the user didn't actually fix.
|
|
5748
|
+
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
5749
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
5750
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
5751
|
+
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
5752
|
+
var _ref_current1;
|
|
5753
|
+
if (focus) focus();
|
|
5754
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
5755
|
+
// Always show focus ring.
|
|
5756
|
+
($507fabe10e71c6fb$export$8397ddfc504fdb9a)('keyboard');
|
|
5757
|
+
}
|
|
5758
|
+
// Prevent default browser error UI from appearing.
|
|
5759
|
+
e.preventDefault();
|
|
5760
|
+
});
|
|
5761
|
+
let onChange = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
|
|
5762
|
+
state.commitValidation();
|
|
5763
|
+
});
|
|
5764
|
+
(useEffect)(()=>{
|
|
5765
|
+
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5766
|
+
if (!input) return;
|
|
5767
|
+
let form = input.form;
|
|
5768
|
+
input.addEventListener('invalid', onInvalid);
|
|
5769
|
+
input.addEventListener('change', onChange);
|
|
5770
|
+
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
5771
|
+
return ()=>{
|
|
5772
|
+
input.removeEventListener('invalid', onInvalid);
|
|
5773
|
+
input.removeEventListener('change', onChange);
|
|
5774
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
5775
|
+
};
|
|
5776
|
+
}, [
|
|
5777
|
+
ref,
|
|
5778
|
+
onInvalid,
|
|
5779
|
+
onChange,
|
|
5780
|
+
onReset,
|
|
5781
|
+
validationBehavior
|
|
5782
|
+
]);
|
|
5783
|
+
}
|
|
5784
|
+
function $e93e671b31057976$var$getValidity(input) {
|
|
5785
|
+
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
5786
|
+
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
5787
|
+
let validity = input.validity;
|
|
5788
|
+
return {
|
|
5789
|
+
badInput: validity.badInput,
|
|
5790
|
+
customError: validity.customError,
|
|
5791
|
+
patternMismatch: validity.patternMismatch,
|
|
5792
|
+
rangeOverflow: validity.rangeOverflow,
|
|
5793
|
+
rangeUnderflow: validity.rangeUnderflow,
|
|
5794
|
+
stepMismatch: validity.stepMismatch,
|
|
5795
|
+
tooLong: validity.tooLong,
|
|
5796
|
+
tooShort: validity.tooShort,
|
|
5797
|
+
typeMismatch: validity.typeMismatch,
|
|
5798
|
+
valueMissing: validity.valueMissing,
|
|
5799
|
+
valid: validity.valid
|
|
5800
|
+
};
|
|
5801
|
+
}
|
|
5802
|
+
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
5803
|
+
return {
|
|
5804
|
+
isInvalid: !input.validity.valid,
|
|
5805
|
+
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
5806
|
+
validationErrors: input.validationMessage ? [
|
|
5807
|
+
input.validationMessage
|
|
5808
|
+
] : []
|
|
5809
|
+
};
|
|
5810
|
+
}
|
|
5811
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
5812
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
5813
|
+
let element = form.elements[i];
|
|
5814
|
+
if (!element.validity.valid) return element;
|
|
5815
|
+
}
|
|
5816
|
+
return null;
|
|
5817
|
+
}
|
|
5818
|
+
|
|
5790
5819
|
/*
|
|
5791
5820
|
* Copyright 2020 Adobe. All rights reserved.
|
|
5792
5821
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -5868,6 +5897,8 @@ function $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref) {
|
|
|
5868
5897
|
|
|
5869
5898
|
|
|
5870
5899
|
|
|
5900
|
+
|
|
5901
|
+
|
|
5871
5902
|
function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
|
|
5872
5903
|
// Create validation state here because it doesn't make sense to add to general useToggleState.
|
|
5873
5904
|
let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
|
|
@@ -5886,8 +5917,18 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
|
|
|
5886
5917
|
// https://css-tricks.com/indeterminate-checkboxes/
|
|
5887
5918
|
if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
|
|
5888
5919
|
});
|
|
5920
|
+
// Reset validation state on label press for checkbox with a hidden input.
|
|
5921
|
+
let { pressProps: pressProps } = ($f6c31cce2adf654f$export$45712eceda6fad21)({
|
|
5922
|
+
isDisabled: isDisabled || isReadOnly,
|
|
5923
|
+
onPress () {
|
|
5924
|
+
// @ts-expect-error
|
|
5925
|
+
let { [($e5be200c675c3b3a$export$a763b9476acd3eb)]: groupValidationState } = props;
|
|
5926
|
+
let { commitValidation: commitValidation } = groupValidationState ? groupValidationState : validationState;
|
|
5927
|
+
commitValidation();
|
|
5928
|
+
}
|
|
5929
|
+
});
|
|
5889
5930
|
return {
|
|
5890
|
-
labelProps: labelProps,
|
|
5931
|
+
labelProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(labelProps, pressProps),
|
|
5891
5932
|
inputProps: {
|
|
5892
5933
|
...inputProps,
|
|
5893
5934
|
checked: isSelected,
|
|
@@ -6169,21 +6210,183 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
|
|
|
6169
6210
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
6170
6211
|
* governing permissions and limitations under the License.
|
|
6171
6212
|
*/
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6213
|
+
|
|
6214
|
+
|
|
6215
|
+
const $5c3e21d68f1c4674$var$styles = {
|
|
6216
|
+
border: 0,
|
|
6217
|
+
clip: 'rect(0 0 0 0)',
|
|
6218
|
+
clipPath: 'inset(50%)',
|
|
6219
|
+
height: '1px',
|
|
6220
|
+
margin: '-1px',
|
|
6221
|
+
overflow: 'hidden',
|
|
6222
|
+
padding: 0,
|
|
6223
|
+
position: 'absolute',
|
|
6224
|
+
width: '1px',
|
|
6225
|
+
whiteSpace: 'nowrap'
|
|
6226
|
+
};
|
|
6227
|
+
function $5c3e21d68f1c4674$export$a966af930f325cab(props = {}) {
|
|
6228
|
+
let { style: style, isFocusable: isFocusable } = props;
|
|
6229
|
+
let [isFocused, setFocused] = (useState)(false);
|
|
6230
|
+
let { focusWithinProps: focusWithinProps } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
|
|
6231
|
+
isDisabled: !isFocusable,
|
|
6232
|
+
onFocusWithinChange: (val)=>setFocused(val)
|
|
6233
|
+
});
|
|
6234
|
+
// If focused, don't hide the element.
|
|
6235
|
+
let combinedStyles = (useMemo)(()=>{
|
|
6236
|
+
if (isFocused) return style;
|
|
6237
|
+
else if (style) return {
|
|
6238
|
+
...$5c3e21d68f1c4674$var$styles,
|
|
6239
|
+
...style
|
|
6240
|
+
};
|
|
6241
|
+
else return $5c3e21d68f1c4674$var$styles;
|
|
6242
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6243
|
+
}, [
|
|
6244
|
+
isFocused
|
|
6245
|
+
]);
|
|
6246
|
+
return {
|
|
6247
|
+
visuallyHiddenProps: {
|
|
6248
|
+
...focusWithinProps,
|
|
6249
|
+
style: combinedStyles
|
|
6250
|
+
}
|
|
6251
|
+
};
|
|
6252
|
+
}
|
|
6253
|
+
function $5c3e21d68f1c4674$export$439d29a4e110a164(props) {
|
|
6254
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
6255
|
+
let { children: children, elementType: Element = 'div', isFocusable: isFocusable, style: style, ...otherProps } = props;
|
|
6256
|
+
let { visuallyHiddenProps: visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab(props);
|
|
6257
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(Element, ($3ef42575df84b30b$export$9d1611c77c2fe928)(otherProps, visuallyHiddenProps), children);
|
|
6258
|
+
}
|
|
6259
|
+
|
|
6260
|
+
/*
|
|
6261
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
6262
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6263
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
6264
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6265
|
+
*
|
|
6266
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
6267
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
6268
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
6269
|
+
* governing permissions and limitations under the License.
|
|
6270
|
+
*/
|
|
6271
|
+
|
|
6272
|
+
|
|
6273
|
+
|
|
6274
|
+
|
|
6275
|
+
|
|
6276
|
+
|
|
6277
|
+
function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
|
|
6278
|
+
let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
|
|
6279
|
+
let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || '', props.onChange);
|
|
6280
|
+
let { focusableProps: focusableProps } = ($e6afbd83fe6ebbd2$export$4c014de7c8940b4c)(props, ref);
|
|
6281
|
+
let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
|
|
6282
|
+
...props,
|
|
6283
|
+
value: value
|
|
6284
|
+
});
|
|
6285
|
+
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
|
|
6286
|
+
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = ($2baaea4c71418dea$export$294aa081a6c6f55d)({
|
|
6287
|
+
...props,
|
|
6288
|
+
isInvalid: isInvalid,
|
|
6289
|
+
errorMessage: props.errorMessage || validationErrors
|
|
6290
|
+
});
|
|
6291
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
6292
|
+
labelable: true
|
|
6293
|
+
});
|
|
6294
|
+
const inputOnlyProps = {
|
|
6295
|
+
type: type,
|
|
6296
|
+
pattern: props.pattern
|
|
6297
|
+
};
|
|
6298
|
+
($99facab73266f662$export$5add1d006293d136)(ref, value, setValue);
|
|
6299
|
+
($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
|
|
6300
|
+
(useEffect)(()=>{
|
|
6301
|
+
// This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
|
|
6302
|
+
// We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
|
|
6303
|
+
// which causes Chrome to skip validation. Only updating `value` is ok in our case since our
|
|
6304
|
+
// textareas are always controlled. React is planning on removing this synchronization in a
|
|
6305
|
+
// future major version.
|
|
6306
|
+
// https://github.com/facebook/react/issues/19474
|
|
6307
|
+
// https://github.com/facebook/react/issues/11896
|
|
6308
|
+
if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
|
|
6309
|
+
let input = ref.current;
|
|
6310
|
+
Object.defineProperty(input, 'defaultValue', {
|
|
6311
|
+
get: ()=>input.value,
|
|
6312
|
+
set: ()=>{},
|
|
6313
|
+
configurable: true
|
|
6314
|
+
});
|
|
6315
|
+
}
|
|
6316
|
+
}, [
|
|
6317
|
+
ref
|
|
6318
|
+
]);
|
|
6319
|
+
return {
|
|
6320
|
+
labelProps: labelProps,
|
|
6321
|
+
inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
|
|
6322
|
+
disabled: isDisabled,
|
|
6323
|
+
readOnly: isReadOnly,
|
|
6324
|
+
required: isRequired && validationBehavior === 'native',
|
|
6325
|
+
'aria-required': isRequired && validationBehavior === 'aria' || undefined,
|
|
6326
|
+
'aria-invalid': isInvalid || undefined,
|
|
6327
|
+
'aria-errormessage': props['aria-errormessage'],
|
|
6328
|
+
'aria-activedescendant': props['aria-activedescendant'],
|
|
6329
|
+
'aria-autocomplete': props['aria-autocomplete'],
|
|
6330
|
+
'aria-haspopup': props['aria-haspopup'],
|
|
6331
|
+
value: value,
|
|
6332
|
+
onChange: (e)=>setValue(e.target.value),
|
|
6333
|
+
autoComplete: props.autoComplete,
|
|
6334
|
+
autoCapitalize: props.autoCapitalize,
|
|
6335
|
+
maxLength: props.maxLength,
|
|
6336
|
+
minLength: props.minLength,
|
|
6337
|
+
name: props.name,
|
|
6338
|
+
placeholder: props.placeholder,
|
|
6339
|
+
inputMode: props.inputMode,
|
|
6340
|
+
// Clipboard events
|
|
6341
|
+
onCopy: props.onCopy,
|
|
6342
|
+
onCut: props.onCut,
|
|
6343
|
+
onPaste: props.onPaste,
|
|
6344
|
+
// Composition events
|
|
6345
|
+
onCompositionEnd: props.onCompositionEnd,
|
|
6346
|
+
onCompositionStart: props.onCompositionStart,
|
|
6347
|
+
onCompositionUpdate: props.onCompositionUpdate,
|
|
6348
|
+
// Selection events
|
|
6349
|
+
onSelect: props.onSelect,
|
|
6350
|
+
// Input events
|
|
6351
|
+
onBeforeInput: props.onBeforeInput,
|
|
6352
|
+
onInput: props.onInput,
|
|
6353
|
+
...focusableProps,
|
|
6354
|
+
...fieldProps
|
|
6355
|
+
}),
|
|
6356
|
+
descriptionProps: descriptionProps,
|
|
6357
|
+
errorMessageProps: errorMessageProps,
|
|
6358
|
+
isInvalid: isInvalid,
|
|
6359
|
+
validationErrors: validationErrors,
|
|
6360
|
+
validationDetails: validationDetails
|
|
6361
|
+
};
|
|
6362
|
+
}
|
|
6363
|
+
|
|
6364
|
+
/*
|
|
6365
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
6366
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6367
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
6368
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6369
|
+
*
|
|
6370
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
6371
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
6372
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
6373
|
+
* governing permissions and limitations under the License.
|
|
6374
|
+
*/
|
|
6375
|
+
const $edcf132a9284368a$var$AXIS = {
|
|
6376
|
+
top: 'top',
|
|
6377
|
+
bottom: 'top',
|
|
6378
|
+
left: 'left',
|
|
6379
|
+
right: 'left'
|
|
6380
|
+
};
|
|
6381
|
+
const $edcf132a9284368a$var$FLIPPED_DIRECTION = {
|
|
6382
|
+
top: 'bottom',
|
|
6383
|
+
bottom: 'top',
|
|
6384
|
+
left: 'right',
|
|
6385
|
+
right: 'left'
|
|
6386
|
+
};
|
|
6387
|
+
const $edcf132a9284368a$var$CROSS_AXIS = {
|
|
6388
|
+
top: 'left',
|
|
6389
|
+
left: 'top'
|
|
6187
6390
|
};
|
|
6188
6391
|
const $edcf132a9284368a$var$AXIS_SIZE = {
|
|
6189
6392
|
top: 'height',
|
|
@@ -6194,12 +6397,12 @@ const $edcf132a9284368a$var$TOTAL_SIZE = {
|
|
|
6194
6397
|
height: 'totalHeight'
|
|
6195
6398
|
};
|
|
6196
6399
|
const $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE = {};
|
|
6197
|
-
|
|
6198
|
-
let $edcf132a9284368a$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
6400
|
+
let $edcf132a9284368a$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
|
|
6199
6401
|
function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
|
|
6200
6402
|
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
|
|
6201
6403
|
let scroll = {};
|
|
6202
|
-
|
|
6404
|
+
var _visualViewport_scale;
|
|
6405
|
+
let isPinchZoomedIn = ((_visualViewport_scale = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.scale) !== null && _visualViewport_scale !== void 0 ? _visualViewport_scale : 1) > 1;
|
|
6203
6406
|
if (containerNode.tagName === 'BODY') {
|
|
6204
6407
|
let documentElement = document.documentElement;
|
|
6205
6408
|
totalWidth = documentElement.clientWidth;
|
|
@@ -6231,8 +6434,10 @@ function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
|
|
|
6231
6434
|
// before pinch zoom happens
|
|
6232
6435
|
scroll.top = 0;
|
|
6233
6436
|
scroll.left = 0;
|
|
6234
|
-
|
|
6235
|
-
|
|
6437
|
+
var _visualViewport_pageTop;
|
|
6438
|
+
top = (_visualViewport_pageTop = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.pageTop) !== null && _visualViewport_pageTop !== void 0 ? _visualViewport_pageTop : 0;
|
|
6439
|
+
var _visualViewport_pageLeft;
|
|
6440
|
+
left = (_visualViewport_pageLeft = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.pageLeft) !== null && _visualViewport_pageLeft !== void 0 ? _visualViewport_pageLeft : 0;
|
|
6236
6441
|
}
|
|
6237
6442
|
return {
|
|
6238
6443
|
width: width,
|
|
@@ -6261,7 +6466,8 @@ boundaryDimensions, // The dimensions of the containing block element that the p
|
|
|
6261
6466
|
// is portaled somewhere other than the body and has an ancestor with
|
|
6262
6467
|
// position: relative/absolute, it will be different.
|
|
6263
6468
|
containerDimensions, padding, containerOffsetWithBoundary) {
|
|
6264
|
-
|
|
6469
|
+
var _containerDimensions_scroll_axis;
|
|
6470
|
+
let containerScroll = (_containerDimensions_scroll_axis = containerDimensions.scroll[axis]) !== null && _containerDimensions_scroll_axis !== void 0 ? _containerDimensions_scroll_axis : 0;
|
|
6265
6471
|
// The height/width of the boundary. Matches the axis along which we are adjusting the overlay position
|
|
6266
6472
|
let boundarySize = boundaryDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]];
|
|
6267
6473
|
// Calculate the edges of the boundary (accomodating for the boundary padding) and the edges of the overlay.
|
|
@@ -6306,14 +6512,16 @@ function $edcf132a9284368a$var$parsePlacement(input) {
|
|
|
6306
6512
|
function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset) {
|
|
6307
6513
|
let { placement: placement, crossPlacement: crossPlacement, axis: axis, crossAxis: crossAxis, size: size, crossSize: crossSize } = placementInfo;
|
|
6308
6514
|
let position = {};
|
|
6515
|
+
var _childOffset_crossAxis;
|
|
6309
6516
|
// button position
|
|
6310
|
-
position[crossAxis] = childOffset[crossAxis];
|
|
6517
|
+
position[crossAxis] = (_childOffset_crossAxis = childOffset[crossAxis]) !== null && _childOffset_crossAxis !== void 0 ? _childOffset_crossAxis : 0;
|
|
6518
|
+
var _childOffset_crossSize, _overlaySize_crossSize, _childOffset_crossSize1, _overlaySize_crossSize1;
|
|
6311
6519
|
if (crossPlacement === 'center') // + (button size / 2) - (overlay size / 2)
|
|
6312
6520
|
// at this point the overlay center should match the button center
|
|
6313
|
-
position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
|
|
6521
|
+
position[crossAxis] += (((_childOffset_crossSize = childOffset[crossSize]) !== null && _childOffset_crossSize !== void 0 ? _childOffset_crossSize : 0) - ((_overlaySize_crossSize = overlaySize[crossSize]) !== null && _overlaySize_crossSize !== void 0 ? _overlaySize_crossSize : 0)) / 2;
|
|
6314
6522
|
else if (crossPlacement !== crossAxis) // + (button size) - (overlay size)
|
|
6315
6523
|
// at this point the overlay bottom should match the button bottom
|
|
6316
|
-
position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
|
|
6524
|
+
position[crossAxis] += ((_childOffset_crossSize1 = childOffset[crossSize]) !== null && _childOffset_crossSize1 !== void 0 ? _childOffset_crossSize1 : 0) - ((_overlaySize_crossSize1 = overlaySize[crossSize]) !== null && _overlaySize_crossSize1 !== void 0 ? _overlaySize_crossSize1 : 0);
|
|
6317
6525
|
/* else {
|
|
6318
6526
|
the overlay top should match the button top
|
|
6319
6527
|
} */
|
|
@@ -6336,23 +6544,26 @@ function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions,
|
|
|
6336
6544
|
}
|
|
6337
6545
|
function $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlayHeight, heightGrowthDirection) {
|
|
6338
6546
|
const containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE.height];
|
|
6547
|
+
var _position_bottom;
|
|
6339
6548
|
// For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method
|
|
6340
6549
|
// used in computePosition.
|
|
6341
|
-
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight);
|
|
6550
|
+
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - ((_position_bottom = position.bottom) !== null && _position_bottom !== void 0 ? _position_bottom : 0) - overlayHeight);
|
|
6551
|
+
var _boundaryDimensions_scroll_top, _margins_top, _margins_bottom, _boundaryDimensions_scroll_top1, _margins_top1, _margins_bottom1;
|
|
6342
6552
|
let maxHeight = heightGrowthDirection !== 'top' ? // We want the distance between the top of the overlay to the bottom of the boundary
|
|
6343
|
-
Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top // this is the
|
|
6344
|
-
-
|
|
6345
|
-
- (margins.top + margins.bottom + padding // save additional space for margin and padding
|
|
6553
|
+
Math.max(0, boundaryDimensions.height + boundaryDimensions.top + ((_boundaryDimensions_scroll_top = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top !== void 0 ? _boundaryDimensions_scroll_top : 0) - overlayTop // this is the top of the overlay
|
|
6554
|
+
- (((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0) + padding // save additional space for margin and padding
|
|
6346
6555
|
)) : Math.max(0, overlayTop + overlayHeight // this is the bottom of the overlay
|
|
6347
|
-
- (boundaryDimensions.top + boundaryDimensions.scroll.top // this is the top of the boundary
|
|
6348
|
-
) - (margins.top + margins.bottom + padding // save additional space for margin and padding
|
|
6556
|
+
- (boundaryDimensions.top + ((_boundaryDimensions_scroll_top1 = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top1 !== void 0 ? _boundaryDimensions_scroll_top1 : 0) // this is the top of the boundary
|
|
6557
|
+
) - (((_margins_top1 = margins.top) !== null && _margins_top1 !== void 0 ? _margins_top1 : 0) + ((_margins_bottom1 = margins.bottom) !== null && _margins_bottom1 !== void 0 ? _margins_bottom1 : 0) + padding // save additional space for margin and padding
|
|
6349
6558
|
));
|
|
6350
6559
|
return Math.min(boundaryDimensions.height - padding * 2, maxHeight);
|
|
6351
6560
|
}
|
|
6352
6561
|
function $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo) {
|
|
6353
6562
|
let { placement: placement, axis: axis, size: size } = placementInfo;
|
|
6354
|
-
|
|
6355
|
-
return Math.max(0,
|
|
6563
|
+
var _boundaryDimensions_scroll_axis, _margins_axis;
|
|
6564
|
+
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - ((_boundaryDimensions_scroll_axis = boundaryDimensions.scroll[axis]) !== null && _boundaryDimensions_scroll_axis !== void 0 ? _boundaryDimensions_scroll_axis : 0) + containerOffsetWithBoundary[axis] - ((_margins_axis = margins[axis]) !== null && _margins_axis !== void 0 ? _margins_axis : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
|
|
6565
|
+
var _margins_axis1;
|
|
6566
|
+
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - ((_margins_axis1 = margins[axis]) !== null && _margins_axis1 !== void 0 ? _margins_axis1 : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
|
|
6356
6567
|
}
|
|
6357
6568
|
function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) {
|
|
6358
6569
|
let placementInfo = $edcf132a9284368a$var$parsePlacement(placementInput);
|
|
@@ -6398,8 +6609,9 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
|
|
|
6398
6609
|
let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis] - margins[$edcf132a9284368a$var$AXIS[crossAxis]];
|
|
6399
6610
|
// Min/Max position limits for the arrow with respect to the overlay
|
|
6400
6611
|
const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
|
|
6612
|
+
var _margins_left, _margins_right, _margins_top, _margins_bottom;
|
|
6401
6613
|
// overlaySize[crossSize] - margins = true size of the overlay
|
|
6402
|
-
const overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === 'left' ? margins.left + margins.right : margins.top + margins.bottom;
|
|
6614
|
+
const overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === 'left' ? ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0) : ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0);
|
|
6403
6615
|
const arrowMaxPosition = overlaySize[crossSize] - overlayMargin - arrowSize / 2 - arrowBoundaryOffset;
|
|
6404
6616
|
// Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
|
|
6405
6617
|
// Same margin accomodation done here as well as for the preferredArrowPosition
|
|
@@ -6430,8 +6642,10 @@ function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
|
|
|
6430
6642
|
}
|
|
6431
6643
|
let overlaySize = $edcf132a9284368a$var$getOffset(overlayNode);
|
|
6432
6644
|
let margins = $edcf132a9284368a$var$getMargins(overlayNode);
|
|
6433
|
-
|
|
6434
|
-
overlaySize.
|
|
6645
|
+
var _margins_left, _margins_right;
|
|
6646
|
+
overlaySize.width += ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0);
|
|
6647
|
+
var _margins_top, _margins_bottom;
|
|
6648
|
+
overlaySize.height += ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0);
|
|
6435
6649
|
let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode);
|
|
6436
6650
|
let boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement);
|
|
6437
6651
|
let containerDimensions = $edcf132a9284368a$var$getContainerDimensions(container);
|
|
@@ -6504,9 +6718,7 @@ function $edcf132a9284368a$var$getContainingBlock(node) {
|
|
|
6504
6718
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
6505
6719
|
function $edcf132a9284368a$var$isContainingBlock(node) {
|
|
6506
6720
|
let style = window.getComputedStyle(node);
|
|
6507
|
-
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' ||
|
|
6508
|
-
'backdropFilter' in style && style.backdropFilter !== 'none' || // @ts-ignore
|
|
6509
|
-
'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none';
|
|
6721
|
+
return style.transform !== 'none' || /transform|perspective/.test(style.willChange) || style.filter !== 'none' || style.contain === 'paint' || 'backdropFilter' in style && style.backdropFilter !== 'none' || 'WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none';
|
|
6510
6722
|
}
|
|
6511
6723
|
|
|
6512
6724
|
/*
|
|
@@ -6563,18 +6775,11 @@ function $dd149f63282afbbf$export$18fc8428861184da(opts) {
|
|
|
6563
6775
|
|
|
6564
6776
|
|
|
6565
6777
|
|
|
6566
|
-
|
|
6567
|
-
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
6778
|
+
let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
|
|
6568
6779
|
function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
6569
6780
|
let { direction: direction } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
|
|
6570
6781
|
let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
|
|
6571
|
-
let [position, setPosition] = (useState)(
|
|
6572
|
-
position: {},
|
|
6573
|
-
arrowOffsetLeft: undefined,
|
|
6574
|
-
arrowOffsetTop: undefined,
|
|
6575
|
-
maxHeight: undefined,
|
|
6576
|
-
placement: undefined
|
|
6577
|
-
});
|
|
6782
|
+
let [position, setPosition] = (useState)(null);
|
|
6578
6783
|
let deps = [
|
|
6579
6784
|
shouldUpdatePosition,
|
|
6580
6785
|
placement,
|
|
@@ -6610,17 +6815,20 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
6610
6815
|
// changes, the focused element appears to stay in the same position.
|
|
6611
6816
|
let anchor = null;
|
|
6612
6817
|
if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
|
|
6613
|
-
|
|
6818
|
+
var _document_activeElement;
|
|
6819
|
+
let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect();
|
|
6614
6820
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
6821
|
+
var _anchorRect_top;
|
|
6615
6822
|
// Anchor from the top if the offset is in the top half of the scrollable element,
|
|
6616
6823
|
// otherwise anchor from the bottom.
|
|
6617
6824
|
anchor = {
|
|
6618
6825
|
type: 'top',
|
|
6619
|
-
offset: anchorRect.top - scrollRect.top
|
|
6826
|
+
offset: ((_anchorRect_top = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top
|
|
6620
6827
|
};
|
|
6621
6828
|
if (anchor.offset > scrollRect.height / 2) {
|
|
6622
6829
|
anchor.type = 'bottom';
|
|
6623
|
-
|
|
6830
|
+
var _anchorRect_bottom;
|
|
6831
|
+
anchor.offset = ((_anchorRect_bottom = anchorRect === null || anchorRect === void 0 ? void 0 : anchorRect.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom;
|
|
6624
6832
|
}
|
|
6625
6833
|
}
|
|
6626
6834
|
// Always reset the overlay's previous max height if not defined by the user so that we can compensate for
|
|
@@ -6647,6 +6855,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
6647
6855
|
arrowSize: arrowSize,
|
|
6648
6856
|
arrowBoundaryOffset: arrowBoundaryOffset
|
|
6649
6857
|
});
|
|
6858
|
+
if (!position.position) return;
|
|
6650
6859
|
// Modify overlay styles directly so positioning happens immediately without the need of a second render
|
|
6651
6860
|
// This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
|
|
6652
6861
|
overlay.style.top = '';
|
|
@@ -6654,9 +6863,9 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
6654
6863
|
overlay.style.left = '';
|
|
6655
6864
|
overlay.style.right = '';
|
|
6656
6865
|
Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
|
|
6657
|
-
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' :
|
|
6866
|
+
overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : '';
|
|
6658
6867
|
// Restore scroll position relative to anchor element.
|
|
6659
|
-
if (anchor) {
|
|
6868
|
+
if (anchor && document.activeElement && scrollRef.current) {
|
|
6660
6869
|
let anchorRect = document.activeElement.getBoundingClientRect();
|
|
6661
6870
|
let scrollRect = scrollRef.current.getBoundingClientRect();
|
|
6662
6871
|
let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
|
|
@@ -6709,7 +6918,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
6709
6918
|
updatePosition
|
|
6710
6919
|
]);
|
|
6711
6920
|
let close = (useCallback)(()=>{
|
|
6712
|
-
if (!isResizing.current) onClose();
|
|
6921
|
+
if (!isResizing.current) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
6713
6922
|
}, [
|
|
6714
6923
|
onClose,
|
|
6715
6924
|
isResizing
|
|
@@ -6721,23 +6930,23 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
|
|
|
6721
6930
|
isOpen: isOpen,
|
|
6722
6931
|
onClose: onClose && close
|
|
6723
6932
|
});
|
|
6724
|
-
var _position_maxHeight;
|
|
6933
|
+
var _position_maxHeight, _position_placement;
|
|
6725
6934
|
return {
|
|
6726
6935
|
overlayProps: {
|
|
6727
6936
|
style: {
|
|
6728
6937
|
position: 'absolute',
|
|
6729
6938
|
zIndex: 100000,
|
|
6730
|
-
...position.position,
|
|
6731
|
-
maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
6939
|
+
...position === null || position === void 0 ? void 0 : position.position,
|
|
6940
|
+
maxHeight: (_position_maxHeight = position === null || position === void 0 ? void 0 : position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
|
|
6732
6941
|
}
|
|
6733
6942
|
},
|
|
6734
|
-
placement: position.placement,
|
|
6943
|
+
placement: (_position_placement = position === null || position === void 0 ? void 0 : position.placement) !== null && _position_placement !== void 0 ? _position_placement : null,
|
|
6735
6944
|
arrowProps: {
|
|
6736
6945
|
'aria-hidden': 'true',
|
|
6737
6946
|
role: 'presentation',
|
|
6738
6947
|
style: {
|
|
6739
|
-
left: position.arrowOffsetLeft,
|
|
6740
|
-
top: position.arrowOffsetTop
|
|
6948
|
+
left: position === null || position === void 0 ? void 0 : position.arrowOffsetLeft,
|
|
6949
|
+
top: position === null || position === void 0 ? void 0 : position.arrowOffsetTop
|
|
6741
6950
|
}
|
|
6742
6951
|
},
|
|
6743
6952
|
updatePosition: updatePosition
|
|
@@ -6817,7 +7026,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
6817
7026
|
// Handle clicking outside the overlay to close it
|
|
6818
7027
|
($e0b6e0b68ec7f50f$export$872b660ac5a1ff98)({
|
|
6819
7028
|
ref: ref,
|
|
6820
|
-
onInteractOutside: isDismissable && isOpen ? onInteractOutside :
|
|
7029
|
+
onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
|
|
6821
7030
|
onInteractOutsideStart: onInteractOutsideStart
|
|
6822
7031
|
});
|
|
6823
7032
|
let { focusWithinProps: focusWithinProps } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
|
|
@@ -6833,7 +7042,7 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
|
|
|
6833
7042
|
// do not close the outer overlay. At this point, the active scope should
|
|
6834
7043
|
// still be the outer overlay, since blur events run before focus.
|
|
6835
7044
|
if (!e.relatedTarget || ($9bf71ea28793e738$export$1258395f99bf9cbf)(e.relatedTarget)) return;
|
|
6836
|
-
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
|
|
7045
|
+
if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
6837
7046
|
}
|
|
6838
7047
|
});
|
|
6839
7048
|
let onPointerDownUnderlay = (e)=>{
|
|
@@ -6884,7 +7093,7 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
6884
7093
|
triggerProps: {
|
|
6885
7094
|
'aria-haspopup': ariaHasPopup,
|
|
6886
7095
|
'aria-expanded': isOpen,
|
|
6887
|
-
'aria-controls': isOpen ? overlayId :
|
|
7096
|
+
'aria-controls': isOpen ? overlayId : undefined,
|
|
6888
7097
|
onPress: state.toggle
|
|
6889
7098
|
},
|
|
6890
7099
|
overlayProps: {
|
|
@@ -6904,7 +7113,6 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
|
|
|
6904
7113
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
6905
7114
|
* governing permissions and limitations under the License.
|
|
6906
7115
|
*/
|
|
6907
|
-
// @ts-ignore
|
|
6908
7116
|
const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
6909
7117
|
// HTML input types that do not cause the software keyboard to appear.
|
|
6910
7118
|
const $49c51c25361d4cd2$var$nonTextInputTypes = new Set([
|
|
@@ -7087,22 +7295,26 @@ function $49c51c25361d4cd2$var$setStyle(element, style, value) {
|
|
|
7087
7295
|
}
|
|
7088
7296
|
// Adds an event listener to an element, and returns a function to remove it.
|
|
7089
7297
|
function $49c51c25361d4cd2$var$addEvent(target, event, handler, options) {
|
|
7298
|
+
// internal function, so it's ok to ignore the difficult to fix type error
|
|
7299
|
+
// @ts-ignore
|
|
7090
7300
|
target.addEventListener(event, handler, options);
|
|
7091
7301
|
return ()=>{
|
|
7302
|
+
// @ts-ignore
|
|
7092
7303
|
target.removeEventListener(event, handler, options);
|
|
7093
7304
|
};
|
|
7094
7305
|
}
|
|
7095
7306
|
function $49c51c25361d4cd2$var$scrollIntoView(target) {
|
|
7096
7307
|
let root = document.scrollingElement || document.documentElement;
|
|
7097
|
-
|
|
7308
|
+
let nextTarget = target;
|
|
7309
|
+
while(nextTarget && nextTarget !== root){
|
|
7098
7310
|
// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
|
|
7099
|
-
let scrollable = ($62d8ded9296f3872$export$cfa2225e87938781)(
|
|
7100
|
-
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !==
|
|
7311
|
+
let scrollable = ($62d8ded9296f3872$export$cfa2225e87938781)(nextTarget);
|
|
7312
|
+
if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
|
|
7101
7313
|
let scrollableTop = scrollable.getBoundingClientRect().top;
|
|
7102
|
-
let targetTop =
|
|
7103
|
-
if (targetTop > scrollableTop +
|
|
7314
|
+
let targetTop = nextTarget.getBoundingClientRect().top;
|
|
7315
|
+
if (targetTop > scrollableTop + nextTarget.clientHeight) scrollable.scrollTop += targetTop - scrollableTop;
|
|
7104
7316
|
}
|
|
7105
|
-
|
|
7317
|
+
nextTarget = scrollable.parentElement;
|
|
7106
7318
|
}
|
|
7107
7319
|
}
|
|
7108
7320
|
function $49c51c25361d4cd2$var$willOpenKeyboard(target) {
|
|
@@ -7150,7 +7362,7 @@ function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
|
|
|
7150
7362
|
let context = (useContext)($f57aed4a881a3485$var$Context);
|
|
7151
7363
|
return {
|
|
7152
7364
|
modalProviderProps: {
|
|
7153
|
-
'aria-hidden': context && context.modalCount > 0 ? true :
|
|
7365
|
+
'aria-hidden': context && context.modalCount > 0 ? true : undefined
|
|
7154
7366
|
}
|
|
7155
7367
|
};
|
|
7156
7368
|
}
|
|
@@ -7422,64 +7634,6 @@ $a2f21f5f14f60553$exports = {
|
|
|
7422
7634
|
"zh-TW": $2b2734393847c884$exports
|
|
7423
7635
|
};
|
|
7424
7636
|
|
|
7425
|
-
/*
|
|
7426
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
7427
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7428
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7429
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7430
|
-
*
|
|
7431
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
7432
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
7433
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
7434
|
-
* governing permissions and limitations under the License.
|
|
7435
|
-
*/
|
|
7436
|
-
|
|
7437
|
-
|
|
7438
|
-
const $5c3e21d68f1c4674$var$styles = {
|
|
7439
|
-
border: 0,
|
|
7440
|
-
clip: 'rect(0 0 0 0)',
|
|
7441
|
-
clipPath: 'inset(50%)',
|
|
7442
|
-
height: '1px',
|
|
7443
|
-
margin: '-1px',
|
|
7444
|
-
overflow: 'hidden',
|
|
7445
|
-
padding: 0,
|
|
7446
|
-
position: 'absolute',
|
|
7447
|
-
width: '1px',
|
|
7448
|
-
whiteSpace: 'nowrap'
|
|
7449
|
-
};
|
|
7450
|
-
function $5c3e21d68f1c4674$export$a966af930f325cab(props = {}) {
|
|
7451
|
-
let { style: style, isFocusable: isFocusable } = props;
|
|
7452
|
-
let [isFocused, setFocused] = (useState)(false);
|
|
7453
|
-
let { focusWithinProps: focusWithinProps } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
|
|
7454
|
-
isDisabled: !isFocusable,
|
|
7455
|
-
onFocusWithinChange: (val)=>setFocused(val)
|
|
7456
|
-
});
|
|
7457
|
-
// If focused, don't hide the element.
|
|
7458
|
-
let combinedStyles = (useMemo)(()=>{
|
|
7459
|
-
if (isFocused) return style;
|
|
7460
|
-
else if (style) return {
|
|
7461
|
-
...$5c3e21d68f1c4674$var$styles,
|
|
7462
|
-
...style
|
|
7463
|
-
};
|
|
7464
|
-
else return $5c3e21d68f1c4674$var$styles;
|
|
7465
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7466
|
-
}, [
|
|
7467
|
-
isFocused
|
|
7468
|
-
]);
|
|
7469
|
-
return {
|
|
7470
|
-
visuallyHiddenProps: {
|
|
7471
|
-
...focusWithinProps,
|
|
7472
|
-
style: combinedStyles
|
|
7473
|
-
}
|
|
7474
|
-
};
|
|
7475
|
-
}
|
|
7476
|
-
function $5c3e21d68f1c4674$export$439d29a4e110a164(props) {
|
|
7477
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7478
|
-
let { children: children, elementType: Element = 'div', isFocusable: isFocusable, style: style, ...otherProps } = props;
|
|
7479
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab(props);
|
|
7480
|
-
return /*#__PURE__*/ ($dbSRa$react).createElement(Element, ($3ef42575df84b30b$export$9d1611c77c2fe928)(otherProps, visuallyHiddenProps), children);
|
|
7481
|
-
}
|
|
7482
|
-
|
|
7483
7637
|
function $parcel$interopDefault$5(a) {
|
|
7484
7638
|
return a && a.__esModule ? a.default : a;
|
|
7485
7639
|
}
|
|
@@ -7541,7 +7695,7 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
7541
7695
|
// Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
|
|
7542
7696
|
// made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
|
|
7543
7697
|
// For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
|
|
7544
|
-
if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT;
|
|
7698
|
+
if (visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT;
|
|
7545
7699
|
// Skip this node but continue to children if one of the targets is inside the node.
|
|
7546
7700
|
for (let target of visibleNodes){
|
|
7547
7701
|
if (node.contains(target)) return NodeFilter.FILTER_SKIP;
|
|
@@ -7616,6 +7770,7 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
7616
7770
|
observer.disconnect();
|
|
7617
7771
|
for (let node of hiddenNodes){
|
|
7618
7772
|
let count = $5e3802645cc19319$var$refCountMap.get(node);
|
|
7773
|
+
if (count == null) continue;
|
|
7619
7774
|
if (count === 1) {
|
|
7620
7775
|
node.removeAttribute('aria-hidden');
|
|
7621
7776
|
$5e3802645cc19319$var$refCountMap.delete(node);
|
|
@@ -7647,7 +7802,8 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
7647
7802
|
function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
|
|
7648
7803
|
let { triggerRef: triggerRef, popoverRef: popoverRef, isNonModal: isNonModal, isKeyboardDismissDisabled: isKeyboardDismissDisabled, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, ...otherProps } = props;
|
|
7649
7804
|
let { overlayProps: overlayProps, underlayProps: underlayProps } = ($a11501f3d1d39e6c$export$ea8f71083e90600f)({
|
|
7650
|
-
|
|
7805
|
+
// If popover is in the top layer, it should not prevent other popovers from being dismissed.
|
|
7806
|
+
isOpen: state.isOpen && !otherProps['data-react-aria-top-layer'],
|
|
7651
7807
|
onClose: state.close,
|
|
7652
7808
|
shouldCloseOnBlur: true,
|
|
7653
7809
|
isDismissable: !isNonModal,
|
|
@@ -7659,7 +7815,7 @@ function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
|
|
|
7659
7815
|
targetRef: triggerRef,
|
|
7660
7816
|
overlayRef: popoverRef,
|
|
7661
7817
|
isOpen: state.isOpen,
|
|
7662
|
-
onClose: isNonModal ? state.close :
|
|
7818
|
+
onClose: isNonModal ? state.close : undefined
|
|
7663
7819
|
});
|
|
7664
7820
|
($49c51c25361d4cd2$export$ee0f7cc6afcd1c18)({
|
|
7665
7821
|
isDisabled: isNonModal || !state.isOpen
|
|
@@ -7777,7 +7933,7 @@ function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
|
|
|
7777
7933
|
});
|
|
7778
7934
|
($337b884510726a0d$export$14c98a7594375490)();
|
|
7779
7935
|
(useEffect)(()=>{
|
|
7780
|
-
if (state.isOpen) return ($5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
7936
|
+
if (state.isOpen && ref.current) return ($5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
7781
7937
|
ref.current
|
|
7782
7938
|
]);
|
|
7783
7939
|
}, [
|
|
@@ -7850,7 +8006,7 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
|
|
|
7850
8006
|
let { keyboardDelegate: keyboardDelegate, selectionManager: selectionManager, onTypeSelect: onTypeSelect } = options;
|
|
7851
8007
|
let state = (useRef)({
|
|
7852
8008
|
search: '',
|
|
7853
|
-
timeout:
|
|
8009
|
+
timeout: undefined
|
|
7854
8010
|
}).current;
|
|
7855
8011
|
let onKeyDown = (e)=>{
|
|
7856
8012
|
let character = $fb3050f43d946246$var$getStringForKey(e.key);
|
|
@@ -7864,14 +8020,16 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
|
|
|
7864
8020
|
if (!('continuePropagation' in e)) e.stopPropagation();
|
|
7865
8021
|
}
|
|
7866
8022
|
state.search += character;
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
8023
|
+
if (keyboardDelegate.getKeyForSearch != null) {
|
|
8024
|
+
// Use the delegate to find a key to focus.
|
|
8025
|
+
// Prioritize items after the currently focused item, falling back to searching the whole list.
|
|
8026
|
+
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
|
|
8027
|
+
// If no key found, search from the top.
|
|
8028
|
+
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
|
|
8029
|
+
if (key != null) {
|
|
8030
|
+
selectionManager.setFocusedKey(key);
|
|
8031
|
+
if (onTypeSelect) onTypeSelect(key);
|
|
8032
|
+
}
|
|
7875
8033
|
}
|
|
7876
8034
|
clearTimeout(state.timeout);
|
|
7877
8035
|
state.timeout = setTimeout(()=>{
|
|
@@ -7882,7 +8040,7 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
|
|
|
7882
8040
|
typeSelectProps: {
|
|
7883
8041
|
// Using a capturing listener to catch the keydown event before
|
|
7884
8042
|
// other hooks in order to handle the Spacebar event.
|
|
7885
|
-
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown :
|
|
8043
|
+
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
|
|
7886
8044
|
}
|
|
7887
8045
|
};
|
|
7888
8046
|
}
|
|
@@ -7919,21 +8077,23 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
7919
8077
|
let { direction: direction } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
|
|
7920
8078
|
let router = ($ea8dcbcb9ea1b556$export$9a302a45f65d0572)();
|
|
7921
8079
|
let onKeyDown = (e)=>{
|
|
8080
|
+
var _ref_current;
|
|
7922
8081
|
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
|
|
7923
8082
|
if (e.altKey && e.key === 'Tab') e.preventDefault();
|
|
7924
8083
|
// Keyboard events bubble through portals. Don't handle keyboard events
|
|
7925
8084
|
// for elements outside the collection (e.g. menus).
|
|
7926
|
-
if (!ref.current.contains(e.target)) return;
|
|
8085
|
+
if (!((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) return;
|
|
7927
8086
|
const navigateToKey = (key, childFocus)=>{
|
|
7928
8087
|
if (key != null) {
|
|
7929
8088
|
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !($feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
|
|
8089
|
+
var _scrollRef_current;
|
|
7930
8090
|
// Set focused key and re-render synchronously to bring item into view if needed.
|
|
7931
8091
|
(flushSync)(()=>{
|
|
7932
8092
|
manager.setFocusedKey(key, childFocus);
|
|
7933
8093
|
});
|
|
7934
|
-
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
|
|
8094
|
+
let item = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
|
|
7935
8095
|
let itemProps = manager.getItemProps(key);
|
|
7936
|
-
router.open(item, e, itemProps.href, itemProps.routerOptions);
|
|
8096
|
+
if (item) router.open(item, e, itemProps.href, itemProps.routerOptions);
|
|
7937
8097
|
return;
|
|
7938
8098
|
}
|
|
7939
8099
|
manager.setFocusedKey(key, childFocus);
|
|
@@ -7945,38 +8105,46 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
7945
8105
|
switch(e.key){
|
|
7946
8106
|
case 'ArrowDown':
|
|
7947
8107
|
if (delegate.getKeyBelow) {
|
|
7948
|
-
var _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
7949
|
-
|
|
7950
|
-
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
8108
|
+
var _delegate_getKeyBelow, _delegate_getFirstKey, _delegate_getFirstKey1;
|
|
8109
|
+
let nextKey = manager.focusedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, manager.focusedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
7951
8110
|
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate, manager.focusedKey);
|
|
7952
|
-
|
|
8111
|
+
if (nextKey != null) {
|
|
8112
|
+
e.preventDefault();
|
|
8113
|
+
navigateToKey(nextKey);
|
|
8114
|
+
}
|
|
7953
8115
|
}
|
|
7954
8116
|
break;
|
|
7955
8117
|
case 'ArrowUp':
|
|
7956
8118
|
if (delegate.getKeyAbove) {
|
|
7957
|
-
var _delegate_getLastKey, _delegate_getLastKey1;
|
|
7958
|
-
|
|
7959
|
-
let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
|
|
8119
|
+
var _delegate_getKeyAbove, _delegate_getLastKey, _delegate_getLastKey1;
|
|
8120
|
+
let nextKey = manager.focusedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
|
|
7960
8121
|
if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
|
|
7961
|
-
|
|
8122
|
+
if (nextKey != null) {
|
|
8123
|
+
e.preventDefault();
|
|
8124
|
+
navigateToKey(nextKey);
|
|
8125
|
+
}
|
|
7962
8126
|
}
|
|
7963
8127
|
break;
|
|
7964
8128
|
case 'ArrowLeft':
|
|
7965
8129
|
if (delegate.getKeyLeftOf) {
|
|
7966
|
-
var _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
7967
|
-
|
|
7968
|
-
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
8130
|
+
var _delegate_getKeyLeftOf, _delegate_getFirstKey2, _delegate_getLastKey2;
|
|
8131
|
+
let nextKey = manager.focusedKey != null ? (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey) : null;
|
|
7969
8132
|
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
|
|
7970
|
-
|
|
8133
|
+
if (nextKey != null) {
|
|
8134
|
+
e.preventDefault();
|
|
8135
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
|
|
8136
|
+
}
|
|
7971
8137
|
}
|
|
7972
8138
|
break;
|
|
7973
8139
|
case 'ArrowRight':
|
|
7974
8140
|
if (delegate.getKeyRightOf) {
|
|
7975
|
-
var _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
7976
|
-
|
|
7977
|
-
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
8141
|
+
var _delegate_getKeyRightOf, _delegate_getLastKey3, _delegate_getFirstKey3;
|
|
8142
|
+
let nextKey = manager.focusedKey != null ? (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey) : null;
|
|
7978
8143
|
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
|
|
7979
|
-
|
|
8144
|
+
if (nextKey != null) {
|
|
8145
|
+
e.preventDefault();
|
|
8146
|
+
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
|
|
8147
|
+
}
|
|
7980
8148
|
}
|
|
7981
8149
|
break;
|
|
7982
8150
|
case 'Home':
|
|
@@ -7984,8 +8152,10 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
7984
8152
|
e.preventDefault();
|
|
7985
8153
|
let firstKey = delegate.getFirstKey(manager.focusedKey, ($feb5ffebff200149$export$16792effe837dba3)(e));
|
|
7986
8154
|
manager.setFocusedKey(firstKey);
|
|
7987
|
-
if (
|
|
7988
|
-
|
|
8155
|
+
if (firstKey != null) {
|
|
8156
|
+
if (($feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
|
|
8157
|
+
else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
8158
|
+
}
|
|
7989
8159
|
}
|
|
7990
8160
|
break;
|
|
7991
8161
|
case 'End':
|
|
@@ -7993,22 +8163,28 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
7993
8163
|
e.preventDefault();
|
|
7994
8164
|
let lastKey = delegate.getLastKey(manager.focusedKey, ($feb5ffebff200149$export$16792effe837dba3)(e));
|
|
7995
8165
|
manager.setFocusedKey(lastKey);
|
|
7996
|
-
if (
|
|
7997
|
-
|
|
8166
|
+
if (lastKey != null) {
|
|
8167
|
+
if (($feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
|
|
8168
|
+
else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
8169
|
+
}
|
|
7998
8170
|
}
|
|
7999
8171
|
break;
|
|
8000
8172
|
case 'PageDown':
|
|
8001
|
-
if (delegate.getKeyPageBelow) {
|
|
8002
|
-
e.preventDefault();
|
|
8173
|
+
if (delegate.getKeyPageBelow && manager.focusedKey != null) {
|
|
8003
8174
|
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
8004
|
-
|
|
8175
|
+
if (nextKey != null) {
|
|
8176
|
+
e.preventDefault();
|
|
8177
|
+
navigateToKey(nextKey);
|
|
8178
|
+
}
|
|
8005
8179
|
}
|
|
8006
8180
|
break;
|
|
8007
8181
|
case 'PageUp':
|
|
8008
|
-
if (delegate.getKeyPageAbove) {
|
|
8009
|
-
e.preventDefault();
|
|
8182
|
+
if (delegate.getKeyPageAbove && manager.focusedKey != null) {
|
|
8010
8183
|
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
8011
|
-
|
|
8184
|
+
if (nextKey != null) {
|
|
8185
|
+
e.preventDefault();
|
|
8186
|
+
navigateToKey(nextKey);
|
|
8187
|
+
}
|
|
8012
8188
|
}
|
|
8013
8189
|
break;
|
|
8014
8190
|
case 'a':
|
|
@@ -8037,7 +8213,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8037
8213
|
let walker = ($9bf71ea28793e738$export$2d6ec8fc375ceafa)(ref.current, {
|
|
8038
8214
|
tabbable: true
|
|
8039
8215
|
});
|
|
8040
|
-
let next;
|
|
8216
|
+
let next = undefined;
|
|
8041
8217
|
let last;
|
|
8042
8218
|
do {
|
|
8043
8219
|
last = walker.lastChild();
|
|
@@ -8055,10 +8231,12 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8055
8231
|
top: 0,
|
|
8056
8232
|
left: 0
|
|
8057
8233
|
});
|
|
8058
|
-
($e9faafb641e167db$export$90fc3a17d93f704c)(scrollRef, 'scroll', isVirtualized ?
|
|
8234
|
+
($e9faafb641e167db$export$90fc3a17d93f704c)(scrollRef, 'scroll', isVirtualized ? undefined : ()=>{
|
|
8235
|
+
var _scrollRef_current, _scrollRef_current1;
|
|
8236
|
+
var _scrollRef_current_scrollTop, _scrollRef_current_scrollLeft;
|
|
8059
8237
|
scrollPos.current = {
|
|
8060
|
-
top: scrollRef.current.scrollTop,
|
|
8061
|
-
left: scrollRef.current.scrollLeft
|
|
8238
|
+
top: (_scrollRef_current_scrollTop = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTop) !== null && _scrollRef_current_scrollTop !== void 0 ? _scrollRef_current_scrollTop : 0,
|
|
8239
|
+
left: (_scrollRef_current_scrollLeft = (_scrollRef_current1 = scrollRef.current) === null || _scrollRef_current1 === void 0 ? void 0 : _scrollRef_current1.scrollLeft) !== null && _scrollRef_current_scrollLeft !== void 0 ? _scrollRef_current_scrollLeft : 0
|
|
8062
8240
|
};
|
|
8063
8241
|
});
|
|
8064
8242
|
let onFocus = (e)=>{
|
|
@@ -8071,6 +8249,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8071
8249
|
if (!e.currentTarget.contains(e.target)) return;
|
|
8072
8250
|
manager.setFocused(true);
|
|
8073
8251
|
if (manager.focusedKey == null) {
|
|
8252
|
+
var _delegate_getLastKey, _delegate_getFirstKey;
|
|
8074
8253
|
let navigateToFirstKey = (key)=>{
|
|
8075
8254
|
if (key != null) {
|
|
8076
8255
|
manager.setFocusedKey(key);
|
|
@@ -8082,14 +8261,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8082
8261
|
// and either focus the first or last item accordingly.
|
|
8083
8262
|
let relatedTarget = e.relatedTarget;
|
|
8084
8263
|
var _manager_lastSelectedKey, _manager_firstSelectedKey;
|
|
8085
|
-
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
|
|
8086
|
-
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
|
|
8087
|
-
} else if (!isVirtualized) {
|
|
8264
|
+
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate));
|
|
8265
|
+
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate));
|
|
8266
|
+
} else if (!isVirtualized && scrollRef.current) {
|
|
8088
8267
|
// Restore the scroll position to what it was before.
|
|
8089
8268
|
scrollRef.current.scrollTop = scrollPos.current.top;
|
|
8090
8269
|
scrollRef.current.scrollLeft = scrollPos.current.left;
|
|
8091
8270
|
}
|
|
8092
|
-
if (manager.focusedKey != null) {
|
|
8271
|
+
if (manager.focusedKey != null && scrollRef.current) {
|
|
8093
8272
|
// Refocus and scroll the focused item into view if it exists within the scrollable region.
|
|
8094
8273
|
let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
8095
8274
|
if (element) {
|
|
@@ -8109,10 +8288,13 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8109
8288
|
const autoFocusRef = (useRef)(autoFocus);
|
|
8110
8289
|
(useEffect)(()=>{
|
|
8111
8290
|
if (autoFocusRef.current) {
|
|
8291
|
+
var _delegate_getFirstKey, _delegate_getLastKey;
|
|
8112
8292
|
let focusedKey = null;
|
|
8293
|
+
var _delegate_getFirstKey1;
|
|
8113
8294
|
// Check focus strategy to determine which item to focus
|
|
8114
|
-
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
8115
|
-
|
|
8295
|
+
if (autoFocus === 'first') focusedKey = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
|
|
8296
|
+
var _delegate_getLastKey1;
|
|
8297
|
+
if (autoFocus === 'last') focusedKey = (_delegate_getLastKey1 = (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)) !== null && _delegate_getLastKey1 !== void 0 ? _delegate_getLastKey1 : null;
|
|
8116
8298
|
// If there are any selected keys, make the first one the new focus target
|
|
8117
8299
|
let selectedKeys = manager.selectedKeys;
|
|
8118
8300
|
if (selectedKeys.size) {
|
|
@@ -8124,14 +8306,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8124
8306
|
manager.setFocused(true);
|
|
8125
8307
|
manager.setFocusedKey(focusedKey);
|
|
8126
8308
|
// If no default focus key is selected, focus the collection itself.
|
|
8127
|
-
if (focusedKey == null && !shouldUseVirtualFocus) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8309
|
+
if (focusedKey == null && !shouldUseVirtualFocus && ref.current) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8128
8310
|
}
|
|
8129
8311
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8130
8312
|
}, []);
|
|
8131
8313
|
// Scroll the focused element into view when the focusedKey changes.
|
|
8132
8314
|
let lastFocusedKey = (useRef)(manager.focusedKey);
|
|
8133
8315
|
(useEffect)(()=>{
|
|
8134
|
-
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) &&
|
|
8316
|
+
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
|
|
8135
8317
|
let modality = ($507fabe10e71c6fb$export$630ff653c5ada6a9)();
|
|
8136
8318
|
let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
|
|
8137
8319
|
if (!element) // If item element wasn't found, return early (don't update autoFocusRef and lastFocusedKey).
|
|
@@ -8146,7 +8328,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8146
8328
|
}
|
|
8147
8329
|
}
|
|
8148
8330
|
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
|
|
8149
|
-
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8331
|
+
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8150
8332
|
lastFocusedKey.current = manager.focusedKey;
|
|
8151
8333
|
autoFocusRef.current = false;
|
|
8152
8334
|
});
|
|
@@ -8174,7 +8356,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
|
8174
8356
|
// This will be marshalled to either the first or last item depending on where focus came from.
|
|
8175
8357
|
// If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
|
|
8176
8358
|
// to move real DOM focus to the element anyway.
|
|
8177
|
-
let tabIndex;
|
|
8359
|
+
let tabIndex = undefined;
|
|
8178
8360
|
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
|
|
8179
8361
|
return {
|
|
8180
8362
|
collectionProps: {
|
|
@@ -8207,7 +8389,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
|
|
|
8207
8389
|
else {
|
|
8208
8390
|
if (manager.selectionMode === 'none') return;
|
|
8209
8391
|
if (manager.isLink(key)) {
|
|
8210
|
-
if (linkBehavior === 'selection') {
|
|
8392
|
+
if (linkBehavior === 'selection' && ref.current) {
|
|
8211
8393
|
let itemProps = manager.getItemProps(key);
|
|
8212
8394
|
router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
|
|
8213
8395
|
// Always set selected keys back to what they were so that select and combobox close.
|
|
@@ -8229,7 +8411,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
|
|
|
8229
8411
|
let isFocused = key === manager.focusedKey;
|
|
8230
8412
|
if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
|
|
8231
8413
|
if (focus) focus();
|
|
8232
|
-
else if (document.activeElement !== ref.current) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8414
|
+
else if (document.activeElement !== ref.current && ref.current) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
8233
8415
|
}
|
|
8234
8416
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8235
8417
|
}, [
|
|
@@ -8272,7 +8454,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
|
|
|
8272
8454
|
let hadPrimaryActionOnPressStart = (useRef)(false);
|
|
8273
8455
|
let performAction = (e)=>{
|
|
8274
8456
|
if (onAction) onAction();
|
|
8275
|
-
if (hasLinkAction) {
|
|
8457
|
+
if (hasLinkAction && ref.current) {
|
|
8276
8458
|
let itemProps = manager.getItemProps(key);
|
|
8277
8459
|
router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
|
|
8278
8460
|
}
|
|
@@ -8300,10 +8482,10 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
|
|
|
8300
8482
|
} else if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
|
|
8301
8483
|
};
|
|
8302
8484
|
else {
|
|
8303
|
-
itemPressProps.onPressUp = hasPrimaryAction ?
|
|
8485
|
+
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{
|
|
8304
8486
|
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
|
|
8305
8487
|
};
|
|
8306
|
-
itemPressProps.onPress = hasPrimaryAction ? performAction :
|
|
8488
|
+
itemPressProps.onPress = hasPrimaryAction ? performAction : undefined;
|
|
8307
8489
|
}
|
|
8308
8490
|
} else {
|
|
8309
8491
|
itemPressProps.onPressStart = (e)=>{
|
|
@@ -8396,6 +8578,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
|
|
|
8396
8578
|
*/ class $657e4dc4a6e88df0$export$8f5ed9ff9f511381 {
|
|
8397
8579
|
getItemRect(key) {
|
|
8398
8580
|
let container = this.ref.current;
|
|
8581
|
+
if (!container) return null;
|
|
8399
8582
|
let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
|
|
8400
8583
|
if (!item) return null;
|
|
8401
8584
|
let containerRect = container.getBoundingClientRect();
|
|
@@ -8409,18 +8592,20 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
|
|
|
8409
8592
|
}
|
|
8410
8593
|
getContentSize() {
|
|
8411
8594
|
let container = this.ref.current;
|
|
8595
|
+
var _container_scrollWidth, _container_scrollHeight;
|
|
8412
8596
|
return {
|
|
8413
|
-
width: container.scrollWidth,
|
|
8414
|
-
height: container.scrollHeight
|
|
8597
|
+
width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0,
|
|
8598
|
+
height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0
|
|
8415
8599
|
};
|
|
8416
8600
|
}
|
|
8417
8601
|
getVisibleRect() {
|
|
8418
8602
|
let container = this.ref.current;
|
|
8603
|
+
var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight;
|
|
8419
8604
|
return {
|
|
8420
|
-
x: container.scrollLeft,
|
|
8421
|
-
y: container.scrollTop,
|
|
8422
|
-
width: container.offsetWidth,
|
|
8423
|
-
height: container.offsetHeight
|
|
8605
|
+
x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0,
|
|
8606
|
+
y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0,
|
|
8607
|
+
width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0,
|
|
8608
|
+
height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0
|
|
8424
8609
|
};
|
|
8425
8610
|
}
|
|
8426
8611
|
constructor(ref){
|
|
@@ -8445,34 +8630,37 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
|
8445
8630
|
var _item_props;
|
|
8446
8631
|
return this.disabledBehavior === 'all' && (((_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.isDisabled) || this.disabledKeys.has(item.key));
|
|
8447
8632
|
}
|
|
8448
|
-
|
|
8449
|
-
|
|
8450
|
-
while(
|
|
8451
|
-
let item = this.collection.getItem(
|
|
8452
|
-
if (item.type === 'item' && !this.isDisabled(item)) return
|
|
8453
|
-
|
|
8633
|
+
findNextNonDisabled(key, getNext) {
|
|
8634
|
+
let nextKey = key;
|
|
8635
|
+
while(nextKey != null){
|
|
8636
|
+
let item = this.collection.getItem(nextKey);
|
|
8637
|
+
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return nextKey;
|
|
8638
|
+
nextKey = getNext(nextKey);
|
|
8454
8639
|
}
|
|
8455
8640
|
return null;
|
|
8456
8641
|
}
|
|
8642
|
+
getNextKey(key) {
|
|
8643
|
+
let nextKey = key;
|
|
8644
|
+
nextKey = this.collection.getKeyAfter(nextKey);
|
|
8645
|
+
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyAfter(key));
|
|
8646
|
+
}
|
|
8457
8647
|
getPreviousKey(key) {
|
|
8458
|
-
|
|
8459
|
-
|
|
8460
|
-
|
|
8461
|
-
if (item.type === 'item' && !this.isDisabled(item)) return key;
|
|
8462
|
-
key = this.collection.getKeyBefore(key);
|
|
8463
|
-
}
|
|
8464
|
-
return null;
|
|
8648
|
+
let nextKey = key;
|
|
8649
|
+
nextKey = this.collection.getKeyBefore(nextKey);
|
|
8650
|
+
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyBefore(key));
|
|
8465
8651
|
}
|
|
8466
8652
|
findKey(key, nextKey, shouldSkip) {
|
|
8467
|
-
let
|
|
8468
|
-
|
|
8653
|
+
let tempKey = key;
|
|
8654
|
+
let itemRect = this.layoutDelegate.getItemRect(tempKey);
|
|
8655
|
+
if (!itemRect || tempKey == null) return null;
|
|
8469
8656
|
// Find the item above or below in the same column.
|
|
8470
8657
|
let prevRect = itemRect;
|
|
8471
8658
|
do {
|
|
8472
|
-
|
|
8473
|
-
|
|
8474
|
-
|
|
8475
|
-
|
|
8659
|
+
tempKey = nextKey(tempKey);
|
|
8660
|
+
if (tempKey == null) break;
|
|
8661
|
+
itemRect = this.layoutDelegate.getItemRect(tempKey);
|
|
8662
|
+
}while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
|
|
8663
|
+
return tempKey;
|
|
8476
8664
|
}
|
|
8477
8665
|
isSameRow(prevRect, itemRect) {
|
|
8478
8666
|
return prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
|
|
@@ -8492,6 +8680,13 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
|
8492
8680
|
return right ? this.getPreviousKey(key) : this.getNextKey(key);
|
|
8493
8681
|
}
|
|
8494
8682
|
getKeyRightOf(key) {
|
|
8683
|
+
// This is a temporary solution for CardView until we refactor useSelectableCollection.
|
|
8684
|
+
// https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
|
|
8685
|
+
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf';
|
|
8686
|
+
if (this.layoutDelegate[layoutDelegateMethod]) {
|
|
8687
|
+
key = this.layoutDelegate[layoutDelegateMethod](key);
|
|
8688
|
+
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key));
|
|
8689
|
+
}
|
|
8495
8690
|
if (this.layout === 'grid') {
|
|
8496
8691
|
if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'rtl');
|
|
8497
8692
|
else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === 'rtl'), this.isSameColumn);
|
|
@@ -8499,6 +8694,11 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
|
8499
8694
|
return null;
|
|
8500
8695
|
}
|
|
8501
8696
|
getKeyLeftOf(key) {
|
|
8697
|
+
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf';
|
|
8698
|
+
if (this.layoutDelegate[layoutDelegateMethod]) {
|
|
8699
|
+
key = this.layoutDelegate[layoutDelegateMethod](key);
|
|
8700
|
+
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key));
|
|
8701
|
+
}
|
|
8502
8702
|
if (this.layout === 'grid') {
|
|
8503
8703
|
if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'ltr');
|
|
8504
8704
|
else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === 'ltr'), this.isSameColumn);
|
|
@@ -8507,61 +8707,53 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
|
8507
8707
|
}
|
|
8508
8708
|
getFirstKey() {
|
|
8509
8709
|
let key = this.collection.getFirstKey();
|
|
8510
|
-
|
|
8511
|
-
let item = this.collection.getItem(key);
|
|
8512
|
-
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return key;
|
|
8513
|
-
key = this.collection.getKeyAfter(key);
|
|
8514
|
-
}
|
|
8515
|
-
return null;
|
|
8710
|
+
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key));
|
|
8516
8711
|
}
|
|
8517
8712
|
getLastKey() {
|
|
8518
8713
|
let key = this.collection.getLastKey();
|
|
8519
|
-
|
|
8520
|
-
let item = this.collection.getItem(key);
|
|
8521
|
-
if (item.type === 'item' && !this.isDisabled(item)) return key;
|
|
8522
|
-
key = this.collection.getKeyBefore(key);
|
|
8523
|
-
}
|
|
8524
|
-
return null;
|
|
8714
|
+
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key));
|
|
8525
8715
|
}
|
|
8526
8716
|
getKeyPageAbove(key) {
|
|
8527
8717
|
let menu = this.ref.current;
|
|
8528
8718
|
let itemRect = this.layoutDelegate.getItemRect(key);
|
|
8529
8719
|
if (!itemRect) return null;
|
|
8530
|
-
if (!($cc38e7bd3fc7b213$export$2bb74740c4e19def)(menu)) return this.getFirstKey();
|
|
8720
|
+
if (menu && !($cc38e7bd3fc7b213$export$2bb74740c4e19def)(menu)) return this.getFirstKey();
|
|
8721
|
+
let nextKey = key;
|
|
8531
8722
|
if (this.orientation === 'horizontal') {
|
|
8532
8723
|
let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
|
|
8533
|
-
while(itemRect && itemRect.x > pageX){
|
|
8534
|
-
|
|
8535
|
-
itemRect =
|
|
8724
|
+
while(itemRect && itemRect.x > pageX && nextKey != null){
|
|
8725
|
+
nextKey = this.getKeyAbove(nextKey);
|
|
8726
|
+
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
|
|
8536
8727
|
}
|
|
8537
8728
|
} else {
|
|
8538
8729
|
let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
|
|
8539
|
-
while(itemRect && itemRect.y > pageY){
|
|
8540
|
-
|
|
8541
|
-
itemRect =
|
|
8730
|
+
while(itemRect && itemRect.y > pageY && nextKey != null){
|
|
8731
|
+
nextKey = this.getKeyAbove(nextKey);
|
|
8732
|
+
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
|
|
8542
8733
|
}
|
|
8543
8734
|
}
|
|
8544
|
-
return
|
|
8735
|
+
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey();
|
|
8545
8736
|
}
|
|
8546
8737
|
getKeyPageBelow(key) {
|
|
8547
8738
|
let menu = this.ref.current;
|
|
8548
8739
|
let itemRect = this.layoutDelegate.getItemRect(key);
|
|
8549
8740
|
if (!itemRect) return null;
|
|
8550
|
-
if (!($cc38e7bd3fc7b213$export$2bb74740c4e19def)(menu)) return this.getLastKey();
|
|
8741
|
+
if (menu && !($cc38e7bd3fc7b213$export$2bb74740c4e19def)(menu)) return this.getLastKey();
|
|
8742
|
+
let nextKey = key;
|
|
8551
8743
|
if (this.orientation === 'horizontal') {
|
|
8552
8744
|
let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
|
|
8553
|
-
while(itemRect && itemRect.x < pageX){
|
|
8554
|
-
|
|
8555
|
-
itemRect =
|
|
8745
|
+
while(itemRect && itemRect.x < pageX && nextKey != null){
|
|
8746
|
+
nextKey = this.getKeyBelow(nextKey);
|
|
8747
|
+
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
|
|
8556
8748
|
}
|
|
8557
8749
|
} else {
|
|
8558
8750
|
let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
|
|
8559
|
-
while(itemRect && itemRect.y < pageY){
|
|
8560
|
-
|
|
8561
|
-
itemRect =
|
|
8751
|
+
while(itemRect && itemRect.y < pageY && nextKey != null){
|
|
8752
|
+
nextKey = this.getKeyBelow(nextKey);
|
|
8753
|
+
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
|
|
8562
8754
|
}
|
|
8563
8755
|
}
|
|
8564
|
-
return
|
|
8756
|
+
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey();
|
|
8565
8757
|
}
|
|
8566
8758
|
getKeyForSearch(search, fromKey) {
|
|
8567
8759
|
if (!this.collator) return null;
|
|
@@ -8569,9 +8761,10 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
|
8569
8761
|
let key = fromKey || this.getFirstKey();
|
|
8570
8762
|
while(key != null){
|
|
8571
8763
|
let item = collection.getItem(key);
|
|
8764
|
+
if (!item) return null;
|
|
8572
8765
|
let substring = item.textValue.slice(0, search.length);
|
|
8573
8766
|
if (item.textValue && this.collator.compare(substring, search) === 0) return key;
|
|
8574
|
-
key = this.
|
|
8767
|
+
key = this.getNextKey(key);
|
|
8575
8768
|
}
|
|
8576
8769
|
return null;
|
|
8577
8770
|
}
|
|
@@ -8742,17 +8935,26 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8742
8935
|
}
|
|
8743
8936
|
*iterateCollection(props) {
|
|
8744
8937
|
let { children: children, items: items } = props;
|
|
8745
|
-
if (
|
|
8938
|
+
if (($dbSRa$react).isValidElement(children) && children.type === ($dbSRa$react).Fragment) yield* this.iterateCollection({
|
|
8939
|
+
children: children.props.children,
|
|
8940
|
+
items: items
|
|
8941
|
+
});
|
|
8942
|
+
else if (typeof children === 'function') {
|
|
8746
8943
|
if (!items) throw new Error('props.children was a function but props.items is missing');
|
|
8747
|
-
|
|
8748
|
-
|
|
8749
|
-
|
|
8750
|
-
|
|
8751
|
-
|
|
8944
|
+
let index = 0;
|
|
8945
|
+
for (let item of items){
|
|
8946
|
+
yield* this.getFullNode({
|
|
8947
|
+
value: item,
|
|
8948
|
+
index: index
|
|
8949
|
+
}, {
|
|
8950
|
+
renderer: children
|
|
8951
|
+
});
|
|
8952
|
+
index++;
|
|
8953
|
+
}
|
|
8752
8954
|
} else {
|
|
8753
8955
|
let items = [];
|
|
8754
8956
|
($dbSRa$react).Children.forEach(children, (child)=>{
|
|
8755
|
-
items.push(child);
|
|
8957
|
+
if (child) items.push(child);
|
|
8756
8958
|
});
|
|
8757
8959
|
let index = 0;
|
|
8758
8960
|
for (let item of items){
|
|
@@ -8785,6 +8987,19 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8785
8987
|
};
|
|
8786
8988
|
}
|
|
8787
8989
|
*getFullNode(partialNode, state, parentKey, parentNode) {
|
|
8990
|
+
if (($dbSRa$react).isValidElement(partialNode.element) && partialNode.element.type === ($dbSRa$react).Fragment) {
|
|
8991
|
+
let children = [];
|
|
8992
|
+
($dbSRa$react).Children.forEach(partialNode.element.props.children, (child)=>{
|
|
8993
|
+
children.push(child);
|
|
8994
|
+
});
|
|
8995
|
+
var _partialNode_index;
|
|
8996
|
+
let index = (_partialNode_index = partialNode.index) !== null && _partialNode_index !== void 0 ? _partialNode_index : 0;
|
|
8997
|
+
for (const child of children)yield* this.getFullNode({
|
|
8998
|
+
element: child,
|
|
8999
|
+
index: index++
|
|
9000
|
+
}, state, parentKey, parentNode);
|
|
9001
|
+
return;
|
|
9002
|
+
}
|
|
8788
9003
|
// If there's a value instead of an element on the node, and a parent renderer function is available,
|
|
8789
9004
|
// use it to render an element for the value.
|
|
8790
9005
|
let element = partialNode.element;
|
|
@@ -8803,17 +9018,19 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8803
9018
|
if (($dbSRa$react).isValidElement(element)) {
|
|
8804
9019
|
let type = element.type;
|
|
8805
9020
|
if (typeof type !== 'function' && typeof type.getCollectionNode !== 'function') {
|
|
8806
|
-
let name =
|
|
9021
|
+
let name = element.type;
|
|
8807
9022
|
throw new Error(`Unknown element <${name}> in collection.`);
|
|
8808
9023
|
}
|
|
8809
9024
|
let childNodes = type.getCollectionNode(element.props, this.context);
|
|
8810
|
-
|
|
9025
|
+
var _partialNode_index1;
|
|
9026
|
+
let index = (_partialNode_index1 = partialNode.index) !== null && _partialNode_index1 !== void 0 ? _partialNode_index1 : 0;
|
|
8811
9027
|
let result = childNodes.next();
|
|
8812
9028
|
while(!result.done && result.value){
|
|
8813
9029
|
let childNode = result.value;
|
|
8814
9030
|
partialNode.index = index;
|
|
8815
|
-
|
|
8816
|
-
|
|
9031
|
+
var _childNode_key;
|
|
9032
|
+
let nodeKey = (_childNode_key = childNode.key) !== null && _childNode_key !== void 0 ? _childNode_key : null;
|
|
9033
|
+
if (nodeKey == null) nodeKey = childNode.element ? null : this.getKey(element, partialNode, state, parentKey);
|
|
8817
9034
|
let nodes = this.getFullNode({
|
|
8818
9035
|
...childNode,
|
|
8819
9036
|
key: nodeKey,
|
|
@@ -8824,12 +9041,14 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8824
9041
|
...nodes
|
|
8825
9042
|
];
|
|
8826
9043
|
for (let node of children){
|
|
9044
|
+
var _childNode_value, _ref;
|
|
8827
9045
|
// Cache the node based on its value
|
|
8828
|
-
node.value = childNode.value
|
|
9046
|
+
node.value = (_ref = (_childNode_value = childNode.value) !== null && _childNode_value !== void 0 ? _childNode_value : partialNode.value) !== null && _ref !== void 0 ? _ref : null;
|
|
8829
9047
|
if (node.value) this.cache.set(node.value, node);
|
|
9048
|
+
var _parentNode_type;
|
|
8830
9049
|
// The partial node may have specified a type for the child in order to specify a constraint.
|
|
8831
9050
|
// Verify that the full node that was built recursively matches this type.
|
|
8832
|
-
if (partialNode.type && node.type !== partialNode.type) throw new Error(`Unsupported type <${$eb2240fc39a57fa5$var$capitalize(node.type)}> in <${$eb2240fc39a57fa5$var$capitalize(parentNode.type)}>. Only <${$eb2240fc39a57fa5$var$capitalize(partialNode.type)}> is supported.`);
|
|
9051
|
+
if (partialNode.type && node.type !== partialNode.type) throw new Error(`Unsupported type <${$eb2240fc39a57fa5$var$capitalize(node.type)}> in <${$eb2240fc39a57fa5$var$capitalize((_parentNode_type = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== null && _parentNode_type !== void 0 ? _parentNode_type : 'unknown parent type')}>. Only <${$eb2240fc39a57fa5$var$capitalize(partialNode.type)}> is supported.`);
|
|
8833
9052
|
index++;
|
|
8834
9053
|
yield node;
|
|
8835
9054
|
}
|
|
@@ -8838,25 +9057,26 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8838
9057
|
return;
|
|
8839
9058
|
}
|
|
8840
9059
|
// Ignore invalid elements
|
|
8841
|
-
if (partialNode.key == null) return;
|
|
9060
|
+
if (partialNode.key == null || partialNode.type == null) return;
|
|
8842
9061
|
// Create full node
|
|
8843
9062
|
let builder = this;
|
|
9063
|
+
var _partialNode_value, _partialNode_textValue;
|
|
8844
9064
|
let node = {
|
|
8845
9065
|
type: partialNode.type,
|
|
8846
9066
|
props: partialNode.props,
|
|
8847
9067
|
key: partialNode.key,
|
|
8848
9068
|
parentKey: parentNode ? parentNode.key : null,
|
|
8849
|
-
value: partialNode.value,
|
|
9069
|
+
value: (_partialNode_value = partialNode.value) !== null && _partialNode_value !== void 0 ? _partialNode_value : null,
|
|
8850
9070
|
level: parentNode ? parentNode.level + 1 : 0,
|
|
8851
9071
|
index: partialNode.index,
|
|
8852
9072
|
rendered: partialNode.rendered,
|
|
8853
|
-
textValue: partialNode.textValue,
|
|
9073
|
+
textValue: (_partialNode_textValue = partialNode.textValue) !== null && _partialNode_textValue !== void 0 ? _partialNode_textValue : '',
|
|
8854
9074
|
'aria-label': partialNode['aria-label'],
|
|
8855
9075
|
wrapper: partialNode.wrapper,
|
|
8856
9076
|
shouldInvalidate: partialNode.shouldInvalidate,
|
|
8857
|
-
hasChildNodes: partialNode.hasChildNodes,
|
|
9077
|
+
hasChildNodes: partialNode.hasChildNodes || false,
|
|
8858
9078
|
childNodes: $eb2240fc39a57fa5$var$iterable(function*() {
|
|
8859
|
-
if (!partialNode.hasChildNodes) return;
|
|
9079
|
+
if (!partialNode.hasChildNodes || !partialNode.childNodes) return;
|
|
8860
9080
|
let index = 0;
|
|
8861
9081
|
for (let child of partialNode.childNodes()){
|
|
8862
9082
|
// Ensure child keys are globally unique by prepending the parent node's key
|
|
@@ -8865,8 +9085,10 @@ class $eb2240fc39a57fa5$export$bf788dd355e3a401 {
|
|
|
8865
9085
|
// but another parent has key `ab` and its child has a key `c`. The combined keys would result in both
|
|
8866
9086
|
// children having a key of `abc`.
|
|
8867
9087
|
child.key = `${node.key}${child.key}`;
|
|
8868
|
-
|
|
8869
|
-
|
|
9088
|
+
let nodes = builder.getFullNode({
|
|
9089
|
+
...child,
|
|
9090
|
+
index: index
|
|
9091
|
+
}, builder.getChildState(state, child), node.key, node);
|
|
8870
9092
|
for (let node of nodes){
|
|
8871
9093
|
index++;
|
|
8872
9094
|
yield node;
|
|
@@ -8995,9 +9217,10 @@ function $c5a24bc478652b5f$export$8c434b3a7a4dad6(collection, a, b) {
|
|
|
8995
9217
|
}
|
|
8996
9218
|
function $c5a24bc478652b5f$var$getAncestors(collection, node) {
|
|
8997
9219
|
let parents = [];
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9220
|
+
let currNode = node;
|
|
9221
|
+
while((currNode === null || currNode === void 0 ? void 0 : currNode.parentKey) != null){
|
|
9222
|
+
currNode = collection.getItem(currNode.parentKey);
|
|
9223
|
+
if (currNode) parents.unshift(currNode);
|
|
9001
9224
|
}
|
|
9002
9225
|
return parents;
|
|
9003
9226
|
}
|
|
@@ -9017,14 +9240,15 @@ const $453cc9f0df89c0a5$var$cache = new WeakMap();
|
|
|
9017
9240
|
function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
|
|
9018
9241
|
let count = $453cc9f0df89c0a5$var$cache.get(collection);
|
|
9019
9242
|
if (count != null) return count;
|
|
9020
|
-
count
|
|
9243
|
+
// TS isn't smart enough to know we've ensured count is a number, so use a new variable
|
|
9244
|
+
let counter = 0;
|
|
9021
9245
|
let countItems = (items)=>{
|
|
9022
9246
|
for (let item of items)if (item.type === 'section') countItems(($c5a24bc478652b5f$export$1005530eda016c13)(item, collection));
|
|
9023
|
-
else
|
|
9247
|
+
else counter++;
|
|
9024
9248
|
};
|
|
9025
9249
|
countItems(collection);
|
|
9026
|
-
$453cc9f0df89c0a5$var$cache.set(collection,
|
|
9027
|
-
return
|
|
9250
|
+
$453cc9f0df89c0a5$var$cache.set(collection, counter);
|
|
9251
|
+
return counter;
|
|
9028
9252
|
}
|
|
9029
9253
|
|
|
9030
9254
|
/*
|
|
@@ -9445,154 +9669,51 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
9445
9669
|
case 'ArrowUp':
|
|
9446
9670
|
if (!('continuePropagation' in e)) e.stopPropagation();
|
|
9447
9671
|
e.preventDefault();
|
|
9448
|
-
state.toggle('last');
|
|
9449
|
-
break;
|
|
9450
|
-
default:
|
|
9451
|
-
// Allow other keys.
|
|
9452
|
-
if ('continuePropagation' in e) e.continuePropagation();
|
|
9453
|
-
}
|
|
9454
|
-
};
|
|
9455
|
-
let stringFormatter = ($fca6afa0e843324b$export$f12b703ca79dfbb1)((($parcel$interopDefault$4($2cbb7ca666678a14$exports))), '@react-aria/menu');
|
|
9456
|
-
let { longPressProps: longPressProps } = ($8a26561d2877236e$export$c24ed0104d07eab9)({
|
|
9457
|
-
isDisabled: isDisabled || trigger !== 'longPress',
|
|
9458
|
-
accessibilityDescription: stringFormatter.format('longPressMessage'),
|
|
9459
|
-
onLongPressStart () {
|
|
9460
|
-
state.close();
|
|
9461
|
-
},
|
|
9462
|
-
onLongPress () {
|
|
9463
|
-
state.open('first');
|
|
9464
|
-
}
|
|
9465
|
-
});
|
|
9466
|
-
let pressProps = {
|
|
9467
|
-
onPressStart (e) {
|
|
9468
|
-
// For consistency with native, open the menu on mouse/key down, but touch up.
|
|
9469
|
-
if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) // If opened with a screen reader, auto focus the first item.
|
|
9470
|
-
// Otherwise, the menu itself will be focused.
|
|
9471
|
-
state.open(e.pointerType === 'virtual' ? 'first' : null);
|
|
9472
|
-
},
|
|
9473
|
-
onPress (e) {
|
|
9474
|
-
if (e.pointerType === 'touch' && !isDisabled) state.toggle();
|
|
9475
|
-
}
|
|
9476
|
-
};
|
|
9477
|
-
// omit onPress from triggerProps since we override it above.
|
|
9478
|
-
delete triggerProps.onPress;
|
|
9479
|
-
return {
|
|
9480
|
-
|
|
9481
|
-
|
|
9482
|
-
...
|
|
9483
|
-
|
|
9484
|
-
|
|
9485
|
-
|
|
9486
|
-
|
|
9487
|
-
|
|
9488
|
-
|
|
9489
|
-
|
|
9490
|
-
|
|
9491
|
-
|
|
9492
|
-
|
|
9493
|
-
}
|
|
9494
|
-
|
|
9495
|
-
/*
|
|
9496
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
9497
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9498
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9499
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9500
|
-
*
|
|
9501
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
9502
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9503
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
9504
|
-
* governing permissions and limitations under the License.
|
|
9505
|
-
*/
|
|
9506
|
-
|
|
9507
|
-
|
|
9508
|
-
|
|
9509
|
-
|
|
9510
|
-
|
|
9511
|
-
|
|
9512
|
-
function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
|
|
9513
|
-
let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
|
|
9514
|
-
let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || '', props.onChange);
|
|
9515
|
-
let { focusableProps: focusableProps } = ($e6afbd83fe6ebbd2$export$4c014de7c8940b4c)(props, ref);
|
|
9516
|
-
let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
|
|
9517
|
-
...props,
|
|
9518
|
-
value: value
|
|
9519
|
-
});
|
|
9520
|
-
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
|
|
9521
|
-
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = ($2baaea4c71418dea$export$294aa081a6c6f55d)({
|
|
9522
|
-
...props,
|
|
9523
|
-
isInvalid: isInvalid,
|
|
9524
|
-
errorMessage: props.errorMessage || validationErrors
|
|
9525
|
-
});
|
|
9526
|
-
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
9527
|
-
labelable: true
|
|
9528
|
-
});
|
|
9529
|
-
const inputOnlyProps = {
|
|
9530
|
-
type: type,
|
|
9531
|
-
pattern: props.pattern
|
|
9532
|
-
};
|
|
9533
|
-
($99facab73266f662$export$5add1d006293d136)(ref, value, setValue);
|
|
9534
|
-
($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
|
|
9535
|
-
(useEffect)(()=>{
|
|
9536
|
-
// This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
|
|
9537
|
-
// We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
|
|
9538
|
-
// which causes Chrome to skip validation. Only updating `value` is ok in our case since our
|
|
9539
|
-
// textareas are always controlled. React is planning on removing this synchronization in a
|
|
9540
|
-
// future major version.
|
|
9541
|
-
// https://github.com/facebook/react/issues/19474
|
|
9542
|
-
// https://github.com/facebook/react/issues/11896
|
|
9543
|
-
if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
|
|
9544
|
-
let input = ref.current;
|
|
9545
|
-
Object.defineProperty(input, 'defaultValue', {
|
|
9546
|
-
get: ()=>input.value,
|
|
9547
|
-
set: ()=>{},
|
|
9548
|
-
configurable: true
|
|
9549
|
-
});
|
|
9550
|
-
}
|
|
9551
|
-
}, [
|
|
9552
|
-
ref
|
|
9553
|
-
]);
|
|
9554
|
-
return {
|
|
9555
|
-
labelProps: labelProps,
|
|
9556
|
-
inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
|
|
9557
|
-
disabled: isDisabled,
|
|
9558
|
-
readOnly: isReadOnly,
|
|
9559
|
-
required: isRequired && validationBehavior === 'native',
|
|
9560
|
-
'aria-required': isRequired && validationBehavior === 'aria' || undefined,
|
|
9561
|
-
'aria-invalid': isInvalid || undefined,
|
|
9562
|
-
'aria-errormessage': props['aria-errormessage'],
|
|
9563
|
-
'aria-activedescendant': props['aria-activedescendant'],
|
|
9564
|
-
'aria-autocomplete': props['aria-autocomplete'],
|
|
9565
|
-
'aria-haspopup': props['aria-haspopup'],
|
|
9566
|
-
value: value,
|
|
9567
|
-
onChange: (e)=>setValue(e.target.value),
|
|
9568
|
-
autoComplete: props.autoComplete,
|
|
9569
|
-
autoCapitalize: props.autoCapitalize,
|
|
9570
|
-
maxLength: props.maxLength,
|
|
9571
|
-
minLength: props.minLength,
|
|
9572
|
-
name: props.name,
|
|
9573
|
-
placeholder: props.placeholder,
|
|
9574
|
-
inputMode: props.inputMode,
|
|
9575
|
-
// Clipboard events
|
|
9576
|
-
onCopy: props.onCopy,
|
|
9577
|
-
onCut: props.onCut,
|
|
9578
|
-
onPaste: props.onPaste,
|
|
9579
|
-
// Composition events
|
|
9580
|
-
onCompositionEnd: props.onCompositionEnd,
|
|
9581
|
-
onCompositionStart: props.onCompositionStart,
|
|
9582
|
-
onCompositionUpdate: props.onCompositionUpdate,
|
|
9583
|
-
// Selection events
|
|
9584
|
-
onSelect: props.onSelect,
|
|
9585
|
-
// Input events
|
|
9586
|
-
onBeforeInput: props.onBeforeInput,
|
|
9587
|
-
onInput: props.onInput,
|
|
9588
|
-
...focusableProps,
|
|
9589
|
-
...fieldProps
|
|
9590
|
-
}),
|
|
9591
|
-
descriptionProps: descriptionProps,
|
|
9592
|
-
errorMessageProps: errorMessageProps,
|
|
9593
|
-
isInvalid: isInvalid,
|
|
9594
|
-
validationErrors: validationErrors,
|
|
9595
|
-
validationDetails: validationDetails
|
|
9672
|
+
state.toggle('last');
|
|
9673
|
+
break;
|
|
9674
|
+
default:
|
|
9675
|
+
// Allow other keys.
|
|
9676
|
+
if ('continuePropagation' in e) e.continuePropagation();
|
|
9677
|
+
}
|
|
9678
|
+
};
|
|
9679
|
+
let stringFormatter = ($fca6afa0e843324b$export$f12b703ca79dfbb1)((($parcel$interopDefault$4($2cbb7ca666678a14$exports))), '@react-aria/menu');
|
|
9680
|
+
let { longPressProps: longPressProps } = ($8a26561d2877236e$export$c24ed0104d07eab9)({
|
|
9681
|
+
isDisabled: isDisabled || trigger !== 'longPress',
|
|
9682
|
+
accessibilityDescription: stringFormatter.format('longPressMessage'),
|
|
9683
|
+
onLongPressStart () {
|
|
9684
|
+
state.close();
|
|
9685
|
+
},
|
|
9686
|
+
onLongPress () {
|
|
9687
|
+
state.open('first');
|
|
9688
|
+
}
|
|
9689
|
+
});
|
|
9690
|
+
let pressProps = {
|
|
9691
|
+
onPressStart (e) {
|
|
9692
|
+
// For consistency with native, open the menu on mouse/key down, but touch up.
|
|
9693
|
+
if (e.pointerType !== 'touch' && e.pointerType !== 'keyboard' && !isDisabled) // If opened with a screen reader, auto focus the first item.
|
|
9694
|
+
// Otherwise, the menu itself will be focused.
|
|
9695
|
+
state.open(e.pointerType === 'virtual' ? 'first' : null);
|
|
9696
|
+
},
|
|
9697
|
+
onPress (e) {
|
|
9698
|
+
if (e.pointerType === 'touch' && !isDisabled) state.toggle();
|
|
9699
|
+
}
|
|
9700
|
+
};
|
|
9701
|
+
// omit onPress from triggerProps since we override it above.
|
|
9702
|
+
delete triggerProps.onPress;
|
|
9703
|
+
return {
|
|
9704
|
+
// @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples
|
|
9705
|
+
menuTriggerProps: {
|
|
9706
|
+
...triggerProps,
|
|
9707
|
+
...trigger === 'press' ? pressProps : longPressProps,
|
|
9708
|
+
id: menuTriggerId,
|
|
9709
|
+
onKeyDown: onKeyDown
|
|
9710
|
+
},
|
|
9711
|
+
menuProps: {
|
|
9712
|
+
...overlayProps,
|
|
9713
|
+
'aria-labelledby': menuTriggerId,
|
|
9714
|
+
autoFocus: state.focusStrategy || true,
|
|
9715
|
+
onClose: state.close
|
|
9716
|
+
}
|
|
9596
9717
|
};
|
|
9597
9718
|
}
|
|
9598
9719
|
|
|
@@ -9666,6 +9787,85 @@ function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
|
|
|
9666
9787
|
};
|
|
9667
9788
|
}
|
|
9668
9789
|
|
|
9790
|
+
/*
|
|
9791
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
9792
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
9793
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9794
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9795
|
+
*
|
|
9796
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
9797
|
+
* the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9798
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
9799
|
+
* governing permissions and limitations under the License.
|
|
9800
|
+
*/
|
|
9801
|
+
|
|
9802
|
+
|
|
9803
|
+
|
|
9804
|
+
function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
|
|
9805
|
+
let { isDisabled: isDisabled } = props;
|
|
9806
|
+
let triggerId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
9807
|
+
let panelId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
9808
|
+
let isSSR = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
|
|
9809
|
+
let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
|
|
9810
|
+
let raf = (useRef)(null);
|
|
9811
|
+
let handleBeforeMatch = (useCallback)(()=>{
|
|
9812
|
+
// Wait a frame to revert browser's removal of hidden attribute
|
|
9813
|
+
raf.current = requestAnimationFrame(()=>{
|
|
9814
|
+
if (ref.current) ref.current.setAttribute('hidden', 'until-found');
|
|
9815
|
+
});
|
|
9816
|
+
// Force sync state update
|
|
9817
|
+
(flushSync)(()=>{
|
|
9818
|
+
state.toggle();
|
|
9819
|
+
});
|
|
9820
|
+
}, [
|
|
9821
|
+
ref,
|
|
9822
|
+
state
|
|
9823
|
+
]);
|
|
9824
|
+
// @ts-ignore https://github.com/facebook/react/pull/24741
|
|
9825
|
+
($e9faafb641e167db$export$90fc3a17d93f704c)(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
|
|
9826
|
+
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
9827
|
+
// Cancel any pending RAF to prevent stale updates
|
|
9828
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
9829
|
+
// Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
|
|
9830
|
+
if (supportsBeforeMatch && ref.current && !isDisabled) {
|
|
9831
|
+
if (state.isExpanded) ref.current.removeAttribute('hidden');
|
|
9832
|
+
else ref.current.setAttribute('hidden', 'until-found');
|
|
9833
|
+
}
|
|
9834
|
+
}, [
|
|
9835
|
+
isDisabled,
|
|
9836
|
+
ref,
|
|
9837
|
+
state.isExpanded,
|
|
9838
|
+
supportsBeforeMatch
|
|
9839
|
+
]);
|
|
9840
|
+
(useEffect)(()=>{
|
|
9841
|
+
return ()=>{
|
|
9842
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
9843
|
+
};
|
|
9844
|
+
}, []);
|
|
9845
|
+
return {
|
|
9846
|
+
buttonProps: {
|
|
9847
|
+
id: triggerId,
|
|
9848
|
+
'aria-expanded': state.isExpanded,
|
|
9849
|
+
'aria-controls': panelId,
|
|
9850
|
+
onPress: (e)=>{
|
|
9851
|
+
if (!isDisabled && e.pointerType !== 'keyboard') state.toggle();
|
|
9852
|
+
},
|
|
9853
|
+
isDisabled: isDisabled,
|
|
9854
|
+
onPressStart (e) {
|
|
9855
|
+
if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
|
|
9856
|
+
}
|
|
9857
|
+
},
|
|
9858
|
+
panelProps: {
|
|
9859
|
+
id: panelId,
|
|
9860
|
+
// This can be overridden at the panel element level.
|
|
9861
|
+
role: 'group',
|
|
9862
|
+
'aria-labelledby': triggerId,
|
|
9863
|
+
'aria-hidden': !state.isExpanded,
|
|
9864
|
+
hidden: supportsBeforeMatch ? true : !state.isExpanded
|
|
9865
|
+
}
|
|
9866
|
+
};
|
|
9867
|
+
}
|
|
9868
|
+
|
|
9669
9869
|
/*
|
|
9670
9870
|
* Copyright 2020 Adobe. All rights reserved.
|
|
9671
9871
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -9678,7 +9878,8 @@ function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
|
|
|
9678
9878
|
* governing permissions and limitations under the License.
|
|
9679
9879
|
*/ const $ce9b18daab526bbd$export$5b9bb410392e3991 = new WeakMap();
|
|
9680
9880
|
function $ce9b18daab526bbd$export$f45c25170b9a99c2(state, key) {
|
|
9681
|
-
|
|
9881
|
+
var _listMap_get;
|
|
9882
|
+
let { id: id } = (_listMap_get = $ce9b18daab526bbd$export$5b9bb410392e3991.get(state)) !== null && _listMap_get !== void 0 ? _listMap_get : {};
|
|
9682
9883
|
if (!id) throw new Error('Unknown list');
|
|
9683
9884
|
return `${id}-${$ce9b18daab526bbd$export$e0c709538cb8ae18(key)}`;
|
|
9684
9885
|
}
|
|
@@ -10340,7 +10541,7 @@ function $5b9b5b5723db6ae1$export$be42ebdab07ae4c2(props) {
|
|
|
10340
10541
|
let interactionDescription = (useMemo)(()=>{
|
|
10341
10542
|
let selectionMode = props.selectionManager.selectionMode;
|
|
10342
10543
|
let selectionBehavior = props.selectionManager.selectionBehavior;
|
|
10343
|
-
let message
|
|
10544
|
+
let message;
|
|
10344
10545
|
if (shouldLongPress) message = stringFormatter.format('longPressToSelect');
|
|
10345
10546
|
return selectionBehavior === 'replace' && selectionMode !== 'none' && props.hasItemActions ? message : undefined;
|
|
10346
10547
|
}, [
|
|
@@ -10462,26 +10663,39 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
10462
10663
|
var _ref_current;
|
|
10463
10664
|
// Don't shift focus to the row if the active element is a element within the row already
|
|
10464
10665
|
// (e.g. clicking on a row button)
|
|
10465
|
-
if (keyWhenFocused.current != null && node.key !== keyWhenFocused.current || !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(document.activeElement))) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
10666
|
+
if (ref.current !== null && (keyWhenFocused.current != null && node.key !== keyWhenFocused.current || !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(document.activeElement)))) ($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
10466
10667
|
};
|
|
10467
10668
|
let treeGridRowProps = {};
|
|
10468
10669
|
let hasChildRows;
|
|
10469
10670
|
let hasLink = state.selectionManager.isLink(node.key);
|
|
10470
10671
|
if (node != null && 'expandedKeys' in state) {
|
|
10672
|
+
var _state_collection_getChildren, _state_collection, _filter_at;
|
|
10471
10673
|
// TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
|
|
10472
10674
|
// true...
|
|
10675
|
+
let children = (_state_collection_getChildren = (_state_collection = state.collection).getChildren) === null || _state_collection_getChildren === void 0 ? void 0 : _state_collection_getChildren.call(_state_collection, node.key);
|
|
10473
10676
|
hasChildRows = [
|
|
10474
|
-
...
|
|
10677
|
+
...children !== null && children !== void 0 ? children : []
|
|
10475
10678
|
].length > 1;
|
|
10476
10679
|
if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) onAction = ()=>state.toggleKey(node.key);
|
|
10477
10680
|
let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
|
|
10681
|
+
let setSize = 1;
|
|
10682
|
+
var _filter_at_index;
|
|
10683
|
+
if (node.level > 0 && (node === null || node === void 0 ? void 0 : node.parentKey) != null) {
|
|
10684
|
+
let parent = state.collection.getItem(node.parentKey);
|
|
10685
|
+
if (parent) {
|
|
10686
|
+
var _state_collection_getChildren1, _state_collection1;
|
|
10687
|
+
// siblings must exist because our original node exists, same with lastItem
|
|
10688
|
+
let siblings = (_state_collection_getChildren1 = (_state_collection1 = state.collection).getChildren) === null || _state_collection_getChildren1 === void 0 ? void 0 : _state_collection_getChildren1.call(_state_collection1, parent.key);
|
|
10689
|
+
setSize = ($c5a24bc478652b5f$export$7475b2c64539e4cf)(siblings).index + 1;
|
|
10690
|
+
}
|
|
10691
|
+
} else setSize = ((_filter_at_index = (_filter_at = [
|
|
10692
|
+
...state.collection
|
|
10693
|
+
].filter((row)=>row.level === 0).at(-1)) === null || _filter_at === void 0 ? void 0 : _filter_at.index) !== null && _filter_at_index !== void 0 ? _filter_at_index : 0) + 1;
|
|
10478
10694
|
treeGridRowProps = {
|
|
10479
10695
|
'aria-expanded': isExpanded,
|
|
10480
10696
|
'aria-level': node.level + 1,
|
|
10481
10697
|
'aria-posinset': (node === null || node === void 0 ? void 0 : node.index) + 1,
|
|
10482
|
-
'aria-setsize':
|
|
10483
|
-
...state.collection
|
|
10484
|
-
].filter((row)=>row.level === 0).at(-1).index + 1
|
|
10698
|
+
'aria-setsize': setSize
|
|
10485
10699
|
};
|
|
10486
10700
|
}
|
|
10487
10701
|
let { itemProps: itemProps, ...itemStates } = ($880e95eb8b93ba9a$export$ecf600387e221c37)({
|
|
@@ -10495,7 +10709,7 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
10495
10709
|
linkBehavior: linkBehavior
|
|
10496
10710
|
});
|
|
10497
10711
|
let onKeyDown = (e)=>{
|
|
10498
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
10712
|
+
if (!e.currentTarget.contains(e.target) || !ref.current || !document.activeElement) return;
|
|
10499
10713
|
let walker = ($9bf71ea28793e738$export$2d6ec8fc375ceafa)(ref.current);
|
|
10500
10714
|
walker.currentNode = document.activeElement;
|
|
10501
10715
|
if ('expandedKeys' in state && document.activeElement === ref.current) {
|
|
@@ -10580,9 +10794,10 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
10580
10794
|
// to the row above/below instead. We need to re-dispatch the event from a higher parent so it still
|
|
10581
10795
|
// bubbles and gets handled by useSelectableCollection.
|
|
10582
10796
|
if (!e.altKey && ref.current.contains(e.target)) {
|
|
10797
|
+
var _ref_current_parentElement;
|
|
10583
10798
|
e.stopPropagation();
|
|
10584
10799
|
e.preventDefault();
|
|
10585
|
-
ref.current.parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
10800
|
+
(_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));
|
|
10586
10801
|
}
|
|
10587
10802
|
break;
|
|
10588
10803
|
case 'Tab':
|
|
@@ -10651,8 +10866,8 @@ function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
|
|
|
10651
10866
|
};
|
|
10652
10867
|
}
|
|
10653
10868
|
function $4e8b0456ef72939f$var$last(walker) {
|
|
10654
|
-
let next;
|
|
10655
|
-
let last;
|
|
10869
|
+
let next = null;
|
|
10870
|
+
let last = null;
|
|
10656
10871
|
do {
|
|
10657
10872
|
last = walker.lastChild();
|
|
10658
10873
|
if (last) next = last;
|
|
@@ -10894,7 +11109,7 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
|
|
|
10894
11109
|
usage: 'search',
|
|
10895
11110
|
sensitivity: 'base'
|
|
10896
11111
|
});
|
|
10897
|
-
let delegate = (useMemo)(()=>keyboardDelegate || new ($2a25aae57d74318e$export$a05409b8bb224a5a)(state.collection, state.disabledKeys,
|
|
11112
|
+
let delegate = (useMemo)(()=>keyboardDelegate || new ($2a25aae57d74318e$export$a05409b8bb224a5a)(state.collection, state.disabledKeys, ref, collator), [
|
|
10898
11113
|
keyboardDelegate,
|
|
10899
11114
|
state.collection,
|
|
10900
11115
|
state.disabledKeys,
|
|
@@ -10908,17 +11123,19 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
|
|
|
10908
11123
|
switch(e.key){
|
|
10909
11124
|
case 'ArrowLeft':
|
|
10910
11125
|
{
|
|
11126
|
+
var _delegate_getKeyAbove, _delegate_getFirstKey;
|
|
10911
11127
|
// prevent scrolling containers
|
|
10912
11128
|
e.preventDefault();
|
|
10913
|
-
let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();
|
|
11129
|
+
let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
|
|
10914
11130
|
if (key) state.setSelectedKey(key);
|
|
10915
11131
|
break;
|
|
10916
11132
|
}
|
|
10917
11133
|
case 'ArrowRight':
|
|
10918
11134
|
{
|
|
11135
|
+
var _delegate_getKeyBelow, _delegate_getFirstKey1;
|
|
10919
11136
|
// prevent scrolling containers
|
|
10920
11137
|
e.preventDefault();
|
|
10921
|
-
let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();
|
|
11138
|
+
let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
|
|
10922
11139
|
if (key) state.setSelectedKey(key);
|
|
10923
11140
|
break;
|
|
10924
11141
|
}
|
|
@@ -10956,7 +11173,8 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
|
|
|
10956
11173
|
...labelProps,
|
|
10957
11174
|
onClick: ()=>{
|
|
10958
11175
|
if (!props.isDisabled) {
|
|
10959
|
-
|
|
11176
|
+
var _ref_current;
|
|
11177
|
+
(_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
|
|
10960
11178
|
// Show the focus ring so the user knows where focus went
|
|
10961
11179
|
($507fabe10e71c6fb$export$8397ddfc504fdb9a)('keyboard');
|
|
10962
11180
|
}
|
|
@@ -11029,17 +11247,18 @@ function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
|
|
|
11029
11247
|
|
|
11030
11248
|
|
|
11031
11249
|
|
|
11032
|
-
|
|
11033
11250
|
function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
11034
11251
|
let data = ($58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
|
|
11035
11252
|
let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
|
|
11036
11253
|
let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
|
|
11037
|
-
let modality = ($507fabe10e71c6fb$export$98e20ec92f614cfe)();
|
|
11038
11254
|
let { visuallyHiddenProps: visuallyHiddenProps } = ($5c3e21d68f1c4674$export$a966af930f325cab)();
|
|
11039
11255
|
($99facab73266f662$export$5add1d006293d136)(props.selectRef, state.selectedKey, state.setSelectedKey);
|
|
11040
11256
|
($e93e671b31057976$export$b8473d3665f3a75a)({
|
|
11041
11257
|
validationBehavior: validationBehavior,
|
|
11042
|
-
focus: ()=>
|
|
11258
|
+
focus: ()=>{
|
|
11259
|
+
var _triggerRef_current;
|
|
11260
|
+
return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
11261
|
+
}
|
|
11043
11262
|
}, state, props.selectRef);
|
|
11044
11263
|
var _state_selectedKey;
|
|
11045
11264
|
// In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
|
|
@@ -11048,18 +11267,6 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
|
11048
11267
|
// The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
|
|
11049
11268
|
// 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
|
|
11050
11269
|
// non tabbable with tabIndex={-1}.
|
|
11051
|
-
//
|
|
11052
|
-
// In mobile browsers, there are next/previous buttons above the software keyboard for navigating
|
|
11053
|
-
// between fields in a form. These only support native form inputs that are tabbable. In order to
|
|
11054
|
-
// support those, an additional hidden input is used to marshall focus to the button. It is tabbable
|
|
11055
|
-
// except when the button is focused, so that shift tab works properly to go to the actual previous
|
|
11056
|
-
// input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
|
|
11057
|
-
// the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
|
|
11058
|
-
// prevent Safari from zooming in on the input when it is focused.
|
|
11059
|
-
//
|
|
11060
|
-
// If the current interaction modality is null, then the user hasn't interacted with the page yet.
|
|
11061
|
-
// In this case, we set the tabIndex to -1 on the input element so that automated accessibility
|
|
11062
|
-
// checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
|
|
11063
11270
|
return {
|
|
11064
11271
|
containerProps: {
|
|
11065
11272
|
...visuallyHiddenProps,
|
|
@@ -11070,13 +11277,9 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
|
11070
11277
|
['data-a11y-ignore']: 'aria-hidden-focus'
|
|
11071
11278
|
},
|
|
11072
11279
|
inputProps: {
|
|
11073
|
-
type: 'text',
|
|
11074
|
-
tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
|
|
11075
11280
|
style: {
|
|
11076
|
-
|
|
11077
|
-
}
|
|
11078
|
-
onFocus: ()=>triggerRef.current.focus(),
|
|
11079
|
-
disabled: isDisabled
|
|
11281
|
+
display: 'none'
|
|
11282
|
+
}
|
|
11080
11283
|
},
|
|
11081
11284
|
selectProps: {
|
|
11082
11285
|
tabIndex: -1,
|
|
@@ -11092,7 +11295,7 @@ function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
|
|
|
11092
11295
|
function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
|
|
11093
11296
|
let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
|
|
11094
11297
|
let selectRef = (useRef)(null);
|
|
11095
|
-
let { containerProps: containerProps,
|
|
11298
|
+
let { containerProps: containerProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
|
|
11096
11299
|
...props,
|
|
11097
11300
|
selectRef: selectRef
|
|
11098
11301
|
}, state, triggerRef);
|
|
@@ -11103,14 +11306,14 @@ function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
|
|
|
11103
11306
|
if (state.collection.size <= 300) return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
11104
11307
|
...containerProps,
|
|
11105
11308
|
"data-testid": "hidden-select-container"
|
|
11106
|
-
}, /*#__PURE__*/ ($dbSRa$react).createElement("
|
|
11309
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement("label", null, label, /*#__PURE__*/ ($dbSRa$react).createElement("select", {
|
|
11107
11310
|
...selectProps,
|
|
11108
11311
|
ref: selectRef
|
|
11109
11312
|
}, /*#__PURE__*/ ($dbSRa$react).createElement("option", null), [
|
|
11110
11313
|
...state.collection.getKeys()
|
|
11111
11314
|
].map((key)=>{
|
|
11112
11315
|
let item = state.collection.getItem(key);
|
|
11113
|
-
if (item.type === 'item') return /*#__PURE__*/ ($dbSRa$react).createElement("option", {
|
|
11316
|
+
if (item && item.type === 'item') return /*#__PURE__*/ ($dbSRa$react).createElement("option", {
|
|
11114
11317
|
key: item.key,
|
|
11115
11318
|
value: item.key
|
|
11116
11319
|
}, item.textValue);
|
|
@@ -11545,7 +11748,6 @@ function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
|
|
|
11545
11748
|
let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
|
|
11546
11749
|
let descProps = ($ef06256079686ba0$export$f8aeda7b10753fa1)(description);
|
|
11547
11750
|
let isFocused = item.key === state.selectionManager.focusedKey;
|
|
11548
|
-
// @ts-ignore - data attributes are ok but TS doesn't know about them.
|
|
11549
11751
|
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(item.props);
|
|
11550
11752
|
let linkProps = ($ea8dcbcb9ea1b556$export$bdc77b0c0a3a85d6)(item.props);
|
|
11551
11753
|
return {
|
|
@@ -11718,6 +11920,51 @@ function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
|
|
|
11718
11920
|
*/
|
|
11719
11921
|
|
|
11720
11922
|
|
|
11923
|
+
const $01b77f81d0f07f68$export$75b6ee27786ba447 = /*#__PURE__*/ (createContext)({});
|
|
11924
|
+
function $01b77f81d0f07f68$var$Label(props, ref) {
|
|
11925
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $01b77f81d0f07f68$export$75b6ee27786ba447);
|
|
11926
|
+
let { elementType: ElementType = 'label', ...labelProps } = props;
|
|
11927
|
+
// @ts-ignore
|
|
11928
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(ElementType, {
|
|
11929
|
+
className: "react-aria-Label",
|
|
11930
|
+
...labelProps,
|
|
11931
|
+
ref: ref
|
|
11932
|
+
});
|
|
11933
|
+
}
|
|
11934
|
+
const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($f39a9eba43920ace$export$86427a43e3e48ebb)($01b77f81d0f07f68$var$Label);
|
|
11935
|
+
|
|
11936
|
+
/*
|
|
11937
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
11938
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11939
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
11940
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11941
|
+
*
|
|
11942
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11943
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11944
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
11945
|
+
* governing permissions and limitations under the License.
|
|
11946
|
+
*/
|
|
11947
|
+
|
|
11948
|
+
|
|
11949
|
+
|
|
11950
|
+
|
|
11951
|
+
const $0393f8ab869a0f1a$export$e9f3bf65a26ce129 = /*#__PURE__*/ (createContext)(null);
|
|
11952
|
+
|
|
11953
|
+
/*
|
|
11954
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
11955
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11956
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
11957
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11958
|
+
*
|
|
11959
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11960
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11961
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
11962
|
+
* governing permissions and limitations under the License.
|
|
11963
|
+
*/
|
|
11964
|
+
|
|
11965
|
+
|
|
11966
|
+
|
|
11967
|
+
|
|
11721
11968
|
|
|
11722
11969
|
|
|
11723
11970
|
const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
@@ -11733,35 +11980,88 @@ const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
|
11733
11980
|
const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /*#__PURE__*/ (createContext)({});
|
|
11734
11981
|
function $d2b4bc8c273e7be6$var$Button(props, ref) {
|
|
11735
11982
|
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
|
|
11983
|
+
props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
|
|
11736
11984
|
let ctx = props;
|
|
11985
|
+
let { isPending: isPending } = ctx;
|
|
11737
11986
|
let { buttonProps: buttonProps, isPressed: isPressed } = ($701a24aa0da5b062$export$ea18c227d4417cc3)(props, ref);
|
|
11738
11987
|
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = ($f7dceffc5ad7768b$export$4e328f61c538687f)(props);
|
|
11739
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)(
|
|
11988
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)({
|
|
11989
|
+
...props,
|
|
11990
|
+
isDisabled: props.isDisabled || isPending
|
|
11991
|
+
});
|
|
11992
|
+
let renderValues = {
|
|
11993
|
+
isHovered: isHovered,
|
|
11994
|
+
isPressed: (ctx.isPressed || isPressed) && !isPending,
|
|
11995
|
+
isFocused: isFocused,
|
|
11996
|
+
isFocusVisible: isFocusVisible,
|
|
11997
|
+
isDisabled: props.isDisabled || false,
|
|
11998
|
+
isPending: isPending !== null && isPending !== void 0 ? isPending : false
|
|
11999
|
+
};
|
|
11740
12000
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
11741
12001
|
...props,
|
|
11742
|
-
values:
|
|
11743
|
-
isHovered: isHovered,
|
|
11744
|
-
isPressed: isPressed,
|
|
11745
|
-
isFocused: isFocused,
|
|
11746
|
-
isFocusVisible: isFocusVisible,
|
|
11747
|
-
isDisabled: props.isDisabled || false
|
|
11748
|
-
},
|
|
12002
|
+
values: renderValues,
|
|
11749
12003
|
defaultClassName: 'react-aria-Button'
|
|
11750
12004
|
});
|
|
12005
|
+
let buttonId = ($bdb11010cef70236$export$f680877a34711e37)(buttonProps.id);
|
|
12006
|
+
let progressId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
12007
|
+
let ariaLabelledby = buttonProps['aria-labelledby'];
|
|
12008
|
+
if (isPending) {
|
|
12009
|
+
// aria-labelledby wins over aria-label
|
|
12010
|
+
// https://www.w3.org/TR/accname-1.2/#computation-steps
|
|
12011
|
+
if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
|
|
12012
|
+
else if (buttonProps['aria-label']) ariaLabelledby = `${buttonId} ${progressId}`;
|
|
12013
|
+
}
|
|
12014
|
+
let wasPending = (useRef)(isPending);
|
|
12015
|
+
(useEffect)(()=>{
|
|
12016
|
+
let message = {
|
|
12017
|
+
'aria-labelledby': ariaLabelledby || buttonId
|
|
12018
|
+
};
|
|
12019
|
+
if (!wasPending.current && isFocused && isPending) ($319e236875307eab$export$a9b970dcc4ae71a9)(message, 'assertive');
|
|
12020
|
+
else if (wasPending.current && isFocused && !isPending) ($319e236875307eab$export$a9b970dcc4ae71a9)(message, 'assertive');
|
|
12021
|
+
wasPending.current = isPending;
|
|
12022
|
+
}, [
|
|
12023
|
+
isPending,
|
|
12024
|
+
isFocused,
|
|
12025
|
+
ariaLabelledby,
|
|
12026
|
+
buttonId
|
|
12027
|
+
]);
|
|
11751
12028
|
return /*#__PURE__*/ ($dbSRa$react).createElement("button", {
|
|
11752
12029
|
...($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
11753
12030
|
propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
|
|
11754
12031
|
}),
|
|
11755
12032
|
...($3ef42575df84b30b$export$9d1611c77c2fe928)(buttonProps, focusProps, hoverProps),
|
|
11756
12033
|
...renderProps,
|
|
12034
|
+
id: buttonId,
|
|
11757
12035
|
ref: ref,
|
|
12036
|
+
"aria-labelledby": ariaLabelledby,
|
|
11758
12037
|
slot: props.slot || undefined,
|
|
12038
|
+
"aria-disabled": isPending ? 'true' : buttonProps['aria-disabled'],
|
|
11759
12039
|
"data-disabled": props.isDisabled || undefined,
|
|
11760
|
-
"data-pressed":
|
|
12040
|
+
"data-pressed": renderValues.isPressed || undefined,
|
|
11761
12041
|
"data-hovered": isHovered || undefined,
|
|
11762
12042
|
"data-focused": isFocused || undefined,
|
|
12043
|
+
"data-pending": isPending || undefined,
|
|
11763
12044
|
"data-focus-visible": isFocusVisible || undefined
|
|
11764
|
-
})
|
|
12045
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($0393f8ab869a0f1a$export$e9f3bf65a26ce129).Provider, {
|
|
12046
|
+
value: {
|
|
12047
|
+
id: progressId
|
|
12048
|
+
}
|
|
12049
|
+
}, renderProps.children));
|
|
12050
|
+
}
|
|
12051
|
+
function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
|
|
12052
|
+
// Don't allow interaction while isPending is true
|
|
12053
|
+
if (props.isPending) {
|
|
12054
|
+
props.onPress = undefined;
|
|
12055
|
+
props.onPressStart = undefined;
|
|
12056
|
+
props.onPressEnd = undefined;
|
|
12057
|
+
props.onPressChange = undefined;
|
|
12058
|
+
props.onPressUp = undefined;
|
|
12059
|
+
props.onKeyDown = undefined;
|
|
12060
|
+
props.onKeyUp = undefined;
|
|
12061
|
+
props.onClick = undefined;
|
|
12062
|
+
props.href = undefined;
|
|
12063
|
+
}
|
|
12064
|
+
return props;
|
|
11765
12065
|
}
|
|
11766
12066
|
/**
|
|
11767
12067
|
* A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
|
|
@@ -11876,11 +12176,13 @@ function $587d3ad58be6d31f$export$daff6da51032a415(props = {}) {
|
|
|
11876
12176
|
}
|
|
11877
12177
|
getKeyBefore(key) {
|
|
11878
12178
|
let node = this.keyMap.get(key);
|
|
11879
|
-
|
|
12179
|
+
var _node_prevKey;
|
|
12180
|
+
return node ? (_node_prevKey = node.prevKey) !== null && _node_prevKey !== void 0 ? _node_prevKey : null : null;
|
|
11880
12181
|
}
|
|
11881
12182
|
getKeyAfter(key) {
|
|
11882
12183
|
let node = this.keyMap.get(key);
|
|
11883
|
-
|
|
12184
|
+
var _node_nextKey;
|
|
12185
|
+
return node ? (_node_nextKey = node.nextKey) !== null && _node_nextKey !== void 0 ? _node_nextKey : null : null;
|
|
11884
12186
|
}
|
|
11885
12187
|
getFirstKey() {
|
|
11886
12188
|
return this.firstKey;
|
|
@@ -11889,7 +12191,8 @@ function $587d3ad58be6d31f$export$daff6da51032a415(props = {}) {
|
|
|
11889
12191
|
return this.lastKey;
|
|
11890
12192
|
}
|
|
11891
12193
|
getItem(key) {
|
|
11892
|
-
|
|
12194
|
+
var _this_keyMap_get;
|
|
12195
|
+
return (_this_keyMap_get = this.keyMap.get(key)) !== null && _this_keyMap_get !== void 0 ? _this_keyMap_get : null;
|
|
11893
12196
|
}
|
|
11894
12197
|
at(idx) {
|
|
11895
12198
|
const keys = [
|
|
@@ -11903,13 +12206,15 @@ function $587d3ad58be6d31f$export$daff6da51032a415(props = {}) {
|
|
|
11903
12206
|
}
|
|
11904
12207
|
constructor(nodes){
|
|
11905
12208
|
this.keyMap = new Map();
|
|
12209
|
+
this.firstKey = null;
|
|
12210
|
+
this.lastKey = null;
|
|
11906
12211
|
this.iterable = nodes;
|
|
11907
12212
|
let visit = (node)=>{
|
|
11908
12213
|
this.keyMap.set(node.key, node);
|
|
11909
12214
|
if (node.childNodes && node.type === 'section') for (let child of node.childNodes)visit(child);
|
|
11910
12215
|
};
|
|
11911
12216
|
for (let node of nodes)visit(node);
|
|
11912
|
-
let last;
|
|
12217
|
+
let last = null;
|
|
11913
12218
|
let index = 0;
|
|
11914
12219
|
for (let [key, node] of this.keyMap){
|
|
11915
12220
|
if (last) {
|
|
@@ -11925,7 +12230,8 @@ function $587d3ad58be6d31f$export$daff6da51032a415(props = {}) {
|
|
|
11925
12230
|
// If it isn't the last node, last.nextKey will properly set at start of new loop
|
|
11926
12231
|
last.nextKey = undefined;
|
|
11927
12232
|
}
|
|
11928
|
-
|
|
12233
|
+
var _last_key;
|
|
12234
|
+
this.lastKey = (_last_key = last === null || last === void 0 ? void 0 : last.key) !== null && _last_key !== void 0 ? _last_key : null;
|
|
11929
12235
|
}
|
|
11930
12236
|
}
|
|
11931
12237
|
|
|
@@ -11943,11 +12249,11 @@ function $587d3ad58be6d31f$export$daff6da51032a415(props = {}) {
|
|
|
11943
12249
|
constructor(keys, anchorKey, currentKey){
|
|
11944
12250
|
super(keys);
|
|
11945
12251
|
if (keys instanceof $e40ea825a81a3709$export$52baac22726c72bf) {
|
|
11946
|
-
this.anchorKey = anchorKey
|
|
11947
|
-
this.currentKey = currentKey
|
|
12252
|
+
this.anchorKey = anchorKey !== null && anchorKey !== void 0 ? anchorKey : keys.anchorKey;
|
|
12253
|
+
this.currentKey = currentKey !== null && currentKey !== void 0 ? currentKey : keys.currentKey;
|
|
11948
12254
|
} else {
|
|
11949
|
-
this.anchorKey = anchorKey;
|
|
11950
|
-
this.currentKey = currentKey;
|
|
12255
|
+
this.anchorKey = anchorKey !== null && anchorKey !== void 0 ? anchorKey : null;
|
|
12256
|
+
this.currentKey = currentKey !== null && currentKey !== void 0 ? currentKey : null;
|
|
11951
12257
|
}
|
|
11952
12258
|
}
|
|
11953
12259
|
}
|
|
@@ -11973,7 +12279,7 @@ function $7af3f5b51489e0b5$var$equalSets(setA, setB) {
|
|
|
11973
12279
|
return true;
|
|
11974
12280
|
}
|
|
11975
12281
|
function $7af3f5b51489e0b5$export$253fe78d46329472(props) {
|
|
11976
|
-
let { selectionMode: selectionMode = 'none', disallowEmptySelection: disallowEmptySelection, allowDuplicateSelectionEvents: allowDuplicateSelectionEvents, selectionBehavior: selectionBehaviorProp = 'toggle', disabledBehavior: disabledBehavior = 'all' } = props;
|
|
12282
|
+
let { selectionMode: selectionMode = 'none', disallowEmptySelection: disallowEmptySelection = false, allowDuplicateSelectionEvents: allowDuplicateSelectionEvents, selectionBehavior: selectionBehaviorProp = 'toggle', disabledBehavior: disabledBehavior = 'all' } = props;
|
|
11977
12283
|
// We want synchronous updates to `isFocused` and `focusedKey` after their setters are called.
|
|
11978
12284
|
// But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
|
|
11979
12285
|
let isFocusedRef = (useRef)(false);
|
|
@@ -12112,8 +12418,9 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12112
12418
|
* Returns whether a key is selected.
|
|
12113
12419
|
*/ isSelected(key) {
|
|
12114
12420
|
if (this.state.selectionMode === 'none') return false;
|
|
12115
|
-
|
|
12116
|
-
|
|
12421
|
+
let mappedKey = this.getKey(key);
|
|
12422
|
+
if (mappedKey == null) return false;
|
|
12423
|
+
return this.state.selectedKeys === 'all' ? this.canSelectItem(mappedKey) : this.state.selectedKeys.has(mappedKey);
|
|
12117
12424
|
}
|
|
12118
12425
|
/**
|
|
12119
12426
|
* Whether the selection is empty.
|
|
@@ -12137,7 +12444,8 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12137
12444
|
let item = this.collection.getItem(key);
|
|
12138
12445
|
if (!first || item && ($c5a24bc478652b5f$export$8c434b3a7a4dad6)(this.collection, item, first) < 0) first = item;
|
|
12139
12446
|
}
|
|
12140
|
-
|
|
12447
|
+
var _first_key;
|
|
12448
|
+
return (_first_key = first === null || first === void 0 ? void 0 : first.key) !== null && _first_key !== void 0 ? _first_key : null;
|
|
12141
12449
|
}
|
|
12142
12450
|
get lastSelectedKey() {
|
|
12143
12451
|
let last = null;
|
|
@@ -12145,7 +12453,8 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12145
12453
|
let item = this.collection.getItem(key);
|
|
12146
12454
|
if (!last || item && ($c5a24bc478652b5f$export$8c434b3a7a4dad6)(this.collection, item, last) > 0) last = item;
|
|
12147
12455
|
}
|
|
12148
|
-
|
|
12456
|
+
var _last_key;
|
|
12457
|
+
return (_last_key = last === null || last === void 0 ? void 0 : last.key) !== null && _last_key !== void 0 ? _last_key : null;
|
|
12149
12458
|
}
|
|
12150
12459
|
get disabledKeys() {
|
|
12151
12460
|
return this.state.disabledKeys;
|
|
@@ -12161,18 +12470,21 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12161
12470
|
this.replaceSelection(toKey);
|
|
12162
12471
|
return;
|
|
12163
12472
|
}
|
|
12164
|
-
|
|
12473
|
+
let mappedToKey = this.getKey(toKey);
|
|
12474
|
+
if (mappedToKey == null) return;
|
|
12165
12475
|
let selection;
|
|
12166
12476
|
// Only select the one key if coming from a select all.
|
|
12167
12477
|
if (this.state.selectedKeys === 'all') selection = new ($e40ea825a81a3709$export$52baac22726c72bf)([
|
|
12168
|
-
|
|
12169
|
-
],
|
|
12478
|
+
mappedToKey
|
|
12479
|
+
], mappedToKey, mappedToKey);
|
|
12170
12480
|
else {
|
|
12171
12481
|
let selectedKeys = this.state.selectedKeys;
|
|
12172
|
-
|
|
12173
|
-
|
|
12174
|
-
|
|
12175
|
-
|
|
12482
|
+
var _selectedKeys_anchorKey;
|
|
12483
|
+
let anchorKey = (_selectedKeys_anchorKey = selectedKeys.anchorKey) !== null && _selectedKeys_anchorKey !== void 0 ? _selectedKeys_anchorKey : mappedToKey;
|
|
12484
|
+
selection = new ($e40ea825a81a3709$export$52baac22726c72bf)(selectedKeys, anchorKey, mappedToKey);
|
|
12485
|
+
var _selectedKeys_currentKey;
|
|
12486
|
+
for (let key of this.getKeyRange(anchorKey, (_selectedKeys_currentKey = selectedKeys.currentKey) !== null && _selectedKeys_currentKey !== void 0 ? _selectedKeys_currentKey : mappedToKey))selection.delete(key);
|
|
12487
|
+
for (let key of this.getKeyRange(mappedToKey, anchorKey))if (this.canSelectItem(key)) selection.add(key);
|
|
12176
12488
|
}
|
|
12177
12489
|
this.state.setSelectedKeys(selection);
|
|
12178
12490
|
}
|
|
@@ -12186,11 +12498,13 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12186
12498
|
return [];
|
|
12187
12499
|
}
|
|
12188
12500
|
getKeyRangeInternal(from, to) {
|
|
12501
|
+
var _this_layoutDelegate;
|
|
12502
|
+
if ((_this_layoutDelegate = this.layoutDelegate) === null || _this_layoutDelegate === void 0 ? void 0 : _this_layoutDelegate.getKeyRange) return this.layoutDelegate.getKeyRange(from, to);
|
|
12189
12503
|
let keys = [];
|
|
12190
12504
|
let key = from;
|
|
12191
|
-
while(key){
|
|
12505
|
+
while(key != null){
|
|
12192
12506
|
let item = this.collection.getItem(key);
|
|
12193
|
-
if (item && item.type === 'item' || item.type === 'cell' && this.allowsCellSelection) keys.push(key);
|
|
12507
|
+
if (item && (item.type === 'item' || item.type === 'cell' && this.allowsCellSelection)) keys.push(key);
|
|
12194
12508
|
if (key === to) return keys;
|
|
12195
12509
|
key = this.collection.getKeyAfter(key);
|
|
12196
12510
|
}
|
|
@@ -12203,7 +12517,7 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12203
12517
|
// If cell selection is allowed, just return the key.
|
|
12204
12518
|
if (item.type === 'cell' && this.allowsCellSelection) return key;
|
|
12205
12519
|
// Find a parent item to select
|
|
12206
|
-
while(item.type !== 'item' && item.parentKey != null)item = this.collection.getItem(item.parentKey);
|
|
12520
|
+
while(item && item.type !== 'item' && item.parentKey != null)item = this.collection.getItem(item.parentKey);
|
|
12207
12521
|
if (!item || item.type !== 'item') return null;
|
|
12208
12522
|
return item.key;
|
|
12209
12523
|
}
|
|
@@ -12215,14 +12529,14 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12215
12529
|
this.replaceSelection(key);
|
|
12216
12530
|
return;
|
|
12217
12531
|
}
|
|
12218
|
-
|
|
12219
|
-
if (
|
|
12532
|
+
let mappedKey = this.getKey(key);
|
|
12533
|
+
if (mappedKey == null) return;
|
|
12220
12534
|
let keys = new ($e40ea825a81a3709$export$52baac22726c72bf)(this.state.selectedKeys === 'all' ? this.getSelectAllKeys() : this.state.selectedKeys);
|
|
12221
|
-
if (keys.has(
|
|
12222
|
-
else if (this.canSelectItem(
|
|
12223
|
-
keys.add(
|
|
12224
|
-
keys.anchorKey =
|
|
12225
|
-
keys.currentKey =
|
|
12535
|
+
if (keys.has(mappedKey)) keys.delete(mappedKey);
|
|
12536
|
+
else if (this.canSelectItem(mappedKey)) {
|
|
12537
|
+
keys.add(mappedKey);
|
|
12538
|
+
keys.anchorKey = mappedKey;
|
|
12539
|
+
keys.currentKey = mappedKey;
|
|
12226
12540
|
}
|
|
12227
12541
|
if (this.disallowEmptySelection && keys.size === 0) return;
|
|
12228
12542
|
this.state.setSelectedKeys(keys);
|
|
@@ -12231,11 +12545,11 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12231
12545
|
* Replaces the selection with only the given key.
|
|
12232
12546
|
*/ replaceSelection(key) {
|
|
12233
12547
|
if (this.selectionMode === 'none') return;
|
|
12234
|
-
|
|
12235
|
-
if (
|
|
12236
|
-
let selection = this.canSelectItem(
|
|
12237
|
-
|
|
12238
|
-
],
|
|
12548
|
+
let mappedKey = this.getKey(key);
|
|
12549
|
+
if (mappedKey == null) return;
|
|
12550
|
+
let selection = this.canSelectItem(mappedKey) ? new ($e40ea825a81a3709$export$52baac22726c72bf)([
|
|
12551
|
+
mappedKey
|
|
12552
|
+
], mappedKey, mappedKey) : new ($e40ea825a81a3709$export$52baac22726c72bf)();
|
|
12239
12553
|
this.state.setSelectedKeys(selection);
|
|
12240
12554
|
}
|
|
12241
12555
|
/**
|
|
@@ -12244,9 +12558,9 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12244
12558
|
if (this.selectionMode === 'none') return;
|
|
12245
12559
|
let selection = new ($e40ea825a81a3709$export$52baac22726c72bf)();
|
|
12246
12560
|
for (let key of keys){
|
|
12247
|
-
|
|
12248
|
-
if (
|
|
12249
|
-
selection.add(
|
|
12561
|
+
let mappedKey = this.getKey(key);
|
|
12562
|
+
if (mappedKey != null) {
|
|
12563
|
+
selection.add(mappedKey);
|
|
12250
12564
|
if (this.selectionMode === 'single') break;
|
|
12251
12565
|
}
|
|
12252
12566
|
}
|
|
@@ -12257,10 +12571,12 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12257
12571
|
let addKeys = (key)=>{
|
|
12258
12572
|
while(key != null){
|
|
12259
12573
|
if (this.canSelectItem(key)) {
|
|
12574
|
+
var _getFirstItem;
|
|
12260
12575
|
let item = this.collection.getItem(key);
|
|
12261
|
-
if (item.type === 'item') keys.push(key);
|
|
12576
|
+
if ((item === null || item === void 0 ? void 0 : item.type) === 'item') keys.push(key);
|
|
12577
|
+
var _getFirstItem_key;
|
|
12262
12578
|
// Add child keys. If cell selection is allowed, then include item children too.
|
|
12263
|
-
if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) addKeys(($c5a24bc478652b5f$export$fbdeaa6a76694f71)(($c5a24bc478652b5f$export$1005530eda016c13)(item, this.collection)).key);
|
|
12579
|
+
if ((item === null || item === void 0 ? void 0 : item.hasChildNodes) && (this.allowsCellSelection || item.type !== 'item')) addKeys((_getFirstItem_key = (_getFirstItem = ($c5a24bc478652b5f$export$fbdeaa6a76694f71)(($c5a24bc478652b5f$export$1005530eda016c13)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key) !== null && _getFirstItem_key !== void 0 ? _getFirstItem_key : null);
|
|
12264
12580
|
}
|
|
12265
12581
|
key = this.collection.getKeyAfter(key);
|
|
12266
12582
|
}
|
|
@@ -12333,6 +12649,7 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12333
12649
|
var _options_allowsCellSelection;
|
|
12334
12650
|
this.allowsCellSelection = (_options_allowsCellSelection = options === null || options === void 0 ? void 0 : options.allowsCellSelection) !== null && _options_allowsCellSelection !== void 0 ? _options_allowsCellSelection : false;
|
|
12335
12651
|
this._isSelectAll = null;
|
|
12652
|
+
this.layoutDelegate = (options === null || options === void 0 ? void 0 : options.layoutDelegate) || null;
|
|
12336
12653
|
}
|
|
12337
12654
|
}
|
|
12338
12655
|
|
|
@@ -12351,7 +12668,7 @@ class $d496c0a20b6e58ec$export$6c8a5aaad13c9852 {
|
|
|
12351
12668
|
|
|
12352
12669
|
|
|
12353
12670
|
function $e72dd72e1c76a225$export$2f645645f7bca764(props) {
|
|
12354
|
-
let { filter: filter } = props;
|
|
12671
|
+
let { filter: filter, layoutDelegate: layoutDelegate } = props;
|
|
12355
12672
|
let selectionState = ($7af3f5b51489e0b5$export$253fe78d46329472)(props);
|
|
12356
12673
|
let disabledKeys = (useMemo)(()=>props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [
|
|
12357
12674
|
props.disabledKeys
|
|
@@ -12365,30 +12682,35 @@ function $e72dd72e1c76a225$export$2f645645f7bca764(props) {
|
|
|
12365
12682
|
props.suppressTextValueWarning
|
|
12366
12683
|
]);
|
|
12367
12684
|
let collection = ($7613b1592d41b092$export$6cd28814d92fa9c9)(props, factory, context);
|
|
12368
|
-
let selectionManager = (useMemo)(()=>new ($d496c0a20b6e58ec$export$6c8a5aaad13c9852)(collection, selectionState
|
|
12685
|
+
let selectionManager = (useMemo)(()=>new ($d496c0a20b6e58ec$export$6c8a5aaad13c9852)(collection, selectionState, {
|
|
12686
|
+
layoutDelegate: layoutDelegate
|
|
12687
|
+
}), [
|
|
12369
12688
|
collection,
|
|
12370
|
-
selectionState
|
|
12689
|
+
selectionState,
|
|
12690
|
+
layoutDelegate
|
|
12371
12691
|
]);
|
|
12372
12692
|
// Reset focused key if that item is deleted from the collection.
|
|
12373
12693
|
const cachedCollection = (useRef)(null);
|
|
12374
12694
|
(useEffect)(()=>{
|
|
12375
|
-
if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
|
|
12695
|
+
if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey) && cachedCollection.current) {
|
|
12376
12696
|
const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
|
|
12377
12697
|
const cachedItemNodes = [
|
|
12378
12698
|
...cachedCollection.current.getKeys()
|
|
12379
12699
|
].map((key)=>{
|
|
12380
12700
|
const itemNode = cachedCollection.current.getItem(key);
|
|
12381
|
-
return itemNode.type === 'item' ? itemNode : null;
|
|
12701
|
+
return (itemNode === null || itemNode === void 0 ? void 0 : itemNode.type) === 'item' ? itemNode : null;
|
|
12382
12702
|
}).filter((node)=>node !== null);
|
|
12383
12703
|
const itemNodes = [
|
|
12384
12704
|
...collection.getKeys()
|
|
12385
12705
|
].map((key)=>{
|
|
12386
12706
|
const itemNode = collection.getItem(key);
|
|
12387
|
-
return itemNode.type === 'item' ? itemNode : null;
|
|
12707
|
+
return (itemNode === null || itemNode === void 0 ? void 0 : itemNode.type) === 'item' ? itemNode : null;
|
|
12388
12708
|
}).filter((node)=>node !== null);
|
|
12389
|
-
|
|
12390
|
-
|
|
12391
|
-
|
|
12709
|
+
var _cachedItemNodes_length, _itemNodes_length;
|
|
12710
|
+
const diff = ((_cachedItemNodes_length = cachedItemNodes === null || cachedItemNodes === void 0 ? void 0 : cachedItemNodes.length) !== null && _cachedItemNodes_length !== void 0 ? _cachedItemNodes_length : 0) - ((_itemNodes_length = itemNodes === null || itemNodes === void 0 ? void 0 : itemNodes.length) !== null && _itemNodes_length !== void 0 ? _itemNodes_length : 0);
|
|
12711
|
+
var _startItem_index, _startItem_index1, _itemNodes_length1;
|
|
12712
|
+
let index = Math.min(diff > 1 ? Math.max(((_startItem_index = startItem === null || startItem === void 0 ? void 0 : startItem.index) !== null && _startItem_index !== void 0 ? _startItem_index : 0) - diff + 1, 0) : (_startItem_index1 = startItem === null || startItem === void 0 ? void 0 : startItem.index) !== null && _startItem_index1 !== void 0 ? _startItem_index1 : 0, ((_itemNodes_length1 = itemNodes === null || itemNodes === void 0 ? void 0 : itemNodes.length) !== null && _itemNodes_length1 !== void 0 ? _itemNodes_length1 : 0) - 1);
|
|
12713
|
+
let newNode = null;
|
|
12392
12714
|
let isReverseSearching = false;
|
|
12393
12715
|
while(index >= 0){
|
|
12394
12716
|
if (!selectionManager.isDisabled(itemNodes[index].key)) {
|
|
@@ -12399,7 +12721,8 @@ function $e72dd72e1c76a225$export$2f645645f7bca764(props) {
|
|
|
12399
12721
|
if (index < itemNodes.length - 1 && !isReverseSearching) index++;
|
|
12400
12722
|
else {
|
|
12401
12723
|
isReverseSearching = true;
|
|
12402
|
-
|
|
12724
|
+
var _startItem_index2, _startItem_index3;
|
|
12725
|
+
if (index > ((_startItem_index2 = startItem === null || startItem === void 0 ? void 0 : startItem.index) !== null && _startItem_index2 !== void 0 ? _startItem_index2 : 0)) index = (_startItem_index3 = startItem === null || startItem === void 0 ? void 0 : startItem.index) !== null && _startItem_index3 !== void 0 ? _startItem_index3 : 0;
|
|
12403
12726
|
index--;
|
|
12404
12727
|
}
|
|
12405
12728
|
}
|
|
@@ -12447,6 +12770,8 @@ function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
|
|
|
12447
12770
|
allowDuplicateSelectionEvents: true,
|
|
12448
12771
|
selectedKeys: selectedKeys,
|
|
12449
12772
|
onSelectionChange: (keys)=>{
|
|
12773
|
+
// impossible, but TS doesn't know that
|
|
12774
|
+
if (keys === 'all') return;
|
|
12450
12775
|
var _keys_values_next_value;
|
|
12451
12776
|
let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
|
|
12452
12777
|
// Always fire onSelectionChange, even if the key is the same
|
|
@@ -12455,14 +12780,136 @@ function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
|
|
|
12455
12780
|
setSelectedKey(key);
|
|
12456
12781
|
}
|
|
12457
12782
|
});
|
|
12458
|
-
let selectedItem = selectedKey != null ? collection.getItem(selectedKey) : null;
|
|
12783
|
+
let selectedItem = selectedKey != null ? collection.getItem(selectedKey) : null;
|
|
12784
|
+
return {
|
|
12785
|
+
collection: collection,
|
|
12786
|
+
disabledKeys: disabledKeys,
|
|
12787
|
+
selectionManager: selectionManager,
|
|
12788
|
+
selectedKey: selectedKey,
|
|
12789
|
+
setSelectedKey: setSelectedKey,
|
|
12790
|
+
selectedItem: selectedItem
|
|
12791
|
+
};
|
|
12792
|
+
}
|
|
12793
|
+
|
|
12794
|
+
/*
|
|
12795
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
12796
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12797
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12798
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12799
|
+
*
|
|
12800
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12801
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12802
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12803
|
+
* governing permissions and limitations under the License.
|
|
12804
|
+
*/
|
|
12805
|
+
|
|
12806
|
+
function $fc909762b330b746$export$61c6a8c84e605fb6(props) {
|
|
12807
|
+
let [isOpen, setOpen] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isOpen, props.defaultOpen || false, props.onOpenChange);
|
|
12808
|
+
const open = (useCallback)(()=>{
|
|
12809
|
+
setOpen(true);
|
|
12810
|
+
}, [
|
|
12811
|
+
setOpen
|
|
12812
|
+
]);
|
|
12813
|
+
const close = (useCallback)(()=>{
|
|
12814
|
+
setOpen(false);
|
|
12815
|
+
}, [
|
|
12816
|
+
setOpen
|
|
12817
|
+
]);
|
|
12818
|
+
const toggle = (useCallback)(()=>{
|
|
12819
|
+
setOpen(!isOpen);
|
|
12820
|
+
}, [
|
|
12821
|
+
setOpen,
|
|
12822
|
+
isOpen
|
|
12823
|
+
]);
|
|
12824
|
+
return {
|
|
12825
|
+
isOpen: isOpen,
|
|
12826
|
+
setOpen: setOpen,
|
|
12827
|
+
open: open,
|
|
12828
|
+
close: close,
|
|
12829
|
+
toggle: toggle
|
|
12830
|
+
};
|
|
12831
|
+
}
|
|
12832
|
+
|
|
12833
|
+
/*
|
|
12834
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
12835
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12836
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12837
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12838
|
+
*
|
|
12839
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12840
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12841
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12842
|
+
* governing permissions and limitations under the License.
|
|
12843
|
+
*/
|
|
12844
|
+
|
|
12845
|
+
function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
|
|
12846
|
+
let [isExpanded, setExpanded] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
|
|
12847
|
+
const expand = (useCallback)(()=>{
|
|
12848
|
+
setExpanded(true);
|
|
12849
|
+
}, [
|
|
12850
|
+
setExpanded
|
|
12851
|
+
]);
|
|
12852
|
+
const collapse = (useCallback)(()=>{
|
|
12853
|
+
setExpanded(false);
|
|
12854
|
+
}, [
|
|
12855
|
+
setExpanded
|
|
12856
|
+
]);
|
|
12857
|
+
const toggle = (useCallback)(()=>{
|
|
12858
|
+
setExpanded(!isExpanded);
|
|
12859
|
+
}, [
|
|
12860
|
+
setExpanded,
|
|
12861
|
+
isExpanded
|
|
12862
|
+
]);
|
|
12863
|
+
return {
|
|
12864
|
+
isExpanded: isExpanded,
|
|
12865
|
+
setExpanded: setExpanded,
|
|
12866
|
+
expand: expand,
|
|
12867
|
+
collapse: collapse,
|
|
12868
|
+
toggle: toggle
|
|
12869
|
+
};
|
|
12870
|
+
}
|
|
12871
|
+
|
|
12872
|
+
/*
|
|
12873
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
12874
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12875
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12876
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12877
|
+
*
|
|
12878
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12879
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12880
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12881
|
+
* governing permissions and limitations under the License.
|
|
12882
|
+
*/
|
|
12883
|
+
|
|
12884
|
+
function $9385b3affbdec831$export$f36461af0ef4707d(props) {
|
|
12885
|
+
let { allowsMultipleExpanded: allowsMultipleExpanded = false, isDisabled: isDisabled = false } = props;
|
|
12886
|
+
let [expandedKeys, setExpandedKeys] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)((useMemo)(()=>props.expandedKeys ? new Set(props.expandedKeys) : undefined, [
|
|
12887
|
+
props.expandedKeys
|
|
12888
|
+
]), (useMemo)(()=>props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), [
|
|
12889
|
+
props.defaultExpandedKeys
|
|
12890
|
+
]), props.onExpandedChange);
|
|
12891
|
+
(useEffect)(()=>{
|
|
12892
|
+
// Ensure only one item is expanded if allowsMultipleExpanded is false.
|
|
12893
|
+
if (!allowsMultipleExpanded && expandedKeys.size > 1) setExpandedKeys(new Set([
|
|
12894
|
+
expandedKeys.values().next().value
|
|
12895
|
+
]));
|
|
12896
|
+
});
|
|
12459
12897
|
return {
|
|
12460
|
-
|
|
12461
|
-
|
|
12462
|
-
|
|
12463
|
-
|
|
12464
|
-
|
|
12465
|
-
|
|
12898
|
+
allowsMultipleExpanded: allowsMultipleExpanded,
|
|
12899
|
+
isDisabled: isDisabled,
|
|
12900
|
+
expandedKeys: expandedKeys,
|
|
12901
|
+
setExpandedKeys: setExpandedKeys,
|
|
12902
|
+
toggleKey (key) {
|
|
12903
|
+
let keys;
|
|
12904
|
+
if (allowsMultipleExpanded) {
|
|
12905
|
+
keys = new Set(expandedKeys);
|
|
12906
|
+
if (keys.has(key)) keys.delete(key);
|
|
12907
|
+
else keys.add(key);
|
|
12908
|
+
} else keys = new Set(expandedKeys.has(key) ? [] : [
|
|
12909
|
+
key
|
|
12910
|
+
]);
|
|
12911
|
+
setExpandedKeys(keys);
|
|
12912
|
+
}
|
|
12466
12913
|
};
|
|
12467
12914
|
}
|
|
12468
12915
|
|
|
@@ -12478,30 +12925,47 @@ function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
|
|
|
12478
12925
|
* governing permissions and limitations under the License.
|
|
12479
12926
|
*/
|
|
12480
12927
|
|
|
12481
|
-
function $
|
|
12482
|
-
let
|
|
12483
|
-
|
|
12484
|
-
|
|
12485
|
-
|
|
12486
|
-
|
|
12487
|
-
|
|
12488
|
-
|
|
12489
|
-
|
|
12490
|
-
|
|
12491
|
-
|
|
12492
|
-
|
|
12493
|
-
|
|
12494
|
-
|
|
12495
|
-
|
|
12496
|
-
|
|
12497
|
-
|
|
12498
|
-
|
|
12928
|
+
function $a28c903ee9ad8dc5$export$79fefeb1c2091ac3(props) {
|
|
12929
|
+
let overlayTriggerState = ($fc909762b330b746$export$61c6a8c84e605fb6)(props);
|
|
12930
|
+
let [focusStrategy, setFocusStrategy] = (useState)(null);
|
|
12931
|
+
let [expandedKeysStack, setExpandedKeysStack] = (useState)([]);
|
|
12932
|
+
let closeAll = ()=>{
|
|
12933
|
+
setExpandedKeysStack([]);
|
|
12934
|
+
overlayTriggerState.close();
|
|
12935
|
+
};
|
|
12936
|
+
let openSubmenu = (triggerKey, level)=>{
|
|
12937
|
+
setExpandedKeysStack((oldStack)=>{
|
|
12938
|
+
if (level > oldStack.length) return oldStack;
|
|
12939
|
+
return [
|
|
12940
|
+
...oldStack.slice(0, level),
|
|
12941
|
+
triggerKey
|
|
12942
|
+
];
|
|
12943
|
+
});
|
|
12944
|
+
};
|
|
12945
|
+
let closeSubmenu = (triggerKey, level)=>{
|
|
12946
|
+
setExpandedKeysStack((oldStack)=>{
|
|
12947
|
+
let key = oldStack[level];
|
|
12948
|
+
if (key === triggerKey) return oldStack.slice(0, level);
|
|
12949
|
+
else return oldStack;
|
|
12950
|
+
});
|
|
12951
|
+
};
|
|
12499
12952
|
return {
|
|
12500
|
-
|
|
12501
|
-
|
|
12502
|
-
open
|
|
12503
|
-
|
|
12504
|
-
|
|
12953
|
+
focusStrategy: focusStrategy,
|
|
12954
|
+
...overlayTriggerState,
|
|
12955
|
+
open (focusStrategy = null) {
|
|
12956
|
+
setFocusStrategy(focusStrategy);
|
|
12957
|
+
overlayTriggerState.open();
|
|
12958
|
+
},
|
|
12959
|
+
toggle (focusStrategy = null) {
|
|
12960
|
+
setFocusStrategy(focusStrategy);
|
|
12961
|
+
overlayTriggerState.toggle();
|
|
12962
|
+
},
|
|
12963
|
+
close () {
|
|
12964
|
+
closeAll();
|
|
12965
|
+
},
|
|
12966
|
+
expandedKeysStack: expandedKeysStack,
|
|
12967
|
+
openSubmenu: openSubmenu,
|
|
12968
|
+
closeSubmenu: closeSubmenu
|
|
12505
12969
|
};
|
|
12506
12970
|
}
|
|
12507
12971
|
|
|
@@ -12630,7 +13094,7 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
12630
13094
|
let { delay: delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay: closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
|
|
12631
13095
|
let { isOpen: isOpen, open: open, close: close } = ($fc909762b330b746$export$61c6a8c84e605fb6)(props);
|
|
12632
13096
|
let id = (useMemo)(()=>`${++$8796f90736e175cb$var$tooltipId}`, []);
|
|
12633
|
-
let closeTimeout = (useRef)(
|
|
13097
|
+
let closeTimeout = (useRef)(null);
|
|
12634
13098
|
let closeCallback = (useRef)(close);
|
|
12635
13099
|
let ensureTooltipEntry = ()=>{
|
|
12636
13100
|
$8796f90736e175cb$var$tooltips[id] = hideTooltip;
|
|
@@ -12642,7 +13106,7 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
12642
13106
|
}
|
|
12643
13107
|
};
|
|
12644
13108
|
let showTooltip = ()=>{
|
|
12645
|
-
clearTimeout(closeTimeout.current);
|
|
13109
|
+
if (closeTimeout.current) clearTimeout(closeTimeout.current);
|
|
12646
13110
|
closeTimeout.current = null;
|
|
12647
13111
|
closeOpenTooltips();
|
|
12648
13112
|
ensureTooltipEntry();
|
|
@@ -12659,7 +13123,7 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
12659
13123
|
};
|
|
12660
13124
|
let hideTooltip = (immediate)=>{
|
|
12661
13125
|
if (immediate || closeDelay <= 0) {
|
|
12662
|
-
clearTimeout(closeTimeout.current);
|
|
13126
|
+
if (closeTimeout.current) clearTimeout(closeTimeout.current);
|
|
12663
13127
|
closeTimeout.current = null;
|
|
12664
13128
|
closeCallback.current();
|
|
12665
13129
|
} else if (!closeTimeout.current) closeTimeout.current = setTimeout(()=>{
|
|
@@ -12694,10 +13158,9 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
12694
13158
|
}, [
|
|
12695
13159
|
close
|
|
12696
13160
|
]);
|
|
12697
|
-
// eslint-disable-next-line arrow-body-style
|
|
12698
13161
|
(useEffect)(()=>{
|
|
12699
13162
|
return ()=>{
|
|
12700
|
-
clearTimeout(closeTimeout.current);
|
|
13163
|
+
if (closeTimeout.current) clearTimeout(closeTimeout.current);
|
|
12701
13164
|
let tooltip = $8796f90736e175cb$var$tooltips[id];
|
|
12702
13165
|
if (tooltip) delete $8796f90736e175cb$var$tooltips[id];
|
|
12703
13166
|
};
|
|
@@ -12727,6 +13190,7 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
12727
13190
|
*/
|
|
12728
13191
|
|
|
12729
13192
|
|
|
13193
|
+
|
|
12730
13194
|
const $ee014567cb39d3f0$export$ff05c3ac10437e03 = /*#__PURE__*/ (createContext)(null);
|
|
12731
13195
|
function $ee014567cb39d3f0$var$FieldError(props, ref) {
|
|
12732
13196
|
let validation = (useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
@@ -12741,6 +13205,7 @@ function $ee014567cb39d3f0$var$FieldError(props, ref) {
|
|
|
12741
13205
|
*/ const $ee014567cb39d3f0$export$f551688fc98f2e09 = /*#__PURE__*/ (forwardRef)($ee014567cb39d3f0$var$FieldError);
|
|
12742
13206
|
const $ee014567cb39d3f0$var$FieldErrorInner = /*#__PURE__*/ (forwardRef)((props, ref)=>{
|
|
12743
13207
|
let validation = (useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
13208
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
12744
13209
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
12745
13210
|
...props,
|
|
12746
13211
|
defaultClassName: 'react-aria-FieldError',
|
|
@@ -12750,6 +13215,7 @@ const $ee014567cb39d3f0$var$FieldErrorInner = /*#__PURE__*/ (forwardRef)((props,
|
|
|
12750
13215
|
if (renderProps.children == null) return null;
|
|
12751
13216
|
return /*#__PURE__*/ ($dbSRa$react).createElement(($514c0188e459b4c0$export$5f1af8db9871e1d6), {
|
|
12752
13217
|
slot: "errorMessage",
|
|
13218
|
+
...domProps,
|
|
12753
13219
|
...renderProps,
|
|
12754
13220
|
ref: ref
|
|
12755
13221
|
});
|
|
@@ -12804,32 +13270,6 @@ function $d3e0e05bdfcf66bd$var$Form(props, ref) {
|
|
|
12804
13270
|
*/
|
|
12805
13271
|
|
|
12806
13272
|
|
|
12807
|
-
const $01b77f81d0f07f68$export$75b6ee27786ba447 = /*#__PURE__*/ (createContext)({});
|
|
12808
|
-
function $01b77f81d0f07f68$var$Label(props, ref) {
|
|
12809
|
-
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $01b77f81d0f07f68$export$75b6ee27786ba447);
|
|
12810
|
-
let { elementType: ElementType = 'label', ...labelProps } = props;
|
|
12811
|
-
// @ts-ignore
|
|
12812
|
-
return /*#__PURE__*/ ($dbSRa$react).createElement(ElementType, {
|
|
12813
|
-
className: "react-aria-Label",
|
|
12814
|
-
...labelProps,
|
|
12815
|
-
ref: ref
|
|
12816
|
-
});
|
|
12817
|
-
}
|
|
12818
|
-
const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($f39a9eba43920ace$export$86427a43e3e48ebb)($01b77f81d0f07f68$var$Label);
|
|
12819
|
-
|
|
12820
|
-
/*
|
|
12821
|
-
* Copyright 2022 Adobe. All rights reserved.
|
|
12822
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12823
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12824
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12825
|
-
*
|
|
12826
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12827
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12828
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12829
|
-
* governing permissions and limitations under the License.
|
|
12830
|
-
*/
|
|
12831
|
-
|
|
12832
|
-
|
|
12833
13273
|
|
|
12834
13274
|
|
|
12835
13275
|
|
|
@@ -12913,7 +13353,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
|
|
|
12913
13353
|
let groupState = (useContext)($bc237834342dbd75$export$139c5b8563afc1fc);
|
|
12914
13354
|
let inputRef = ($df56164dff5785e2$export$4338b53315abf666)(($5dc95899b306f630$export$c9058316764c140e)(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
|
|
12915
13355
|
let { labelProps: labelProps, inputProps: inputProps, isSelected: isSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isPressed: isPressed, isInvalid: isInvalid } = groupState ? ($fba3e38d5ca8983f$export$353b32fc6898d37d)({
|
|
12916
|
-
...props,
|
|
13356
|
+
...($64fa3d84918910a7$export$ef03459518577ad4)(props),
|
|
12917
13357
|
// Value is optional for standalone checkboxes, but required for CheckboxGroup items;
|
|
12918
13358
|
// it's passed explicitly here to avoid typescript error (requires ignore).
|
|
12919
13359
|
// @ts-ignore
|
|
@@ -12921,7 +13361,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
|
|
|
12921
13361
|
// ReactNode type doesn't allow function children.
|
|
12922
13362
|
children: typeof props.children === 'function' ? true : props.children
|
|
12923
13363
|
}, groupState, inputRef) : ($406796ff087fe49b$export$e375f10ce42261c5)({
|
|
12924
|
-
...props,
|
|
13364
|
+
...($64fa3d84918910a7$export$ef03459518577ad4)(props),
|
|
12925
13365
|
children: typeof props.children === 'function' ? true : props.children,
|
|
12926
13366
|
validationBehavior: validationBehavior
|
|
12927
13367
|
}, ($3017fa7ffdddec74$export$8042c6c013fd5226)(props), inputRef);
|
|
@@ -12932,7 +13372,6 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
|
|
|
12932
13372
|
isDisabled: isInteractionDisabled
|
|
12933
13373
|
});
|
|
12934
13374
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
12935
|
-
// TODO: should data attrs go on the label or on the <input>? useCheckbox passes them to the input...
|
|
12936
13375
|
...props,
|
|
12937
13376
|
defaultClassName: 'react-aria-Checkbox',
|
|
12938
13377
|
values: {
|
|
@@ -13430,7 +13869,7 @@ function $612b8eb6cb90e02d$export$d1e8e3fbb7461f6(selectionManager, dragAndDropH
|
|
|
13430
13869
|
return new Set([
|
|
13431
13870
|
focusedKey,
|
|
13432
13871
|
dropTargetKey
|
|
13433
|
-
].filter((k)=>k
|
|
13872
|
+
].filter((k)=>k != null));
|
|
13434
13873
|
}, [
|
|
13435
13874
|
focusedKey,
|
|
13436
13875
|
dropTargetKey
|
|
@@ -13528,7 +13967,11 @@ function $eed445e0843c11d0$var$StandaloneListBox({ props: props, listBoxRef: lis
|
|
|
13528
13967
|
children: null,
|
|
13529
13968
|
items: null
|
|
13530
13969
|
};
|
|
13531
|
-
let
|
|
13970
|
+
let { layoutDelegate: layoutDelegate } = (useContext)(($7135fc7d473fd974$export$4feb769f8ddf26c5));
|
|
13971
|
+
let state = ($e72dd72e1c76a225$export$2f645645f7bca764)({
|
|
13972
|
+
...props,
|
|
13973
|
+
layoutDelegate: layoutDelegate
|
|
13974
|
+
});
|
|
13532
13975
|
return /*#__PURE__*/ ($dbSRa$react).createElement($eed445e0843c11d0$var$ListBoxInner, {
|
|
13533
13976
|
state: state,
|
|
13534
13977
|
props: props,
|
|
@@ -13692,6 +14135,7 @@ function $eed445e0843c11d0$var$ListBoxInner({ state: state, props: props, listBo
|
|
|
13692
14135
|
[
|
|
13693
14136
|
($7135fc7d473fd974$export$d40e14dec8b060a8),
|
|
13694
14137
|
{
|
|
14138
|
+
name: 'ListBoxSection',
|
|
13695
14139
|
render: $eed445e0843c11d0$var$ListBoxSection
|
|
13696
14140
|
}
|
|
13697
14141
|
]
|
|
@@ -13703,7 +14147,7 @@ function $eed445e0843c11d0$var$ListBoxInner({ state: state, props: props, listBo
|
|
|
13703
14147
|
renderDropIndicator: ($612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
|
|
13704
14148
|
})), emptyState, dragPreview));
|
|
13705
14149
|
}
|
|
13706
|
-
function $eed445e0843c11d0$var$ListBoxSection(props, ref, section) {
|
|
14150
|
+
function $eed445e0843c11d0$var$ListBoxSection(props, ref, section, className = 'react-aria-ListBoxSection') {
|
|
13707
14151
|
let state = (useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
|
|
13708
14152
|
let { dragAndDropHooks: dragAndDropHooks, dropState: dropState } = (useContext)(($612b8eb6cb90e02d$export$d188a835a7bc5783));
|
|
13709
14153
|
let { CollectionBranch: CollectionBranch } = (useContext)(($7135fc7d473fd974$export$4feb769f8ddf26c5));
|
|
@@ -13714,7 +14158,7 @@ function $eed445e0843c11d0$var$ListBoxSection(props, ref, section) {
|
|
|
13714
14158
|
'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : undefined
|
|
13715
14159
|
});
|
|
13716
14160
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
13717
|
-
defaultClassName:
|
|
14161
|
+
defaultClassName: className,
|
|
13718
14162
|
className: props.className,
|
|
13719
14163
|
style: props.style,
|
|
13720
14164
|
values: {}
|
|
@@ -13735,6 +14179,9 @@ function $eed445e0843c11d0$var$ListBoxSection(props, ref, section) {
|
|
|
13735
14179
|
renderDropIndicator: ($612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
|
|
13736
14180
|
})));
|
|
13737
14181
|
}
|
|
14182
|
+
/**
|
|
14183
|
+
* A ListBoxSection represents a section within a ListBox.
|
|
14184
|
+
*/ const $eed445e0843c11d0$export$dca12b0bb56e4fc = /*#__PURE__*/ ($e1995378a142960e$export$e953bb1cd0f19726)('section', $eed445e0843c11d0$var$ListBoxSection);
|
|
13738
14185
|
const $eed445e0843c11d0$export$a11e76429ed99b4 = /*#__PURE__*/ ($e1995378a142960e$export$18af5c7a9e9b3664)('item', function ListBoxItem(props, forwardedRef, item) {
|
|
13739
14186
|
let ref = ($df56164dff5785e2$export$4338b53315abf666)(forwardedRef);
|
|
13740
14187
|
let state = (useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
|
|
@@ -13863,9 +14310,9 @@ function $44f671af83e7d9e0$var$OverlayArrow(props, ref) {
|
|
|
13863
14310
|
let placement = props.placement;
|
|
13864
14311
|
let style = {
|
|
13865
14312
|
position: 'absolute',
|
|
13866
|
-
[placement]: '100%',
|
|
13867
14313
|
transform: placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'
|
|
13868
14314
|
};
|
|
14315
|
+
if (placement != null) style[placement] = '100%';
|
|
13869
14316
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
13870
14317
|
...props,
|
|
13871
14318
|
defaultClassName: 'react-aria-OverlayArrow',
|
|
@@ -13976,6 +14423,7 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
13976
14423
|
...renderProps.style
|
|
13977
14424
|
};
|
|
13978
14425
|
return /*#__PURE__*/ ($dbSRa$react).createElement(($337b884510726a0d$export$c6fdb837b070b4ff), {
|
|
14426
|
+
...props,
|
|
13979
14427
|
isExiting: isExiting,
|
|
13980
14428
|
portalContainer: UNSTABLE_portalContainer
|
|
13981
14429
|
}, !props.isNonModal && state.isOpen && /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
@@ -14008,6 +14456,8 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
14008
14456
|
})));
|
|
14009
14457
|
}
|
|
14010
14458
|
|
|
14459
|
+
const $3674c52c6b3c5bce$export$795aec4671cbae19 = /*#__PURE__*/ (createContext)(null);
|
|
14460
|
+
|
|
14011
14461
|
/*
|
|
14012
14462
|
* Copyright 2022 Adobe. All rights reserved.
|
|
14013
14463
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -14026,10 +14476,14 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
14026
14476
|
|
|
14027
14477
|
|
|
14028
14478
|
|
|
14479
|
+
|
|
14480
|
+
|
|
14029
14481
|
const $de32f1b87079253c$export$8b93a07348a7730c = /*#__PURE__*/ (createContext)(null);
|
|
14030
14482
|
const $de32f1b87079253c$export$d2f961adcb0afbe = /*#__PURE__*/ (createContext)(null);
|
|
14031
14483
|
function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
|
|
14032
|
-
|
|
14484
|
+
// Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
|
|
14485
|
+
// This is needed to handle submenus.
|
|
14486
|
+
let state = ($a28c903ee9ad8dc5$export$79fefeb1c2091ac3)(props);
|
|
14033
14487
|
let buttonRef = (useRef)(null);
|
|
14034
14488
|
let { triggerProps: triggerProps, overlayProps: overlayProps } = ($628037886ba31236$export$f9d5c8beee7d008d)({
|
|
14035
14489
|
type: 'dialog'
|
|
@@ -14046,6 +14500,10 @@ function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
|
|
|
14046
14500
|
$de32f1b87079253c$export$d2f961adcb0afbe,
|
|
14047
14501
|
state
|
|
14048
14502
|
],
|
|
14503
|
+
[
|
|
14504
|
+
($3674c52c6b3c5bce$export$795aec4671cbae19),
|
|
14505
|
+
state
|
|
14506
|
+
],
|
|
14049
14507
|
[
|
|
14050
14508
|
$de32f1b87079253c$export$8b93a07348a7730c,
|
|
14051
14509
|
overlayProps
|
|
@@ -14074,24 +14532,27 @@ function $de32f1b87079253c$var$Dialog(props, ref) {
|
|
|
14074
14532
|
'aria-labelledby': originalAriaLabelledby
|
|
14075
14533
|
}, ref);
|
|
14076
14534
|
let state = (useContext)($de32f1b87079253c$export$d2f961adcb0afbe);
|
|
14077
|
-
let children = props.children;
|
|
14078
|
-
if (typeof children === 'function') children = children({
|
|
14079
|
-
close: (state === null || state === void 0 ? void 0 : state.close) || (()=>{})
|
|
14080
|
-
});
|
|
14081
14535
|
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
14082
14536
|
// If aria-labelledby exists on props, we know it came from context.
|
|
14083
14537
|
// Use that as a fallback in case there is no title slot.
|
|
14084
14538
|
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
14085
14539
|
else console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
|
|
14086
14540
|
}
|
|
14087
|
-
|
|
14541
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14542
|
+
defaultClassName: 'react-aria-Dialog',
|
|
14543
|
+
className: props.className,
|
|
14544
|
+
style: props.style,
|
|
14545
|
+
children: props.children,
|
|
14546
|
+
values: {
|
|
14547
|
+
close: (state === null || state === void 0 ? void 0 : state.close) || (()=>{})
|
|
14548
|
+
}
|
|
14549
|
+
});
|
|
14088
14550
|
return /*#__PURE__*/ ($dbSRa$react).createElement("section", {
|
|
14089
14551
|
...($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props),
|
|
14090
14552
|
...dialogProps,
|
|
14553
|
+
...renderProps,
|
|
14091
14554
|
ref: ref,
|
|
14092
|
-
slot: props.slot || undefined
|
|
14093
|
-
style: props.style,
|
|
14094
|
-
className: (_props_className = props.className) !== null && _props_className !== void 0 ? _props_className : 'react-aria-Dialog'
|
|
14555
|
+
slot: props.slot || undefined
|
|
14095
14556
|
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14096
14557
|
values: [
|
|
14097
14558
|
[
|
|
@@ -14105,14 +14566,180 @@ function $de32f1b87079253c$var$Dialog(props, ref) {
|
|
|
14105
14566
|
}
|
|
14106
14567
|
}
|
|
14107
14568
|
}
|
|
14569
|
+
],
|
|
14570
|
+
[
|
|
14571
|
+
($d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
14572
|
+
{
|
|
14573
|
+
slots: {
|
|
14574
|
+
[($64fa3d84918910a7$export$c62b8e45d58ddad9)]: {},
|
|
14575
|
+
close: {
|
|
14576
|
+
onPress: ()=>state === null || state === void 0 ? void 0 : state.close()
|
|
14577
|
+
}
|
|
14578
|
+
}
|
|
14579
|
+
}
|
|
14108
14580
|
]
|
|
14109
14581
|
]
|
|
14110
|
-
}, children));
|
|
14582
|
+
}, renderProps.children));
|
|
14111
14583
|
}
|
|
14112
14584
|
/**
|
|
14113
14585
|
* A dialog is an overlay shown above other content in an application.
|
|
14114
14586
|
*/ const $de32f1b87079253c$export$3ddf2d174ce01153 = /*#__PURE__*/ (forwardRef)($de32f1b87079253c$var$Dialog);
|
|
14115
14587
|
|
|
14588
|
+
/*
|
|
14589
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
14590
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14591
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14592
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
14593
|
+
*
|
|
14594
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
14595
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14596
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14597
|
+
* governing permissions and limitations under the License.
|
|
14598
|
+
*/
|
|
14599
|
+
|
|
14600
|
+
|
|
14601
|
+
|
|
14602
|
+
|
|
14603
|
+
|
|
14604
|
+
|
|
14605
|
+
const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /*#__PURE__*/ (createContext)(null);
|
|
14606
|
+
function $28f4fd908f0de97f$var$DisclosureGroup(props, ref) {
|
|
14607
|
+
let state = ($9385b3affbdec831$export$f36461af0ef4707d)(props);
|
|
14608
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14609
|
+
...props,
|
|
14610
|
+
defaultClassName: 'react-aria-DisclosureGroup',
|
|
14611
|
+
values: {
|
|
14612
|
+
isDisabled: state.isDisabled,
|
|
14613
|
+
state: state
|
|
14614
|
+
}
|
|
14615
|
+
});
|
|
14616
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
14617
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14618
|
+
...domProps,
|
|
14619
|
+
...renderProps,
|
|
14620
|
+
ref: ref,
|
|
14621
|
+
"data-disabled": props.isDisabled || undefined
|
|
14622
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement($28f4fd908f0de97f$export$1d40e3e0cc4d5de.Provider, {
|
|
14623
|
+
value: state
|
|
14624
|
+
}, renderProps.children));
|
|
14625
|
+
}
|
|
14626
|
+
/**
|
|
14627
|
+
* A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
|
|
14628
|
+
* It supports both single and multiple expanded items.
|
|
14629
|
+
*/ const $28f4fd908f0de97f$export$944aceb4f8c89f10 = /*#__PURE__*/ (forwardRef)($28f4fd908f0de97f$var$DisclosureGroup);
|
|
14630
|
+
const $28f4fd908f0de97f$export$d665dd135a51b28a = /*#__PURE__*/ (createContext)(null);
|
|
14631
|
+
const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /*#__PURE__*/ (createContext)(null);
|
|
14632
|
+
const $28f4fd908f0de97f$var$InternalDisclosureContext = /*#__PURE__*/ (createContext)(null);
|
|
14633
|
+
function $28f4fd908f0de97f$var$Disclosure(props, ref) {
|
|
14634
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
|
|
14635
|
+
let groupState = (useContext)($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
|
|
14636
|
+
let { id: id, ...otherProps } = props;
|
|
14637
|
+
// Generate an id if one wasn't provided.
|
|
14638
|
+
// (can't pass id into useId since it can also be a number)
|
|
14639
|
+
let defaultId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
14640
|
+
id || (id = defaultId);
|
|
14641
|
+
let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
|
|
14642
|
+
let state = ($bf996d45f4a36925$export$3fcbf6e4407997e0)({
|
|
14643
|
+
...props,
|
|
14644
|
+
isExpanded: isExpanded,
|
|
14645
|
+
onExpandedChange (isExpanded) {
|
|
14646
|
+
var _props_onExpandedChange;
|
|
14647
|
+
if (groupState) groupState.toggleKey(id);
|
|
14648
|
+
(_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded);
|
|
14649
|
+
}
|
|
14650
|
+
});
|
|
14651
|
+
let panelRef = ($dbSRa$react).useRef(null);
|
|
14652
|
+
let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
|
|
14653
|
+
let { buttonProps: buttonProps, panelProps: panelProps } = ($5e910fae8e128ead$export$6e3e27031a30522f)({
|
|
14654
|
+
...props,
|
|
14655
|
+
isExpanded: isExpanded,
|
|
14656
|
+
isDisabled: isDisabled
|
|
14657
|
+
}, state, panelRef);
|
|
14658
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
14659
|
+
within: true
|
|
14660
|
+
});
|
|
14661
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14662
|
+
...props,
|
|
14663
|
+
id: undefined,
|
|
14664
|
+
defaultClassName: 'react-aria-Disclosure',
|
|
14665
|
+
values: {
|
|
14666
|
+
isExpanded: state.isExpanded,
|
|
14667
|
+
isDisabled: isDisabled,
|
|
14668
|
+
isFocusVisibleWithin: isFocusVisibleWithin,
|
|
14669
|
+
state: state
|
|
14670
|
+
}
|
|
14671
|
+
});
|
|
14672
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(otherProps);
|
|
14673
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14674
|
+
values: [
|
|
14675
|
+
[
|
|
14676
|
+
($d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
14677
|
+
{
|
|
14678
|
+
slots: {
|
|
14679
|
+
[($64fa3d84918910a7$export$c62b8e45d58ddad9)]: {},
|
|
14680
|
+
trigger: buttonProps
|
|
14681
|
+
}
|
|
14682
|
+
}
|
|
14683
|
+
],
|
|
14684
|
+
[
|
|
14685
|
+
$28f4fd908f0de97f$var$InternalDisclosureContext,
|
|
14686
|
+
{
|
|
14687
|
+
panelProps: panelProps,
|
|
14688
|
+
panelRef: panelRef
|
|
14689
|
+
}
|
|
14690
|
+
],
|
|
14691
|
+
[
|
|
14692
|
+
$28f4fd908f0de97f$export$dab3ea4a6ef094da,
|
|
14693
|
+
state
|
|
14694
|
+
]
|
|
14695
|
+
]
|
|
14696
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14697
|
+
ref: ref,
|
|
14698
|
+
"data-expanded": state.isExpanded || undefined,
|
|
14699
|
+
"data-disabled": isDisabled || undefined,
|
|
14700
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined,
|
|
14701
|
+
...domProps,
|
|
14702
|
+
...focusWithinProps,
|
|
14703
|
+
...renderProps
|
|
14704
|
+
}, renderProps.children));
|
|
14705
|
+
}
|
|
14706
|
+
function $28f4fd908f0de97f$var$DisclosurePanel(props, ref) {
|
|
14707
|
+
let { role: role = 'group' } = props;
|
|
14708
|
+
let { panelProps: panelProps, panelRef: panelRef } = (useContext)($28f4fd908f0de97f$var$InternalDisclosureContext);
|
|
14709
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
14710
|
+
within: true
|
|
14711
|
+
});
|
|
14712
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14713
|
+
...props,
|
|
14714
|
+
defaultClassName: 'react-aria-DisclosurePanel',
|
|
14715
|
+
values: {
|
|
14716
|
+
isFocusVisibleWithin: isFocusVisibleWithin
|
|
14717
|
+
}
|
|
14718
|
+
});
|
|
14719
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
14720
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14721
|
+
...DOMProps,
|
|
14722
|
+
ref: ($5dc95899b306f630$export$c9058316764c140e)(ref, panelRef),
|
|
14723
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)(panelProps, focusWithinProps),
|
|
14724
|
+
...renderProps,
|
|
14725
|
+
role: role,
|
|
14726
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined
|
|
14727
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14728
|
+
values: [
|
|
14729
|
+
[
|
|
14730
|
+
($d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
14731
|
+
null
|
|
14732
|
+
]
|
|
14733
|
+
]
|
|
14734
|
+
}, props.children));
|
|
14735
|
+
}
|
|
14736
|
+
/**
|
|
14737
|
+
* A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
|
|
14738
|
+
*/ const $28f4fd908f0de97f$export$74a362b31437ec83 = /*#__PURE__*/ (forwardRef)($28f4fd908f0de97f$var$Disclosure);
|
|
14739
|
+
/**
|
|
14740
|
+
* A DisclosurePanel provides the content for a disclosure.
|
|
14741
|
+
*/ const $28f4fd908f0de97f$export$feabaa331e1d464c = /*#__PURE__*/ (forwardRef)($28f4fd908f0de97f$var$DisclosurePanel);
|
|
14742
|
+
|
|
14116
14743
|
/*
|
|
14117
14744
|
* Copyright 2022 Adobe. All rights reserved.
|
|
14118
14745
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -14629,10 +15256,10 @@ function $82d7e5349645de74$var$SelectValue(props, ref) {
|
|
|
14629
15256
|
});
|
|
14630
15257
|
}
|
|
14631
15258
|
let stringFormatter = ($fca6afa0e843324b$export$f12b703ca79dfbb1)((($parcel$interopDefault($df39c1238ae2b5f3$exports))), 'react-aria-components');
|
|
14632
|
-
var _state_selectedItem_value, _state_selectedItem_textValue;
|
|
15259
|
+
var _ref, _state_selectedItem_value, _state_selectedItem_textValue;
|
|
14633
15260
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14634
15261
|
...props,
|
|
14635
|
-
defaultChildren: rendered
|
|
15262
|
+
defaultChildren: (_ref = rendered !== null && rendered !== void 0 ? rendered : placeholder) !== null && _ref !== void 0 ? _ref : stringFormatter.format('selectPlaceholder'),
|
|
14636
15263
|
defaultClassName: 'react-aria-SelectValue',
|
|
14637
15264
|
values: {
|
|
14638
15265
|
selectedItem: (_state_selectedItem_value = (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.value) !== null && _state_selectedItem_value !== void 0 ? _state_selectedItem_value : null,
|
|
@@ -15156,7 +15783,8 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
15156
15783
|
isOpen: state.isOpen,
|
|
15157
15784
|
arrowSize: arrowWidth,
|
|
15158
15785
|
arrowBoundaryOffset: props.arrowBoundaryOffset,
|
|
15159
|
-
shouldFlip: props.shouldFlip
|
|
15786
|
+
shouldFlip: props.shouldFlip,
|
|
15787
|
+
onClose: ()=>state.close(true)
|
|
15160
15788
|
});
|
|
15161
15789
|
let isEntering = ($64fa3d84918910a7$export$6d3443f2c48bfc20)(props.tooltipRef, !!placement) || props.isEntering || false;
|
|
15162
15790
|
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
@@ -15179,7 +15807,7 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
15179
15807
|
...overlayProps.style,
|
|
15180
15808
|
...renderProps.style
|
|
15181
15809
|
},
|
|
15182
|
-
"data-placement": placement,
|
|
15810
|
+
"data-placement": placement !== null && placement !== void 0 ? placement : undefined,
|
|
15183
15811
|
"data-entering": isEntering || undefined,
|
|
15184
15812
|
"data-exiting": props.isExiting || undefined
|
|
15185
15813
|
}, /*#__PURE__*/ ($dbSRa$react).createElement(($44f671af83e7d9e0$export$2de4954e8ae13b9f).Provider, {
|
|
@@ -15191,13 +15819,58 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
15191
15819
|
}, renderProps.children));
|
|
15192
15820
|
}
|
|
15193
15821
|
|
|
15194
|
-
var css_248z$
|
|
15195
|
-
styleInject(css_248z$
|
|
15822
|
+
var css_248z$n = ".bcds-react-aria-Disclosure {\r\n display: flex;\r\n flex-direction: column;\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n overflow: hidden;\r\n}\r\n\r\n.bcds-react-aria-Disclosure--Button {\r\n display: inline-flex;\r\n flex-direction: row;\r\n padding: var(--layout-padding-small) var(--layout-padding-medium);\r\n gap: var(--layout-margin-small);\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: var(--surface-color-background-light-gray);\r\n border: none;\r\n cursor: pointer;\r\n font: var(--typography-bold-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n/* Hover */\r\n.bcds-react-aria-Disclosure--Button[data-hovered] {\r\n background-color: var(--surface-color-menus-hover);\r\n}\r\n\r\n/* Accordion content */\r\n.bcds-react-aria-Disclosure[data-expanded]\r\n > .bcds-react-aria-Disclosure--Panel {\r\n display: flex;\r\n align-items: flex-start;\r\n padding: var(--layout-padding-medium);\r\n gap: var(--layout-margin-small);\r\n background-color: var(--surface-color-forms-default);\r\n font: var(--typography-regular-body);\r\n}\r\n\r\n/* Focus state */\r\n.bcds-react-aria-Disclosure[data-focus-visible-within] {\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Override default focus behaviour for button */\r\n.bcds-react-aria-Disclosure[data-focus-visible-within]\r\n > .bcds-react-aria-Disclosure--Button {\r\n outline: none;\r\n}\r\n\r\n.bcds-react-aria-Disclosure--Button[data-focused] {\r\n outline: none;\r\n}\r\n\r\n/* Disabled state */\r\n.bcds-react-aria-Disclosure[data-disabled]\r\n > .bcds-react-aria-Disclosure--Button {\r\n background-color: var(--surface-color-forms-disabled);\r\n color: var(--typography-color-disabled);\r\n cursor: not-allowed;\r\n}\r\n";
|
|
15823
|
+
styleInject(css_248z$n);
|
|
15824
|
+
|
|
15825
|
+
var css_248z$m = ".bcds-react-aria-Button {\r\n border: none;\r\n border-radius: var(--layout-border-radius-medium);\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--layout-padding-small);\r\n font: var(--typography-regular-body);\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n}\r\n.bcds-react-aria-Button[data-disabled] {\r\n cursor: not-allowed;\r\n}\r\n.bcds-react-aria-Button[data-focused] {\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Icon button */\r\n.bcds-react-aria-Button.icon {\r\n align-items: center;\r\n justify-content: space-around;\r\n}\r\n\r\n/* Sizes */\r\n.bcds-react-aria-Button.small {\r\n min-height: 32px;\r\n}\r\n.bcds-react-aria-Button.small.icon {\r\n padding: unset;\r\n height: 32px;\r\n width: 32px;\r\n min-width: 32px;\r\n}\r\n.bcds-react-aria-Button.medium {\r\n min-height: 40px;\r\n}\r\n.bcds-react-aria-Button.medium.icon {\r\n padding: unset;\r\n height: 40px;\r\n width: 40px;\r\n min-width: 40px;\r\n}\r\n\r\n/* Variant - Primary */\r\n.bcds-react-aria-Button.primary {\r\n background: var(--surface-color-primary-button-default);\r\n color: var(--icons-color-primary-invert);\r\n}\r\n.bcds-react-aria-Button.primary.danger {\r\n background-color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Button.primary[data-disabled] {\r\n background-color: var(--surface-color-primary-danger-button-disabled);\r\n color: var(--typography-color-disabled);\r\n}\r\n.bcds-react-aria-Button.primary[data-hovered] {\r\n background-color: var(--surface-color-primary-button-hover);\r\n}\r\n.bcds-react-aria-Button.primary.danger[data-hovered] {\r\n background-color: var(--surface-color-primary-danger-button-hover);\r\n}\r\n\r\n/* Variant - Secondary */\r\n.bcds-react-aria-Button.secondary {\r\n background-color: var(--surface-color-secondary-button-default);\r\n border: 1px solid var(--surface-color-border-dark);\r\n color: var(--typography-color-primary);\r\n}\r\n.bcds-react-aria-Button.secondary.danger {\r\n border-color: var(--support-border-color-danger);\r\n color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Button.secondary[data-disabled] {\r\n background-color: var(--surface-color-secondary-button-disabled);\r\n border-color: var(--surface-color-border-default);\r\n color: var(--typography-color-disabled);\r\n}\r\n.bcds-react-aria-Button.secondary[data-hovered] {\r\n background-color: var(--surface-color-secondary-button-hover);\r\n}\r\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\r\n background-color: var(--support-surface-color-danger);\r\n}\r\n\r\n/* Variant - Tertiary */\r\n.bcds-react-aria-Button.tertiary {\r\n background-color: var(--surface-color-tertiary-button-default);\r\n color: var(--typography-color-primary);\r\n}\r\n.bcds-react-aria-Button.tertiary.danger {\r\n color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Button.tertiary[data-disabled] {\r\n background-color: var(--surface-color-tertiary-button-default);\r\n color: var(--typography-color-disabled);\r\n}\r\n.bcds-react-aria-Button.tertiary[data-hovered] {\r\n background-color: var(--surface-color-tertiary-button-hover);\r\n}\r\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\r\n background-color: var(--support-surface-color-danger);\r\n}\r\n\r\n/* Variant - Link */\r\n.bcds-react-aria-Button.link {\r\n background-color: var(--surface-color-tertiary-button-default);\r\n color: var(--typography-color-link);\r\n text-decoration: underline;\r\n text-underline-offset: 0.3em;\r\n}\r\n.bcds-react-aria-Button.link.danger {\r\n color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Button.link[data-disabled] {\r\n color: var(--typography-color-disabled);\r\n}\r\n";
|
|
15826
|
+
styleInject(css_248z$m);
|
|
15196
15827
|
|
|
15197
15828
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
15198
15829
|
return (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
15199
15830
|
}
|
|
15200
15831
|
|
|
15832
|
+
/* The component implements the Chevron Up icon from Font Awesome: https://fontawesome.com/icons/chevron-up */
|
|
15833
|
+
function SvgChevronUpIcon({ id = "chevron-up-icon" }) {
|
|
15834
|
+
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
15835
|
+
}
|
|
15836
|
+
|
|
15837
|
+
/* The component implements the Chevron Down icon from Font Awesome: https://fontawesome.com/icons/chevron-down */
|
|
15838
|
+
function SvgChevronDownIcon({ id = "chevron-down-icon" }) {
|
|
15839
|
+
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
15840
|
+
}
|
|
15841
|
+
|
|
15842
|
+
function Accordion({ label, children, ...props }) {
|
|
15843
|
+
return (jsx($28f4fd908f0de97f$export$74a362b31437ec83, { className: `bcds-react-aria-Disclosure`, ...props, children: ({ isExpanded }) => (jsxs(Fragment, { children: [jsxs(Button, { className: "bcds-react-aria-Disclosure--Button", size: "small", variant: "link", slot: "trigger", children: [label, isExpanded ? jsx(SvgChevronUpIcon, {}) : jsx(SvgChevronDownIcon, {})] }), jsx($28f4fd908f0de97f$export$feabaa331e1d464c, { className: "bcds-react-aria-Disclosure--Panel", children: jsx(Fragment, { children: children }) })] })) }));
|
|
15844
|
+
}
|
|
15845
|
+
|
|
15846
|
+
var css_248z$l = ".bcds-react-aria-DisclosureGroup {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n gap: var(--layout-border-width-small);\r\n background-color: var(--surface-color-border-default);\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n overflow: hidden;\r\n}\r\n\r\n/* Override individual accordion item borders */\r\n.bcds-react-aria-DisclosureGroup > .bcds-react-aria-Disclosure {\r\n border: none;\r\n border-radius: var(--layout-border-radius-none);\r\n}\r\n\r\n/* Focus state */\r\n.bcds-react-aria-DisclosureGroup\r\n > .bcds-react-aria-Disclosure[data-focus-visible-within] {\r\n border-radius: var(--layout-border-radius-hair);\r\n outline-offset: calc(var(--layout-margin-hair) * -1);\r\n}\r\n\r\n/* Title styles */\r\n.bcds-react-aria-DisclosureGroup--Title {\r\n color: var(--typography-color-primary);\r\n margin: var(--layout-margin-medium) var(--layout-margin-none);\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h1 {\r\n font: var(--typography-bold-h1);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h2 {\r\n font: var(--typography-bold-h2);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h3 {\r\n font: var(--typography-bold-h3);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h4 {\r\n font: var(--typography-bold-h4);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h5 {\r\n font: var(--typography-bold-h5);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > h6 {\r\n font: var(--typography-bold-h6);\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n}\r\n\r\n.bcds-react-aria-DisclosureGroup--Title > span {\r\n font: var(--typography-bold-large-body);\r\n}\r\n";
|
|
15847
|
+
styleInject(css_248z$l);
|
|
15848
|
+
|
|
15849
|
+
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
15850
|
+
function getTitle() {
|
|
15851
|
+
switch (titleElement) {
|
|
15852
|
+
case "h1":
|
|
15853
|
+
return jsx("h1", { children: title });
|
|
15854
|
+
case "h2":
|
|
15855
|
+
return jsx("h2", { children: title });
|
|
15856
|
+
case "h3":
|
|
15857
|
+
return jsx("h3", { children: title });
|
|
15858
|
+
case "h4":
|
|
15859
|
+
return jsx("h4", { children: title });
|
|
15860
|
+
case "h5":
|
|
15861
|
+
return jsx("h5", { children: title });
|
|
15862
|
+
case "h6":
|
|
15863
|
+
return jsx("h6", { children: title });
|
|
15864
|
+
default:
|
|
15865
|
+
return jsx("span", { children: title });
|
|
15866
|
+
}
|
|
15867
|
+
}
|
|
15868
|
+
return (jsxs(Fragment, { children: [title && (jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsx($28f4fd908f0de97f$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
15869
|
+
}
|
|
15870
|
+
|
|
15871
|
+
var css_248z$k = ".bcds-Alert-Banner {\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-around;\r\n width: 100%;\r\n padding: var(--layout-padding-none) var(--layout-padding-medium);\r\n}\r\n\r\n.bcds-Alert-Banner--Container {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-padding-medium);\r\n max-width: 1100px;\r\n padding: var(--layout-padding-small) var(--layout-padding-none);\r\n}\r\n\r\n.bcds-Alert-Banner--Icon {\r\n align-self: first baseline;\r\n justify-self: flex-start;\r\n padding-top: var(--layout-padding-xsmall);\r\n color: var(--icons-color-primary-invert);\r\n}\r\n\r\n.bcds-Alert-Banner--Content {\r\n display: inline-flex;\r\n gap: var(--layout-margin-medium);\r\n align-items: first baseline;\r\n flex-grow: 1;\r\n flex-wrap: wrap;\r\n font: var(--typography-regular-body);\r\n color: var(--typography-color-primary-invert);\r\n}\r\n\r\n.bcds-Alert-Banner--closeIcon {\r\n align-self: first baseline;\r\n}\r\n\r\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\r\n color: var(--icons-color-primary);\r\n}\r\n\r\n.bcds-Alert-Banner--closeIcon svg {\r\n color: var(--icons-color-primary-invert);\r\n}\r\n\r\n/* Variants */\r\n\r\n/* Info theme */\r\n.bcds-Alert-Banner.info {\r\n background-color: var(--surface-color-background-dark-blue);\r\n}\r\n\r\n/* Success theme */\r\n.bcds-Alert-Banner.success {\r\n background-color: var(--support-border-color-success);\r\n}\r\n\r\n/* Warning theme */\r\n.bcds-Alert-Banner.warning {\r\n background-color: var(--support-border-color-warning);\r\n}\r\n\r\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\r\n color: var(--icons-color-primary);\r\n}\r\n\r\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\r\n color: var(--icons-color-primary);\r\n}\r\n\r\n/* Danger theme */\r\n.bcds-Alert-Banner.danger {\r\n background-color: var(--support-border-color-danger);\r\n}\r\n\r\n/* Black theme */\r\n\r\n.bcds-Alert-Banner.black {\r\n background-color: var(--theme-gray-110);\r\n}\r\n";
|
|
15872
|
+
styleInject(css_248z$k);
|
|
15873
|
+
|
|
15201
15874
|
/* The component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
15202
15875
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
15203
15876
|
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M12.4688 7.46875C12.75 7.1875 13.2188 7.1875 13.5 7.5C13.8125 7.78125 13.8125 8.25 13.5 8.53125L9.5 12.5312C9.375 12.6875 9.1875 12.75 9 12.75C8.78125 12.75 8.59375 12.6875 8.4375 12.5312L6.4375 10.5312C6.125 10.25 6.125 9.78125 6.4375 9.46875C6.71875 9.1875 7.1875 9.1875 7.5 9.46875L9 10.9688L12.4688 7.46875ZM10 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2ZM10 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 10 3.5C6.40625 3.5 3.5 6.4375 3.5 10C3.5 13.5938 6.40625 16.5 10 16.5Z", fill: "currentColor" }) }) }));
|
|
@@ -15244,14 +15917,14 @@ function AlertBanner({ variant = "info", isIconHidden = false, isCloseable = tru
|
|
|
15244
15917
|
return (jsx("div", { className: `bcds-Alert-Banner ${variant}`, ...props, children: jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
15245
15918
|
}
|
|
15246
15919
|
|
|
15247
|
-
var css_248z$j = ".bcds-ButtonGroup {\n display: flex;\n gap: var(--layout-margin-small);\n flex-grow: 1;\n}\n\n.bcds-ButtonGroup.horizontal {\n flex-direction: row;\n}\n\n.bcds-ButtonGroup.vertical {\n flex-direction: column;\n}\n\n.bcds-ButtonGroup.start {\n justify-content: flex-start;\n}\n\n.bcds-ButtonGroup.center {\n justify-content: center;\n}\n\n.bcds-ButtonGroup.end {\n justify-content: flex-end;\n}\n";
|
|
15920
|
+
var css_248z$j = ".bcds-ButtonGroup {\r\n display: flex;\r\n gap: var(--layout-margin-small);\r\n flex-grow: 1;\r\n}\r\n\r\n.bcds-ButtonGroup.horizontal {\r\n flex-direction: row;\r\n}\r\n\r\n.bcds-ButtonGroup.vertical {\r\n flex-direction: column;\r\n}\r\n\r\n.bcds-ButtonGroup.start {\r\n justify-content: flex-start;\r\n}\r\n\r\n.bcds-ButtonGroup.center {\r\n justify-content: center;\r\n}\r\n\r\n.bcds-ButtonGroup.end {\r\n justify-content: flex-end;\r\n}\r\n";
|
|
15248
15921
|
styleInject(css_248z$j);
|
|
15249
15922
|
|
|
15250
15923
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
15251
15924
|
return (jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
15252
15925
|
}
|
|
15253
15926
|
|
|
15254
|
-
var css_248z$i = ".bcds-react-aria-AlertDialog {\n display: flex;\n flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n display: inline-flex;\n flex-direction: row;\n gap: var(--layout-padding-small);\n justify-content: space-between;\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-bottom: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n flex-grow: 1;\n font: var(--typography-bold-h5);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n justify-self: flex-start;\n align-self: center;\n padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n justify-self: flex-end;\n color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n font: var(--typography-regular-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-bottom: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
|
|
15927
|
+
var css_248z$i = ".bcds-react-aria-AlertDialog {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Variant icons */\r\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\r\n color: var(--icons-color-primary);\r\n}\r\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\r\n color: var(--icons-color-success);\r\n}\r\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\r\n color: var(--icons-color-warning);\r\n}\r\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\r\n color: var(--icons-color-danger);\r\n}\r\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\r\n color: var(--icons-color-danger);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog--Header {\r\n display: inline-flex;\r\n flex-direction: row;\r\n gap: var(--layout-padding-small);\r\n justify-content: space-between;\r\n padding: var(--layout-padding-medium) var(--layout-padding-large);\r\n border-bottom: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog--Title {\r\n flex-grow: 1;\r\n font: var(--typography-bold-h5);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog--Icon {\r\n justify-self: flex-start;\r\n align-self: center;\r\n padding-top: var(--layout-padding-xsmall);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog--closeIcon {\r\n justify-self: flex-end;\r\n color: var(--icons-color-primary);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog--children {\r\n font: var(--typography-regular-body);\r\n color: var(--typography-color-primary);\r\n padding: var(--layout-padding-medium) var(--layout-padding-large);\r\n border-bottom: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n}\r\n\r\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\r\n padding: var(--layout-padding-medium) var(--layout-padding-large);\r\n}\r\n";
|
|
15255
15928
|
styleInject(css_248z$i);
|
|
15256
15929
|
|
|
15257
15930
|
/* Sets correct left icon for selected variant */
|
|
@@ -15275,7 +15948,7 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
|
|
|
15275
15948
|
return (jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxs(Fragment, { children: [jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsx(SvgCloseIcon, {}) }) }))] }), children && (jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsx(Fragment, { children: children }) })), buttons && (jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
|
|
15276
15949
|
}
|
|
15277
15950
|
|
|
15278
|
-
var css_248z$h = ".bcds-Callout {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-radius: var(--layout-border-radius-medium)\n var(--layout-border-radius-none) var(--layout-border-radius-none)\n var(--layout-border-radius-medium);\n}\n\n.bcds-Callout--Container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: var(--layout-margin-small);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Title {\n font: var(--typography-bold-large-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Description {\n font: var(--typography-regular-body);\n color: var(--typography-color-secondary);\n}\n\n/* Theme - light grey (default) */\n.bcds-Callout.lightGrey {\n background-color: var(--surface-color-background-light-gray);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light blue */\n.bcds-Callout.lightBlue {\n background-color: var(--theme-blue-10);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light gold */\n.bcds-Callout.lightGold {\n background-color: var(--theme-gold-10);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - blue */\n.bcds-Callout.Blue {\n background-color: var(--surface-color-background-dark-blue);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - grey */\n.bcds-Callout.Grey {\n background-color: var(--theme-gray-80);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - black */\n.bcds-Callout.Black {\n background-color: var(--theme-gray-100);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Black .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Black .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Border disabled */\n.bcds-Callout.lightGrey.noBorder,\n.bcds-Callout.lightGold.noBorder,\n.bcds-Callout.lightBlue.noBorder,\n.bcds-Callout.Blue.noBorder,\n.bcds-Callout.Grey.noBorder,\n.bcds-Callout.Black.noBorder {\n border-left: none;\n border-radius: var(--layout-border-radius-none);\n}\n";
|
|
15951
|
+
var css_248z$h = ".bcds-Callout {\r\n display: flex;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: var(--layout-padding-medium) var(--layout-padding-large);\r\n border-radius: var(--layout-border-radius-medium)\r\n var(--layout-border-radius-none) var(--layout-border-radius-none)\r\n var(--layout-border-radius-medium);\r\n}\r\n\r\n.bcds-Callout--Container {\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n.bcds-Callout--Container > .bcds-Callout--Title {\r\n font: var(--typography-bold-large-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-Callout--Container > .bcds-Callout--Description {\r\n font: var(--typography-regular-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n\r\n/* Theme - light grey (default) */\r\n.bcds-Callout.lightGrey {\r\n background-color: var(--surface-color-background-light-gray);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\r\n}\r\n\r\n/* Theme - light blue */\r\n.bcds-Callout.lightBlue {\r\n background-color: var(--theme-blue-10);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\r\n}\r\n\r\n/* Theme - light gold */\r\n.bcds-Callout.lightGold {\r\n background-color: var(--theme-gold-10);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\r\n}\r\n\r\n/* Theme - blue */\r\n.bcds-Callout.Blue {\r\n background-color: var(--surface-color-background-dark-blue);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\r\n}\r\n\r\n.bcds-Callout.Blue .bcds-Callout--Title {\r\n color: var(--typography-color-primary-invert);\r\n}\r\n\r\n.bcds-Callout.Blue .bcds-Callout--Description {\r\n color: var(--typography-color-secondary-invert);\r\n}\r\n\r\n/* Theme - grey */\r\n.bcds-Callout.Grey {\r\n background-color: var(--theme-gray-80);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\r\n}\r\n\r\n.bcds-Callout.Grey .bcds-Callout--Title {\r\n color: var(--typography-color-primary-invert);\r\n}\r\n\r\n.bcds-Callout.Grey .bcds-Callout--Description {\r\n color: var(--typography-color-secondary-invert);\r\n}\r\n\r\n/* Theme - black */\r\n.bcds-Callout.Black {\r\n background-color: var(--theme-gray-100);\r\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\r\n}\r\n\r\n.bcds-Callout.Black .bcds-Callout--Title {\r\n color: var(--typography-color-primary-invert);\r\n}\r\n\r\n.bcds-Callout.Black .bcds-Callout--Description {\r\n color: var(--typography-color-secondary-invert);\r\n}\r\n\r\n/* Border disabled */\r\n.bcds-Callout.lightGrey.noBorder,\r\n.bcds-Callout.lightGold.noBorder,\r\n.bcds-Callout.lightBlue.noBorder,\r\n.bcds-Callout.Blue.noBorder,\r\n.bcds-Callout.Grey.noBorder,\r\n.bcds-Callout.Black.noBorder {\r\n border-left: none;\r\n border-radius: var(--layout-border-radius-none);\r\n}\r\n";
|
|
15279
15952
|
styleInject(css_248z$h);
|
|
15280
15953
|
|
|
15281
15954
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
@@ -15291,21 +15964,21 @@ function SvgDashIcon({ id = "dash-icon" }) {
|
|
|
15291
15964
|
return (jsx("svg", { id: id, width: "8", height: "10", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6.99005 1.96004H1.01005C0.479855 1.96004 0.0500488 1.53023 0.0500488 1.00004C0.0500488 0.469846 0.479855 0.0400391 1.01005 0.0400391H6.99005C7.52024 0.0400391 7.95005 0.469846 7.95005 1.00004C7.95005 1.53023 7.52024 1.96004 6.99005 1.96004H6.99005Z", fill: "currentColor" }) }));
|
|
15292
15965
|
}
|
|
15293
15966
|
|
|
15294
|
-
var css_248z$g = ".bcds-react-aria-Checkbox {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n align-self: first baseline;\n display: flex;\n margin-top: var(--layout-margin-hair);\n justify-content: space-around;\n width: var(--icons-size-small);\n height: var(--icons-size-small);\n min-width: var(--icons-size-small);\n background-color: var(--surface-color-secondary-default);\n border-color: var(--surface-color-border-medium);\n border-style: solid;\n border-width: var(--layout-border-width-small);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focused] > .checkbox {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n background-color: var(--surface-color-primary-hover);\n border-color: var(--surface-color-primary-hover);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n border-color: var(--surface-color-border-medium);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n border-color: var(--surface-color-primary-disabled);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n background-color: var(--surface-color-primary-disabled);\n border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n align-self: center;\n vertical-align: middle;\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n";
|
|
15967
|
+
var css_248z$g = ".bcds-react-aria-Checkbox {\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n\r\n/* Checkbox */\r\n.bcds-react-aria-Checkbox > .checkbox {\r\n align-self: first baseline;\r\n display: flex;\r\n margin-top: var(--layout-margin-hair);\r\n justify-content: space-around;\r\n width: var(--icons-size-small);\r\n height: var(--icons-size-small);\r\n min-width: var(--icons-size-small);\r\n background-color: var(--surface-color-secondary-default);\r\n border-color: var(--surface-color-border-medium);\r\n border-style: solid;\r\n border-width: var(--layout-border-width-small);\r\n border-radius: var(--layout-border-radius-small);\r\n}\r\n.bcds-react-aria-Checkbox > .checkbox > svg {\r\n align-self: center;\r\n}\r\n\r\n/* Label */\r\n.bcds-react-aria-Checkbox > .label {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n\r\n/* Focus */\r\n.bcds-react-aria-Checkbox[data-focused] > .checkbox {\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Hover */\r\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\r\n border-color: var(--surface-color-border-dark);\r\n}\r\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\r\n background-color: var(--surface-color-primary-hover);\r\n border-color: var(--surface-color-primary-hover);\r\n}\r\n\r\n/* Pressed */\r\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\r\n background-color: var(--surface-color-primary-default);\r\n}\r\n\r\n/* Selected */\r\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\r\n background-color: var(--surface-color-primary-default);\r\n border-color: var(--surface-color-primary-default);\r\n}\r\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\r\n color: var(--icons-color-primary-invert);\r\n}\r\n\r\n/* Disabled */\r\n.bcds-react-aria-Checkbox[data-disabled] {\r\n cursor: not-allowed;\r\n}\r\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\r\n border-color: var(--surface-color-border-medium);\r\n background-color: var(--surface-color-primary-disabled);\r\n}\r\n.bcds-react-aria-Checkbox[data-disabled] > .label {\r\n color: var(--typography-color-disabled);\r\n}\r\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\r\n border-color: var(--surface-color-primary-disabled);\r\n background-color: var(--surface-color-primary-disabled);\r\n}\r\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\r\n color: var(--icons-color-disabled);\r\n}\r\n\r\n/* Indeterminate */\r\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\r\n background-color: var(--surface-color-primary-default);\r\n border-color: var(--surface-color-primary-default);\r\n}\r\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\r\n background-color: var(--surface-color-primary-disabled);\r\n border-color: var(--surface-color-primary-disabled);\r\n}\r\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\r\n background-color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\r\n color: var(--icons-color-primary-invert);\r\n align-self: center;\r\n vertical-align: middle;\r\n}\r\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\r\n color: var(--icons-color-disabled);\r\n}\r\n\r\n/* Read-only */\r\n.bcds-react-aria-Checkbox[data-readonly] {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Invalid */\r\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\r\n border-color: var(--support-border-color-danger);\r\n}\r\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\r\n color: var(--icons-color-primary-invert);\r\n}\r\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\r\n background-color: var(--surface-color-primary-danger-button-default);\r\n}\r\n";
|
|
15295
15968
|
styleInject(css_248z$g);
|
|
15296
15969
|
|
|
15297
15970
|
function Checkbox({ value, children, ...props }) {
|
|
15298
15971
|
return (jsx($bc237834342dbd75$export$48513f6b9f8ce62d, { className: "bcds-react-aria-Checkbox", value: value, ...props, children: ({ isRequired, isSelected, isIndeterminate }) => (jsxs(Fragment, { children: [jsxs("div", { className: "checkbox", children: [isSelected && !isIndeterminate && jsx(SvgCheckIcon, {}), isIndeterminate && jsx(SvgDashIcon, {})] }), jsxs("span", { className: "label", children: [jsx(Fragment, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
15299
15972
|
}
|
|
15300
15973
|
|
|
15301
|
-
var css_248z$f = ".bcds-react-aria-CheckboxGroup {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* Orientation */\n.bcds-react-aria-CheckboxGroup--options {\n display: flex;\n}\n\n.bcds-react-aria-CheckboxGroup--options.vertical {\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n.bcds-react-aria-CheckboxGroup--options.horizontal {\n flex-direction: row;\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap {\n flex-wrap: wrap;\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Parts */\n.bcds-react-aria-CheckboxGroup--label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-CheckboxGroup--description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n.bcds-react-aria-CheckboxGroup--error {\n display: inline-flex;\n flex-direction: row;\n gap: var(--layout-margin-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n";
|
|
15974
|
+
var css_248z$f = ".bcds-react-aria-CheckboxGroup {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n/* Orientation */\r\n.bcds-react-aria-CheckboxGroup--options {\r\n display: flex;\r\n}\r\n\r\n.bcds-react-aria-CheckboxGroup--options.vertical {\r\n flex-direction: column;\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n.bcds-react-aria-CheckboxGroup--options.horizontal {\r\n flex-direction: row;\r\n gap: var(--layout-margin-medium);\r\n}\r\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-nowrap {\r\n flex-wrap: nowrap;\r\n}\r\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap {\r\n flex-wrap: wrap;\r\n}\r\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap-reverse {\r\n flex-wrap: wrap-reverse;\r\n}\r\n\r\n/* Parts */\r\n.bcds-react-aria-CheckboxGroup--label {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-react-aria-CheckboxGroup--description {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n\r\n.bcds-react-aria-CheckboxGroup--error {\r\n display: inline-flex;\r\n flex-direction: row;\r\n gap: var(--layout-margin-xsmall);\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-danger);\r\n}\r\n";
|
|
15302
15975
|
styleInject(css_248z$f);
|
|
15303
15976
|
|
|
15304
15977
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
15305
15978
|
return (jsx($bc237834342dbd75$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsx(Fragment, { children: children }) }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsx(SvgExclamationIcon, {}), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
15306
15979
|
}
|
|
15307
15980
|
|
|
15308
|
-
var css_248z$e = ".bcds-react-aria-Dialog {\n display: flex;\n flex-direction: column;\n min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n color: var(--icons-color-primary);\n position: absolute;\n top: 0;\n right: 0;\n padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Dialog--closeIcon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
15981
|
+
var css_248z$e = ".bcds-react-aria-Dialog {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: var(--layout-margin-xxxlarge);\r\n}\r\n\r\n.bcds-react-aria-Dialog--Container {\r\n position: relative;\r\n}\r\n\r\n/* Close icon */\r\n.bcds-react-aria-Dialog--closeIcon {\r\n color: var(--icons-color-primary);\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n padding: var(--layout-padding-small);\r\n}\r\n.bcds-react-aria-Dialog--closeIcon > svg {\r\n min-width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n";
|
|
15309
15982
|
styleInject(css_248z$e);
|
|
15310
15983
|
|
|
15311
15984
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
@@ -15317,7 +15990,7 @@ function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
|
15317
15990
|
return (jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", style: { fill: "#fff", strokeWidth: "0px" } }), jsxs("g", { children: [jsxs("g", { children: [jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxs("g", { children: [jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", style: { fill: "#234075", strokeWidth: "0px" } })] }), jsx("rect", { width: "847.65", height: "327.01", style: { fill: "none", strokeWidth: "0px" } })] }), jsxs("g", { children: [jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", style: { fill: "#e3a82b", strokeWidth: "0px" } })] }), jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", style: { fill: "#234075", strokeWidth: "0px" } })] })] }));
|
|
15318
15991
|
}
|
|
15319
15992
|
|
|
15320
|
-
var css_248z$d = ".bcds-footer {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n background-color: var(--theme-gray-110);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: stretch;\n color: var(--typography-color-primary-invert);\n font: var(--typography-regular-small-body);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text\n > p {\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-background-light-gray);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--layout-padding-xlarge);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n column-gap: var(--layout-padding-xlarge);\n row-gap: var(--layout-padding-medium);\n justify-content: space-between;\n width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal {\n flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical {\n flex-direction: column;\n align-items: stretch;\n row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-large);\n min-width: 324px;\n width: 576px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > #bcgov-logo-footer {\n width: 146px;\n min-width: 146px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p {\n font: var(--typography-regular-small-body);\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n text-decoration: underline;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a:hover {\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links {\n margin: var(--layout-margin-none);\n}\n\n/*\n When Footer hasn't been passed `children`, expand the links container to take\n up 320px, as the default links are narrower.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal\n > .bcds-footer--links {\n min-width: 320px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > .bcds-footer--links-title {\n display: block;\n font: var(--typography-bold-small-body);\n margin-bottom: var(--layout-padding-medium);\n text-transform: uppercase;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: auto;\n grid-column-gap: var(--layout-padding-xlarge);\n grid-row-gap: var(--layout-padding-small);\n list-style: none;\n margin: var(--layout-margin-none);\n padding: var(--layout-padding-none);\n}\n\n/*\n When a Footer has been passed `children`, the logo-links container fills the\n full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a {\n color: var(--typography-color-primary);\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a:hover {\n text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n background-color: var(--surface-color-border-dark);\n border: var(--layout-border-width-none);\n height: var(--layout-border-width-small);\n margin: var(--layout-margin-none);\n width: 100%;\n}\n\np.bcds-footer--copyright {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-body);\n margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (max-width: 991px) {\n /* Links drop beneath logo in the default configuration */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n flex-wrap: wrap;\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n max-width: 324px;\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only two columns of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* Extra small screens */\n@media (max-width: 575px) {\n .bcds-footer > .bcds-footer--acknowledgement {\n padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container {\n padding: var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n gap: var(--layout-padding-medium);\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n gap: var(--layout-padding-medium);\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only one column of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(1, 1fr);\n }\n}\n";
|
|
15993
|
+
var css_248z$d = ".bcds-footer {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 100%;\r\n}\r\n\r\n.bcds-footer > .bcds-footer--acknowledgement {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: space-around;\r\n border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\r\n border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\r\n background-color: var(--theme-gray-110);\r\n padding: var(--layout-padding-xlarge);\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--acknowledgement\r\n > .bcds-footer--acknowledgement-text {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: stretch;\r\n color: var(--typography-color-primary-invert);\r\n font: var(--typography-regular-small-body);\r\n max-width: 1100px;\r\n width: 100%;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--acknowledgement\r\n > .bcds-footer--acknowledgement-text\r\n > p {\r\n margin: var(--layout-margin-none);\r\n}\r\n\r\n.bcds-footer > .bcds-footer--container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: space-around;\r\n background-color: var(--surface-color-background-light-gray);\r\n padding: var(--layout-padding-xlarge);\r\n}\r\n\r\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: var(--layout-padding-xlarge);\r\n max-width: 1100px;\r\n width: 100%;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: flex-start;\r\n column-gap: var(--layout-padding-xlarge);\r\n row-gap: var(--layout-padding-medium);\r\n justify-content: space-between;\r\n width: 100%;\r\n}\r\n\r\n/* `horizontal` class is the default, when no `children` prop is passed */\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.horizontal {\r\n flex-direction: row;\r\n}\r\n\r\n/* `vertical` class is used when a `children` prop is passed */\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.vertical {\r\n flex-direction: column;\r\n align-items: stretch;\r\n row-gap: var(--layout-padding-xlarge);\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--layout-padding-large);\r\n min-width: 324px;\r\n width: 576px;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo\r\n > #bcgov-logo-footer {\r\n width: 146px;\r\n min-width: 146px;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo\r\n > p {\r\n font: var(--typography-regular-small-body);\r\n margin: var(--layout-margin-none);\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo\r\n > p\r\n > a {\r\n color: var(--typography-color-secondary);\r\n font: var(--typography-regular-small-body);\r\n text-decoration: underline;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo\r\n > p\r\n > a:hover {\r\n text-decoration: none;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links {\r\n margin: var(--layout-margin-none);\r\n}\r\n\r\n/*\r\n When Footer hasn't been passed `children`, expand the links container to take\r\n up 320px, as the default links are narrower.\r\n*/\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.horizontal\r\n > .bcds-footer--links {\r\n min-width: 320px;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links\r\n > .bcds-footer--links-title {\r\n display: block;\r\n font: var(--typography-bold-small-body);\r\n margin-bottom: var(--layout-padding-medium);\r\n text-transform: uppercase;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links\r\n > ul {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n grid-template-rows: auto;\r\n grid-column-gap: var(--layout-padding-xlarge);\r\n grid-row-gap: var(--layout-padding-small);\r\n list-style: none;\r\n margin: var(--layout-margin-none);\r\n padding: var(--layout-padding-none);\r\n}\r\n\r\n/*\r\n When a Footer has been passed `children`, the logo-links container fills the\r\n full width of the container, so there's room for 4 columns of links.\r\n*/\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.vertical\r\n > .bcds-footer--links\r\n > ul {\r\n grid-template-columns: repeat(4, 1fr);\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links\r\n > ul\r\n > li {\r\n font: var(--typography-regular-small-body);\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links\r\n > ul\r\n > li\r\n > a {\r\n color: var(--typography-color-primary);\r\n text-decoration: none;\r\n}\r\n\r\n.bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--links\r\n > ul\r\n > li\r\n > a:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\r\n background-color: var(--surface-color-border-dark);\r\n border: var(--layout-border-width-none);\r\n height: var(--layout-border-width-small);\r\n margin: var(--layout-margin-none);\r\n width: 100%;\r\n}\r\n\r\np.bcds-footer--copyright {\r\n color: var(--typography-color-secondary);\r\n font: var(--typography-regular-body);\r\n margin: var(--layout-margin-none);\r\n}\r\n\r\n/* Tablet */\r\n@media (max-width: 991px) {\r\n /* Links drop beneath logo in the default configuration */\r\n .bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo {\r\n max-width: 324px;\r\n }\r\n\r\n /*\r\n When the `children` prop is used with multiple FooterLinks components,\r\n only two columns of links appear on screen at once.\r\n */\r\n .bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.vertical\r\n > .bcds-footer--links\r\n > ul {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n/* Extra small screens */\r\n@media (max-width: 575px) {\r\n .bcds-footer > .bcds-footer--acknowledgement {\r\n padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\r\n }\r\n\r\n .bcds-footer > .bcds-footer--container {\r\n padding: var(--layout-padding-medium);\r\n }\r\n\r\n .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\r\n gap: var(--layout-padding-medium);\r\n }\r\n\r\n .bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links\r\n > .bcds-footer--logo {\r\n gap: var(--layout-padding-medium);\r\n }\r\n\r\n /*\r\n When the `children` prop is used with multiple FooterLinks components,\r\n only one column of links appear on screen at once.\r\n */\r\n .bcds-footer\r\n > .bcds-footer--container\r\n > .bcds-footer--container-content\r\n > .bcds-footer--logo-links.vertical\r\n > .bcds-footer--links\r\n > ul {\r\n grid-template-columns: repeat(1, 1fr);\r\n }\r\n}\r\n";
|
|
15321
15994
|
styleInject(css_248z$d);
|
|
15322
15995
|
|
|
15323
15996
|
/**
|
|
@@ -15372,7 +16045,7 @@ function Form({ ...props }) {
|
|
|
15372
16045
|
return jsx($d3e0e05bdfcf66bd$export$a7fed597f4b8afd8, { ...props });
|
|
15373
16046
|
}
|
|
15374
16047
|
|
|
15375
|
-
var css_248z$c = ".bcds-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-forms-default);\n border-bottom-color: var(--surface-color-border-default);\n border-bottom-style: solid;\n border-bottom-width: var(--layout-border-width-small);\n min-height: 65px;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n width: 100%;\n}\n\n.bcds-header > .bcds-header--container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n max-width: 1100px;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--title {\n flex-grow: 1;\n font: var(--typography-bold-h4);\n color: var(--typography-color-primary);\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {\n background-color: var(--surface-color-forms-default);\n box-sizing: border-box;\n color: var(--typography-color-link);\n font: var(--typography-regular-body);\n margin-top: -17.5px; /* Center the link visually in a single line-height header */\n padding: var(--layout-padding-xsmall) var(--layout-padding-medium);\n position: absolute;\n margin-left: -100000px;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,\n.bcds-header\n > .bcds-header--container\n > ul.bcds-header--skiplinks\n li\n button:focus {\n margin-left: 0; /* Line up left edge with left edge of logo image */\n text-wrap: nowrap;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--line {\n background-color: var(--surface-color-border-default);\n width: 1px;\n height: 32px;\n}\n\n.bcds-header > .bcds-header--container svg#bcgov-logo-header {\n min-width: 129px;\n width: 129px;\n}\n";
|
|
16048
|
+
var css_248z$c = ".bcds-header {\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-around;\r\n background-color: var(--surface-color-forms-default);\r\n border-bottom-color: var(--surface-color-border-default);\r\n border-bottom-style: solid;\r\n border-bottom-width: var(--layout-border-width-small);\r\n min-height: 65px;\r\n padding: var(--layout-padding-none) var(--layout-padding-medium);\r\n width: 100%;\r\n}\r\n\r\n.bcds-header > .bcds-header--container {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-padding-medium);\r\n max-width: 1100px;\r\n}\r\n\r\n.bcds-header > .bcds-header--container > .bcds-header--title {\r\n flex-grow: 1;\r\n font: var(--typography-bold-h4);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n position: absolute;\r\n}\r\n\r\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,\r\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {\r\n background-color: var(--surface-color-forms-default);\r\n box-sizing: border-box;\r\n color: var(--typography-color-link);\r\n font: var(--typography-regular-body);\r\n margin-top: -17.5px; /* Center the link visually in a single line-height header */\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-medium);\r\n position: absolute;\r\n margin-left: -100000px;\r\n}\r\n\r\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,\r\n.bcds-header\r\n > .bcds-header--container\r\n > ul.bcds-header--skiplinks\r\n li\r\n button:focus {\r\n margin-left: 0; /* Line up left edge with left edge of logo image */\r\n text-wrap: nowrap;\r\n}\r\n\r\n.bcds-header > .bcds-header--container > .bcds-header--line {\r\n background-color: var(--surface-color-border-default);\r\n width: 1px;\r\n height: 32px;\r\n}\r\n\r\n.bcds-header > .bcds-header--container svg#bcgov-logo-header {\r\n min-width: 129px;\r\n width: 129px;\r\n}\r\n";
|
|
15376
16049
|
styleInject(css_248z$c);
|
|
15377
16050
|
|
|
15378
16051
|
function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
@@ -15406,7 +16079,7 @@ function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "b
|
|
|
15406
16079
|
}) })), title && (jsxs(Fragment, { children: [jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
15407
16080
|
}
|
|
15408
16081
|
|
|
15409
|
-
var css_248z$b = ".bcds-Inline-Alert {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n\n/* Alert content */\n.bcds-Inline-Alert--container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.bcds-Inline-Alert--container > .title {\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-Inline-Alert--container > .description {\n font: var(--typography-regular-body);\n color: var(--typography-color-primary);\n}\n\n/* Left icon */\n.bcds-Inline-Alert--icon {\n display: inline-flex;\n align-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-Inline-Alert--icon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Closeable */\n.bcds-Inline-Alert.closeable {\n /*\n Because the close icon button is removed from the document flow, we\n manually adjust the padding to push the `--container` element off the right\n edge of the InlineAlert.\n */\n padding: var(--layout-padding-medium) 52px var(--layout-padding-medium)\n var(--layout-padding-large);\n}\n\n.bcds-Inline-Alert--closeIcon {\n align-self: first baseline;\n color: var(--icons-color-primary);\n position: relative;\n}\n\n.bcds-Inline-Alert--closeIcon > button {\n position: absolute;\n /*\n Centers the button vertically.\n Button height (32px) minus line-height of text (27px) divided by 2.\n */\n top: -2.5px;\n}\n\n.bcds-Inline-Alert--closeIcon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Info variant */\n.bcds-Inline-Alert.info {\n background-color: var(--support-surface-color-info);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-info);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.info > .bcds-Inline-Alert--icon {\n color: var(--icons-color-info);\n}\n\n/* Success variant */\n.bcds-Inline-Alert.success {\n background-color: var(--suport-surface-color-success);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-success);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.success > .bcds-Inline-Alert--icon {\n color: var(--icons-color-success);\n}\n\n/* Warning variant */\n.bcds-Inline-Alert.warning {\n background-color: var(--support-surface-color-warning);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-warning);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.warning > .bcds-Inline-Alert--icon {\n color: var(--icons-color-warning);\n}\n\n/* Danger variant */\n.bcds-Inline-Alert.danger {\n background-color: var(--support-surface-color-danger);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.danger > .bcds-Inline-Alert--icon {\n color: var(--icons-color-danger);\n}\n\n/* Button group */\n.bcds-Inline-Alert--container > .bcds-ButtonGroup {\n padding-top: var(--layout-padding-small);\n}\n";
|
|
16082
|
+
var css_248z$b = ".bcds-Inline-Alert {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n gap: var(--layout-margin-small);\r\n padding: var(--layout-padding-medium) var(--layout-padding-large);\r\n}\r\n\r\n/* Alert content */\r\n.bcds-Inline-Alert--container {\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n}\r\n\r\n.bcds-Inline-Alert--container > .title {\r\n font: var(--typography-bold-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-Inline-Alert--container > .description {\r\n font: var(--typography-regular-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n/* Left icon */\r\n.bcds-Inline-Alert--icon {\r\n display: inline-flex;\r\n align-self: flex-start;\r\n padding-top: var(--layout-padding-xsmall);\r\n}\r\n\r\n.bcds-Inline-Alert--icon > svg {\r\n min-width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n\r\n/* Closeable */\r\n.bcds-Inline-Alert.closeable {\r\n /*\r\n Because the close icon button is removed from the document flow, we\r\n manually adjust the padding to push the `--container` element off the right\r\n edge of the InlineAlert.\r\n */\r\n padding: var(--layout-padding-medium) 52px var(--layout-padding-medium)\r\n var(--layout-padding-large);\r\n}\r\n\r\n.bcds-Inline-Alert--closeIcon {\r\n align-self: first baseline;\r\n color: var(--icons-color-primary);\r\n position: relative;\r\n}\r\n\r\n.bcds-Inline-Alert--closeIcon > button {\r\n position: absolute;\r\n /*\r\n Centers the button vertically.\r\n Button height (32px) minus line-height of text (27px) divided by 2.\r\n */\r\n top: -2.5px;\r\n}\r\n\r\n.bcds-Inline-Alert--closeIcon > svg {\r\n min-width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n\r\n/* Info variant */\r\n.bcds-Inline-Alert.info {\r\n background-color: var(--support-surface-color-info);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-info);\r\n border-radius: var(--layout-border-radius-medium);\r\n}\r\n\r\n.bcds-Inline-Alert.info > .bcds-Inline-Alert--icon {\r\n color: var(--icons-color-info);\r\n}\r\n\r\n/* Success variant */\r\n.bcds-Inline-Alert.success {\r\n background-color: var(--suport-surface-color-success);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-success);\r\n border-radius: var(--layout-border-radius-medium);\r\n}\r\n\r\n.bcds-Inline-Alert.success > .bcds-Inline-Alert--icon {\r\n color: var(--icons-color-success);\r\n}\r\n\r\n/* Warning variant */\r\n.bcds-Inline-Alert.warning {\r\n background-color: var(--support-surface-color-warning);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-warning);\r\n border-radius: var(--layout-border-radius-medium);\r\n}\r\n\r\n.bcds-Inline-Alert.warning > .bcds-Inline-Alert--icon {\r\n color: var(--icons-color-warning);\r\n}\r\n\r\n/* Danger variant */\r\n.bcds-Inline-Alert.danger {\r\n background-color: var(--support-surface-color-danger);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-danger);\r\n border-radius: var(--layout-border-radius-medium);\r\n}\r\n\r\n.bcds-Inline-Alert.danger > .bcds-Inline-Alert--icon {\r\n color: var(--icons-color-danger);\r\n}\r\n\r\n/* Button group */\r\n.bcds-Inline-Alert--container > .bcds-ButtonGroup {\r\n padding-top: var(--layout-padding-small);\r\n}\r\n";
|
|
15410
16083
|
styleInject(css_248z$b);
|
|
15411
16084
|
|
|
15412
16085
|
function getIcon(variant) {
|
|
@@ -15427,38 +16100,28 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
|
|
|
15427
16100
|
return (jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsx("span", { className: "bcds-Inline-Alert--icon", children: getIcon(variant) })), jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxs(Fragment, { children: [title && (jsx("span", { className: "title", id: "alert-title", children: title })), description && jsx("span", { className: "description", children: description }), buttons && (jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsx(SvgCloseIcon, {}) }) }))] }));
|
|
15428
16101
|
}
|
|
15429
16102
|
|
|
15430
|
-
var css_248z$a = "/* Styles for overlay element */\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-overlay-default);\n height: 100vh;\n width: 100vw;\n z-index: 1000;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: modal-fade 200ms;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: modal-fade 150ms reverse ease-in;\n}\n@media (prefers-reduced-motion) {\n /* Don't animate modal fade in/out if prefers-reduced-motion is on */\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: unset;\n }\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: unset;\n }\n}\n\n@keyframes modal-fade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n/* Styles for content container */\n.bcds-react-aria-Modal {\n box-sizing: border-box;\n max-width: 100vw;\n width: 600px;\n max-height: 100vh;\n min-height: var(--layout-margin-xxxlarge);\n height: auto;\n margin: var(--layout-margin-large);\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n background: var(--surface-color-forms-default);\n box-shadow: var(--surface-shadow-large);\n}\n";
|
|
16103
|
+
var css_248z$a = "/* Styles for overlay element */\r\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\r\n position: fixed;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n background: var(--surface-color-overlay-default);\r\n height: 100vh;\r\n width: 100vw;\r\n z-index: 1000;\r\n}\r\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\r\n animation: modal-fade 200ms;\r\n}\r\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\r\n animation: modal-fade 150ms reverse ease-in;\r\n}\r\n@media (prefers-reduced-motion) {\r\n /* Don't animate modal fade in/out if prefers-reduced-motion is on */\r\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\r\n animation: unset;\r\n }\r\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\r\n animation: unset;\r\n }\r\n}\r\n\r\n@keyframes modal-fade {\r\n from {\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* Styles for content container */\r\n.bcds-react-aria-Modal {\r\n box-sizing: border-box;\r\n max-width: 100vw;\r\n width: 600px;\r\n max-height: 100vh;\r\n min-height: var(--layout-margin-xxxlarge);\r\n height: auto;\r\n margin: var(--layout-margin-large);\r\n border-radius: var(--layout-border-radius-medium);\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n background: var(--surface-color-forms-default);\r\n box-shadow: var(--surface-shadow-large);\r\n}\r\n";
|
|
15431
16104
|
styleInject(css_248z$a);
|
|
15432
16105
|
|
|
15433
16106
|
function Modal({ children, ...props }) {
|
|
15434
16107
|
return (jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal", ...props, children: children }));
|
|
15435
16108
|
}
|
|
15436
16109
|
|
|
15437
|
-
var css_248z$9 = ".bcds-react-aria-Radio {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Selector */\n.bcds-react-aria-Radio:before {\n align-self: first baseline;\n margin-top: var(--layout-margin-xsmall);\n content: \"\";\n display: block;\n width: var(--icons-size-xsmall);\n height: var(--icons-size-xsmall);\n box-sizing: border-box;\n background-color: var(--surface-color-secondary-default);\n border-radius: var(--icons-size-small);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n .bcds-react-aria-Radio:before {\n /* No animation on radio button circle if user has reduced motion set */\n transition: none;\n }\n}\n\n/* Hover */\n.bcds-react-aria-Radio[data-hovered]:before {\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Radio[data-pressed]:before {\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-dark);\n}\n\n/* Selected */\n.bcds-react-aria-Radio[data-selected]:before {\n border: 5px solid var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Radio[data-focus-visible]:before {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Invalid */\n.bcds-react-aria-Radio[data-invalid]:before {\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid] {\n color: var(--typography-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid]:before {\n border: 5px solid var(--support-border-color-danger);\n}\n\n/* Disabled */\n.bcds-react-aria-Radio[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n.bcds-react-aria-radio[data-selected][data-disabled]:before {\n border: 5px solid var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Radio[data-readonly] {\n cursor: not-allowed;\n}\n";
|
|
16110
|
+
var css_248z$9 = ".bcds-react-aria-Radio {\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n forced-color-adjust: none;\r\n}\r\n\r\n/* Selector */\r\n.bcds-react-aria-Radio:before {\r\n align-self: first baseline;\r\n margin-top: var(--layout-margin-xsmall);\r\n content: \"\";\r\n display: block;\r\n width: var(--icons-size-xsmall);\r\n height: var(--icons-size-xsmall);\r\n box-sizing: border-box;\r\n background-color: var(--surface-color-secondary-default);\r\n border-radius: var(--icons-size-small);\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-medium);\r\n transition: all 200ms;\r\n}\r\n@media (prefers-reduced-motion) {\r\n .bcds-react-aria-Radio:before {\r\n /* No animation on radio button circle if user has reduced motion set */\r\n transition: none;\r\n }\r\n}\r\n\r\n/* Hover */\r\n.bcds-react-aria-Radio[data-hovered]:before {\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-dark);\r\n}\r\n\r\n/* Pressed */\r\n.bcds-react-aria-Radio[data-pressed]:before {\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-dark);\r\n}\r\n\r\n/* Selected */\r\n.bcds-react-aria-Radio[data-selected]:before {\r\n border: 5px solid var(--surface-color-primary-default);\r\n}\r\n\r\n/* Focused */\r\n.bcds-react-aria-Radio[data-focus-visible]:before {\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Invalid */\r\n.bcds-react-aria-Radio[data-invalid]:before {\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-danger);\r\n}\r\n.bcds-react-aria-Radio[data-selected][data-invalid] {\r\n color: var(--typography-color-danger);\r\n}\r\n.bcds-react-aria-Radio[data-selected][data-invalid]:before {\r\n border: 5px solid var(--support-border-color-danger);\r\n}\r\n\r\n/* Disabled */\r\n.bcds-react-aria-Radio[data-disabled] {\r\n color: var(--typography-color-disabled);\r\n cursor: not-allowed;\r\n}\r\n.bcds-react-aria-radio[data-selected][data-disabled]:before {\r\n border: 5px solid var(--surface-color-border-default);\r\n}\r\n\r\n/* Read only */\r\n.bcds-react-aria-Radio[data-readonly] {\r\n cursor: not-allowed;\r\n}\r\n";
|
|
15438
16111
|
styleInject(css_248z$9);
|
|
15439
16112
|
|
|
15440
16113
|
function Radio({ value, children, ...props }) {
|
|
15441
16114
|
return (jsx($b6c3ddc6086f204d$export$d7b12c4107be0d61, { className: "bcds-react-aria-Radio", value: value, ...props, children: children }));
|
|
15442
16115
|
}
|
|
15443
16116
|
|
|
15444
|
-
var css_248z$8 = ".bcds-react-aria-RadioGroup {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* Orientation */\n.bcds-react-aria-RadioGroup--options {\n display: inline-flex;\n}\n\n.bcds-react-aria-RadioGroup--options.vertical {\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n.bcds-react-aria-RadioGroup--options.horizontal {\n flex-direction: row;\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-wrap {\n flex-wrap: wrap;\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: wrap-reverse;\n}\n\n/* Parts */\n.bcds-react-aria-RadioGroup--label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-RadioGroup--description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n.bcds-react-aria-RadioGroup--error {\n display: inline-flex;\n flex-direction: row;\n gap: var(--layout-margin-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n";
|
|
16117
|
+
var css_248z$8 = ".bcds-react-aria-RadioGroup {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n/* Orientation */\r\n.bcds-react-aria-RadioGroup--options {\r\n display: inline-flex;\r\n}\r\n\r\n.bcds-react-aria-RadioGroup--options.vertical {\r\n flex-direction: column;\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n.bcds-react-aria-RadioGroup--options.horizontal {\r\n flex-direction: row;\r\n gap: var(--layout-margin-medium);\r\n}\r\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\r\n flex-wrap: nowrap;\r\n}\r\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-wrap {\r\n flex-wrap: wrap;\r\n}\r\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\r\n flex-wrap: wrap-reverse;\r\n}\r\n\r\n/* Parts */\r\n.bcds-react-aria-RadioGroup--label {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-primary);\r\n}\r\n\r\n.bcds-react-aria-RadioGroup--description {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n\r\n.bcds-react-aria-RadioGroup--error {\r\n display: inline-flex;\r\n flex-direction: row;\r\n gap: var(--layout-margin-xsmall);\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-danger);\r\n}\r\n";
|
|
15445
16118
|
styleInject(css_248z$8);
|
|
15446
16119
|
|
|
15447
16120
|
function RadioGroup({ orientation = "vertical", label, description, children, errorMessage, flexWrap = "nowrap", ...props }) {
|
|
15448
16121
|
return (jsx($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-RadioGroup--label", children: [label, " ", isRequired && "(required)"] })), jsx("div", { className: `bcds-react-aria-RadioGroup--options ${orientation} flex-wrap-${flexWrap}`, children: children }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-RadioGroup--description", children: description })), isInvalid && (jsxs("div", { className: "bcds-react-aria-RadioGroup--error", children: [jsx(SvgExclamationIcon, {}), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
15449
16122
|
}
|
|
15450
16123
|
|
|
15451
|
-
/*
|
|
15452
|
-
function SvgChevronUpIcon({ id = "chevron-up-icon" }) {
|
|
15453
|
-
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
15454
|
-
}
|
|
15455
|
-
|
|
15456
|
-
/* The component implements the Chevron Down icon from Font Awesome: https://fontawesome.com/icons/chevron-down */
|
|
15457
|
-
function SvgChevronDownIcon({ id = "chevron-down-icon" }) {
|
|
15458
|
-
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
15459
|
-
}
|
|
15460
|
-
|
|
15461
|
-
var css_248z$7 = ".bcds-react-aria-Select {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n > .bcds-react-aria-Select--Button\n > svg:not(:last-child) {\n color: var(--icons-color-danger);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: var(--layout-margin-small);\n align-items: center;\n padding: 0 12px;\n max-width: 100%;\n}\n.bcds-react-aria-Select--Button.invalid {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n background-color: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Select--Button[data-focused] {\n border-color: var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-Select--Button.medium {\n height: 40px;\n}\n.bcds-react-aria-Select--Button.small {\n height: 32px;\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n font: var(--typography-regular-body);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n flex-shrink: 0;\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow-y: auto;\n padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n width: var(\n --trigger-width\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n border-top: 1px solid var(--surface-color-border-default);\n margin-top: 1px;\n padding-top: 2px;\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n display: flex;\n align-items: center;\n justify-content: space-around;\n /* This `min-width` rule can cause horizontal overflow on very narrow Select\n instances, but if we leave it out, the icons will shrink instead. */\n min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-label {\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n .bcds-react-aria-Select--ListBoxItem-Text-label {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n";
|
|
16124
|
+
var css_248z$7 = ".bcds-react-aria-Select {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\r\n max-width: -moz-available;\r\n max-width: -webkit-fill-available;\r\n}\r\n\r\n/* Label above select input */\r\n.bcds-react-aria-Select--Label {\r\n color: var(--typography-color-secondary);\r\n font: var(--typography-regular-small-body);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\r\n color: var(--typography-color-disabled);\r\n}\r\n\r\n/* Text description below select input */\r\n.bcds-react-aria-Select--Description {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n\r\n/* Error message */\r\n.bcds-react-aria-Select--Error {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-danger);\r\n}\r\n\r\n/* Error icon */\r\n.bcds-react-aria-Select[data-invalid]\r\n > .bcds-react-aria-Select--Button\r\n > svg:not(:last-child) {\r\n color: var(--icons-color-danger);\r\n}\r\n\r\n/* Select input equivalent */\r\n.bcds-react-aria-Select--Button {\r\n background-color: var(--surface-color-forms-default);\r\n border: 1px solid var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n gap: var(--layout-margin-small);\r\n align-items: center;\r\n padding: 0 12px;\r\n max-width: 100%;\r\n}\r\n.bcds-react-aria-Select--Button.invalid {\r\n border-color: var(--support-border-color-danger);\r\n}\r\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\r\n border-color: var(--support-border-color-danger);\r\n}\r\n.bcds-react-aria-Select--Button[data-disabled] {\r\n background-color: var(--surface-color-forms-disabled);\r\n cursor: not-allowed;\r\n}\r\n.bcds-react-aria-Select--Button[data-hovered] {\r\n border-color: var(--surface-color-border-dark);\r\n}\r\n.bcds-react-aria-Select--Button[data-focused] {\r\n border-color: var(--surface-color-border-active);\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n.bcds-react-aria-Select--Button[data-pressed] {\r\n border-color: var(--surface-color-border-active);\r\n}\r\n.bcds-react-aria-Select--Button.medium {\r\n height: 40px;\r\n}\r\n.bcds-react-aria-Select--Button.small {\r\n height: 32px;\r\n}\r\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\r\n font: var(--typography-regular-body);\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n min-width: 0;\r\n}\r\n.bcds-react-aria-Select--Button > svg {\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Dropdown menu panel */\r\n.bcds-react-aria-Select--Popover {\r\n background-color: var(--surface-color-forms-default);\r\n border: 1px solid var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n box-shadow: var(--surface-shadow-medium);\r\n box-sizing: border-box;\r\n overflow-y: auto;\r\n padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\r\n width: var(\r\n --trigger-width\r\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\r\n}\r\n.bcds-react-aria-Select--ListBox[data-focused] {\r\n outline: none;\r\n}\r\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\r\n border-top: 1px solid var(--surface-color-border-default);\r\n margin-top: 1px;\r\n padding-top: 2px;\r\n}\r\n\r\n/* Header label within Section of multi-section Select */\r\n.bcds-react-aria-Select--Header {\r\n color: var(--typography-color-secondary);\r\n font: var(--typography-regular-small-body);\r\n padding: var(--layout-padding-hair) var(--layout-padding-small);\r\n}\r\n\r\n/* ListBox option item */\r\n.bcds-react-aria-Select--ListBoxItem {\r\n border-radius: var(--layout-border-radius-medium);\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n padding: var(--layout-padding-small);\r\n}\r\n.bcds-react-aria-Select--ListBoxItem[data-focused],\r\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\r\n background-color: var(--surface-color-secondary-button-hover);\r\n outline: none;\r\n}\r\n.bcds-react-aria-Select--ListBoxItem-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n /* This `min-width` rule can cause horizontal overflow on very narrow Select\r\n instances, but if we leave it out, the icons will shrink instead. */\r\n min-width: 20px;\r\n}\r\n.bcds-react-aria-Select--ListBoxItem-Text-container {\r\n color: var(--typography-color-primary);\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n}\r\n.bcds-react-aria-Select--ListBoxItem-Text-label {\r\n font: var(--typography-regular-body);\r\n}\r\n.bcds-react-aria-Select--ListBoxItem.destructive {\r\n color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Select--ListBoxItem.destructive\r\n .bcds-react-aria-Select--ListBoxItem-Text-label {\r\n color: var(--surface-color-primary-danger-button-default);\r\n}\r\n.bcds-react-aria-Select--ListBoxItem-Text-description {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n";
|
|
15462
16125
|
styleInject(css_248z$7);
|
|
15463
16126
|
|
|
15464
16127
|
/** Select displays a collapsible list of options and allows a user to select one of them. */
|
|
@@ -15478,7 +16141,7 @@ function Select({ items, sections, label, description, placeholder, size = "medi
|
|
|
15478
16141
|
// support different markup within the same component.
|
|
15479
16142
|
items: sections
|
|
15480
16143
|
? sections
|
|
15481
|
-
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($
|
|
16144
|
+
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($eed445e0843c11d0$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
|
|
15482
16145
|
}
|
|
15483
16146
|
|
|
15484
16147
|
function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
|
|
@@ -15494,28 +16157,28 @@ function SvgTooltipArrowUp({ id = "tooltip-arrow" }) {
|
|
|
15494
16157
|
return (jsx("svg", { id: id, width: "19", height: "9", viewBox: "0 0 19 9", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M8.4188 1.41421C9.19985 0.633163 10.4662 0.633165 11.2472 1.41421L18.833 9L0.833008 9L8.4188 1.41421Z", fill: "currentColor" }) }) }));
|
|
15495
16158
|
}
|
|
15496
16159
|
|
|
15497
|
-
var css_248z$6 = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border: var(--layout-border-width-small) solid;\n display: flex;\n align-items: center;\n font: var(--typography-regular-label);\n width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n background: none;\n border: none;\n color: var(--typography-color-primary);\n cursor: pointer;\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n background-color: var(--theme-primary-blue);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n background-color: var(--theme-primary-gold);\n border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n background-color: var(--support-surface-color-info);\n border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n background: var(--theme-gray-110);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n background-color: var(--theme-gray-20);\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n background-color: var(--support-surface-color-success);\n border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n background-color: var(--support-surface-color-danger);\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n background-color: var(--support-surface-color-warning);\n border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.medium {\n height: var(--layout-padding-xlarge);\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-Tag.small {\n height: var(--layout-padding-large);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-small);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n border-radius: var(--layout-border-radius-small);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n background-color: var(--surface-color-primary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
16160
|
+
var css_248z$6 = ".bcds-react-aria-Tag {\r\n color: var(--typography-color-primary);\r\n cursor: pointer;\r\n border: var(--layout-border-width-small) solid;\r\n display: flex;\r\n align-items: center;\r\n font: var(--typography-regular-label);\r\n width: fit-content;\r\n}\r\n.bcds-react-aria-Tag .react-aria-Button {\r\n background: none;\r\n border: none;\r\n color: var(--typography-color-primary);\r\n cursor: pointer;\r\n display: flex;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Tag colors */\r\n.bcds-react-aria-Tag.bc-blue {\r\n background-color: var(--theme-primary-blue);\r\n border-color: var(--theme-blue-90);\r\n color: var(--typography-color-primary-invert);\r\n}\r\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\r\n color: var(--typography-color-primary-invert);\r\n}\r\n.bcds-react-aria-Tag.bc-gold {\r\n background-color: var(--theme-primary-gold);\r\n border-color: var(--theme-blue-90);\r\n}\r\n.bcds-react-aria-Tag.blue {\r\n background-color: var(--support-surface-color-info);\r\n border-color: var(--support-border-color-info);\r\n}\r\n.bcds-react-aria-Tag.dark {\r\n background: var(--theme-gray-110);\r\n border-color: var(--theme-blue-90);\r\n color: var(--typography-color-primary-invert);\r\n}\r\n.bcds-react-aria-Tag.dark .react-aria-Button {\r\n color: var(--typography-color-primary-invert);\r\n}\r\n.bcds-react-aria-Tag.gray,\r\n.bcds-react-aria-Tag.grey {\r\n background-color: var(--theme-gray-20);\r\n border-color: var(--surface-color-border-dark);\r\n}\r\n.bcds-react-aria-Tag.green {\r\n background-color: var(--support-surface-color-success);\r\n border-color: var(--support-border-color-success);\r\n}\r\n.bcds-react-aria-Tag.red {\r\n background-color: var(--support-surface-color-danger);\r\n border-color: var(--support-border-color-danger);\r\n}\r\n.bcds-react-aria-Tag.yellow {\r\n background-color: var(--support-surface-color-warning);\r\n border-color: var(--support-border-color-warning);\r\n}\r\n\r\n/* Tag style */\r\n.bcds-react-aria-Tag.rectangular {\r\n border-radius: var(--layout-border-radius-small);\r\n}\r\n.bcds-react-aria-Tag.circular {\r\n border-radius: var(--layout-borderRadius-Circular, 9999px);\r\n}\r\n\r\n/* Tag size */\r\n.bcds-react-aria-Tag.medium {\r\n height: var(--layout-padding-xlarge);\r\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\r\n gap: var(--layout-margin-medium);\r\n}\r\n.bcds-react-aria-Tag.small {\r\n height: var(--layout-padding-large);\r\n padding: var(--layout-padding-hair) var(--layout-padding-small);\r\n gap: var(--layout-margin-small);\r\n}\r\n\r\n/* Selected */\r\n.bcds-react-aria-Tag[data-selected] {\r\n border-radius: var(--layout-border-radius-small);\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-border-active);\r\n}\r\n\r\n/* Focused */\r\n.bcds-react-aria-Tag[data-focused] {\r\n outline: var(--layout-border-width-medium) solid\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Disabled */\r\n.bcds-react-aria-Tag[data-disabled] {\r\n background-color: var(--surface-color-primary-button-disabled);\r\n border-color: var(--surface-color-border-default);\r\n color: var(--typography-color-disabled);\r\n cursor: not-allowed;\r\n}\r\n";
|
|
15498
16161
|
styleInject(css_248z$6);
|
|
15499
16162
|
|
|
15500
16163
|
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
|
|
15501
16164
|
return (jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs(Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "Icons / Close", children: jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
15502
16165
|
}
|
|
15503
16166
|
|
|
15504
|
-
var css_248z$5 = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
16167
|
+
var css_248z$5 = ".bcds-react-aria-TagGroup {\r\n color: var(--typography-color-primary);\r\n font: var(--typography-regular-small-body);\r\n}\r\n\r\n.bcds-react-aria-TagGroup--Label,\r\n.bcds-react-aria-TagGroup--Text-description,\r\n.bcds-react-aria-TagGroup--Text-error {\r\n display: block;\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n\r\n.bcds-react-aria-TagGroup--Text-error {\r\n display: flex;\r\n color: var(--typography-color-danger);\r\n}\r\n\r\n.bcds-react-aria-TagGroup--Text-error > svg {\r\n padding-right: var(--layout-padding-xsmall);\r\n color: var(--icons-color-danger);\r\n min-width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n";
|
|
15505
16168
|
styleInject(css_248z$5);
|
|
15506
16169
|
|
|
15507
16170
|
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
15508
16171
|
return (jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxs($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
15509
16172
|
}
|
|
15510
16173
|
|
|
15511
|
-
var css_248z$4 = ".bcds-react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: var(--layout-padding-small);\n width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n flex-direction: column;\n}\n";
|
|
16174
|
+
var css_248z$4 = ".bcds-react-aria-TagList {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--layout-padding-small);\r\n width: fit-content;\r\n}\r\n\r\n.bcds-react-aria-TagList.horizontal {\r\n flex-direction: row;\r\n}\r\n\r\n.bcds-react-aria-TagList.vertical {\r\n flex-direction: column;\r\n}\r\n";
|
|
15512
16175
|
styleInject(css_248z$4);
|
|
15513
16176
|
|
|
15514
16177
|
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
15515
16178
|
return (jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
|
|
15516
16179
|
}
|
|
15517
16180
|
|
|
15518
|
-
var css_248z$3 = ".bcds-react-aria-TextArea {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n display: grid;\n gap: var(--layout-margin-medium);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n justify-self: flex-start;\n grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n justify-self: flex-end;\n grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n > .bcds-react-aria-TextArea--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:focus-within {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled]\n > .bcds-react-aria-TextArea--Container {\n background: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea--Input[data-disabled] {\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly]\n > .bcds-react-aria-TextArea--Container {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextArea[data-readonly]\n > .bcds-react-aria-TextArea--Container\n > .bcds-react-aria-TextArea--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n display: flex;\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
16181
|
+
var css_248z$3 = ".bcds-react-aria-TextArea {\r\n display: inline-flex;\r\n flex-direction: column;\r\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\r\n align-self: stretch;\r\n max-width: -moz-available;\r\n max-width: -webkit-fill-available;\r\n}\r\n\r\n/* Styles for the text label above the input field */\r\n.bcds-react-aria-TextArea--Label {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-primary);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n\r\n/* Styles for the description and character count slot below the input field */\r\n.bcds-react-aria-TextArea--Description {\r\n display: grid;\r\n gap: var(--layout-margin-medium);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n}\r\n\r\n/* Description label */\r\n.bcds-react-aria-TextArea--Description > .text {\r\n justify-self: flex-start;\r\n grid-row: 1;\r\n}\r\n\r\n/* Character counter */\r\n.bcds-react-aria-TextArea--Description > .counter {\r\n justify-self: flex-end;\r\n grid-row: 1;\r\n}\r\n\r\n/* Styles for the input field container */\r\n.bcds-react-aria-TextArea--Container {\r\n color: var(--typography-color-primary);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n background: var(--surface-color-forms-default);\r\n box-sizing: border-box;\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n padding: var(--layout-padding-small) 12px;\r\n}\r\n\r\n/* Text input field */\r\n.bcds-react-aria-TextArea--Input {\r\n font: var(--typography-regular-body);\r\n padding: var(--layout-padding-none);\r\n color: var(--typography-color-primary);\r\n border: none;\r\n flex-grow: 1;\r\n}\r\n\r\n.bcds-rect-aria-TextArea--Input::placeholder {\r\n color: var(--typography-color-placeholder);\r\n}\r\n\r\n/* Hover and focus states */\r\n.bcds-react-aria-TextArea--Container\r\n > .bcds-react-aria-TextArea--Input[data-focused] {\r\n outline: none;\r\n}\r\n\r\n.bcds-react-aria-TextArea--Container:focus-within {\r\n border-radius: var(--layout-border-radius-large);\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-active);\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n.bcds-react-aria-TextArea--Container:hover {\r\n border-color: var(--surface-color-border-dark);\r\n}\r\n\r\n/* Disabled and invalid states */\r\n.bcds-react-aria-TextArea[data-disabled]\r\n > .bcds-react-aria-TextArea--Container {\r\n background: var(--surface-color-forms-disabled);\r\n cursor: not-allowed;\r\n}\r\n\r\n.bcds-react-aria-TextArea--Input[data-disabled] {\r\n cursor: not-allowed;\r\n}\r\n\r\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\r\n border-radius: var(--layout-border-radius-medium);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-danger);\r\n background: var(--surface-color-forms-default);\r\n}\r\n\r\n.bcds-react-aria-TextArea[data-readonly]\r\n > .bcds-react-aria-TextArea--Container {\r\n background: var(--surface-color-forms-disabled);\r\n}\r\n\r\n.bcds-react-aria-TextArea[data-readonly]\r\n > .bcds-react-aria-TextArea--Container\r\n > .bcds-react-aria-TextArea--Input {\r\n background: var(--surface-color-forms-disabled);\r\n}\r\n\r\n/* Styles for the error message slot */\r\n.bcds-react-aria-TextArea--Error {\r\n display: flex;\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-danger);\r\n}\r\n\r\n.bcds-react-aria-TextArea--Error > svg {\r\n padding-right: var(--layout-padding-xsmall);\r\n color: var(--icons-color-danger);\r\n width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n";
|
|
15519
16182
|
styleInject(css_248z$3);
|
|
15520
16183
|
|
|
15521
16184
|
function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
|
|
@@ -15529,26 +16192,26 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
|
|
|
15529
16192
|
return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsx($216918bed6669f72$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsx(SvgExclamationIcon, {}), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
15530
16193
|
}
|
|
15531
16194
|
|
|
15532
|
-
var css_248z$2 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:focus-within {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n > .bcds-react-aria-TextField--container {\n background: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--Input[data-disabled] {\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container\n > svg#exclamation-icon {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
16195
|
+
var css_248z$2 = ".bcds-react-aria-TextField {\r\n display: inline-flex;\r\n flex-direction: column;\r\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\r\n align-self: stretch;\r\n max-width: -moz-available;\r\n max-width: -webkit-fill-available;\r\n}\r\n\r\n/* Styles for the text label above the input field */\r\n.bcds-react-aria-TextField--Label {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-primary);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n\r\n.bcds-react-aria-TextField--Label .required {\r\n color: var(--typography-color-secondary);\r\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\r\n}\r\n\r\n/* Styles for the text description below the input field */\r\n.bcds-react-aria-TextField--Description {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\r\n}\r\n\r\n/* Styles for the input field container */\r\n.bcds-react-aria-TextField--container {\r\n color: var(--typography-color-primary);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n background: var(--surface-color-forms-default);\r\n box-sizing: border-box;\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-default);\r\n border-radius: var(--layout-border-radius-medium);\r\n padding: var(--layout-padding-small) 12px;\r\n}\r\n\r\n/* Sizes */\r\n.bcds-react-aria-TextField--container.small {\r\n height: var(--layout-margin-xlarge);\r\n min-height: var(--layout-margin-xlarge);\r\n}\r\n\r\n.bcds-react-aria-TextField--container.medium {\r\n height: var(--layout-margin-xxlarge);\r\n min-height: var(--layout-margin-xxlarge);\r\n}\r\n\r\n/* Text input field */\r\n.bcds-react-aria-TextField--Input {\r\n font: var(--typography-regular-body);\r\n padding: var(--layout-padding-none);\r\n color: var(--typography-color-primary);\r\n border: none;\r\n flex-grow: 1;\r\n}\r\n\r\n.bcds-react-aria-TextField--Input::placeholder {\r\n color: var(--typography-color-placeholder);\r\n}\r\n\r\n/* Hover and focus states */\r\n\r\n.bcds-react-aria-TextField--container\r\n > .bcds-react-aria-TextField--Input[data-focused] {\r\n outline: none;\r\n}\r\n\r\n.bcds-react-aria-TextField--container:focus-within {\r\n border-radius: var(--layout-border-radius-large);\r\n border: var(--layout-border-width-small) solid\r\n var(--surface-color-border-active);\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n.bcds-react-aria-TextField--container:hover {\r\n border-color: var(--surface-color-border-dark);\r\n}\r\n\r\n/* Disabled and invalid states */\r\n\r\n.bcds-react-aria-TextField[data-disabled]\r\n > .bcds-react-aria-TextField--container {\r\n background: var(--surface-color-forms-disabled);\r\n cursor: not-allowed;\r\n}\r\n\r\n.bcds-react-aria-TextField--Input[data-disabled] {\r\n color: var(--typography-color-placeholder);\r\n cursor: not-allowed;\r\n}\r\n\r\n.bcds-react-aria-TextField[data-invalid]\r\n > .bcds-react-aria-TextField--container {\r\n border-radius: var(--layout-border-radius-medium);\r\n border: var(--layout-border-width-small) solid\r\n var(--support-border-color-danger);\r\n background: var(--surface-color-forms-default);\r\n}\r\n\r\n.bcds-react-aria-TextField[data-readonly]\r\n > .bcds-react-aria-TextField--container {\r\n background: var(--surface-color-forms-disabled);\r\n}\r\n\r\n.bcds-react-aria-TextField[data-readonly]\r\n > .bcds-react-aria-TextField--container\r\n > .bcds-react-aria-TextField--Input {\r\n background: var(--surface-color-forms-disabled);\r\n}\r\n\r\n/* Styles for the error message slot */\r\n.bcds-react-aria-TextField--Error {\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-danger);\r\n}\r\n\r\n.bcds-react-aria-TextField[data-invalid]\r\n > .bcds-react-aria-TextField--container\r\n > svg#exclamation-icon {\r\n color: var(--icons-color-danger);\r\n min-width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n}\r\n";
|
|
15533
16196
|
styleInject(css_248z$2);
|
|
15534
16197
|
|
|
15535
16198
|
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
15536
16199
|
return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
15537
16200
|
}
|
|
15538
16201
|
|
|
15539
|
-
var css_248z$1 = ".bcds-react-aria-Switch {\n display: flex;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n align-items: center;\n width: var(--layout-margin-xxlarge);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-primary-disabled);\n border-radius: var(--icons-size-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch container color if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator {\n transition: none;\n }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n content: \"\";\n display: block;\n box-sizing: border-box;\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-secondary-default);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-medium);\n border-radius: var(--icons-size-small);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch circle indicator if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator::before {\n transition: none;\n }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n transform: translateX(100%);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n background-color: var(--theme-gray-10);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n cursor: not-allowed;\n}\n";
|
|
16202
|
+
var css_248z$1 = ".bcds-react-aria-Switch {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--layout-margin-small);\r\n font: var(--typography-regular-small-body);\r\n color: var(--typography-color-secondary);\r\n forced-color-adjust: none;\r\n}\r\n\r\n/* Container */\r\n.bcds-react-aria-Switch > .indicator {\r\n align-items: center;\r\n width: var(--layout-margin-xxlarge);\r\n height: var(--icons-size-medium);\r\n background-color: var(--surface-color-primary-disabled);\r\n border-radius: var(--icons-size-medium);\r\n transition: all 200ms;\r\n}\r\n@media (prefers-reduced-motion) {\r\n /* No animation on Switch container color if user has reduced motion set */\r\n .bcds-react-aria-Switch > .indicator {\r\n transition: none;\r\n }\r\n}\r\n\r\n/* Indicator */\r\n.bcds-react-aria-Switch > .indicator::before {\r\n content: \"\";\r\n display: block;\r\n box-sizing: border-box;\r\n width: var(--icons-size-medium);\r\n height: var(--icons-size-medium);\r\n background-color: var(--surface-color-secondary-default);\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-border-medium);\r\n border-radius: var(--icons-size-small);\r\n transition: all 200ms;\r\n}\r\n@media (prefers-reduced-motion) {\r\n /* No animation on Switch circle indicator if user has reduced motion set */\r\n .bcds-react-aria-Switch > .indicator::before {\r\n transition: none;\r\n }\r\n}\r\n\r\n/* Selected */\r\n.bcds-react-aria-Switch[data-selected] > .indicator {\r\n background-color: var(--surface-color-primary-default);\r\n}\r\n\r\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\r\n transform: translateX(100%);\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-primary-default);\r\n}\r\n\r\n/* Hover */\r\n.bcds-react-aria-Switch[data-hovered] {\r\n cursor: pointer;\r\n}\r\n\r\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\r\n background-color: var(--surface-color-primary-hover);\r\n}\r\n\r\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-border-dark);\r\n}\r\n\r\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-primary-hover);\r\n}\r\n\r\n/* Focused */\r\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\r\n outline: solid var(--layout-border-width-medium)\r\n var(--surface-color-border-active);\r\n outline-offset: var(--layout-margin-hair);\r\n}\r\n\r\n/* Disabled */\r\n.bcds-react-aria-Switch[data-disabled] {\r\n color: var(--typography-color-disabled);\r\n cursor: not-allowed;\r\n}\r\n\r\n.bcds-react-aria-Switch[data-disabled] > .indicator {\r\n background-color: var(--surface-color-primary-disabled);\r\n}\r\n\r\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\r\n background-color: var(--theme-gray-10);\r\n border: var(--layout-border-width-medium) solid\r\n var(--surface-color-border-default);\r\n}\r\n\r\n/* Read only */\r\n.bcds-react-aria-Switch[data-readonly] {\r\n cursor: not-allowed;\r\n}\r\n";
|
|
15540
16203
|
styleInject(css_248z$1);
|
|
15541
16204
|
|
|
15542
16205
|
function Switch({ labelPosition = "right", children, ...props }) {
|
|
15543
16206
|
return (jsxs($8e59e948500a8fe1$export$b5d5cf8927ab7262, { className: `bcds-react-aria-Switch`, ...props, children: [labelPosition === "left" && jsx(Fragment, { children: children }), jsx("div", { className: "indicator" }), labelPosition === "right" && jsx(Fragment, { children: children })] }));
|
|
15544
16207
|
}
|
|
15545
16208
|
|
|
15546
|
-
var css_248z = ".bcds-react-aria-Tooltip {\n background-color: var(--theme-gray-110);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-small);\n color: var(--typography-color-primary-invert);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-xsmall) var(--layout-padding-small);\n transform: translate3d(0, 0, 0);\n}\n\n.bcds-react-aria-Tooltip > .bcds-react-aria-OverlayArrow {\n color: var(--theme-gray-110);\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n > .bcds-react-aria-OverlayArrow {\n height: 9px;\n width: 19px;\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow {\n height: 19px;\n width: 9px;\n}\n\n/* Top placement */\n.bcds-react-aria-Tooltip[data-placement=\"top\"] {\n margin-bottom: 10px; /* Offset is equal to the depth of the OverlayArrow */\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow {\n margin-top: -7.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(180deg);\n}\n\n/* Right placement */\n.bcds-react-aria-Tooltip[data-placement=\"right\"] {\n margin-left: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow {\n margin-top: -2px;\n margin-right: 4.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(-90deg);\n}\n\n/* Bottom placement */\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"] {\n margin-top: 9px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n > .bcds-react-aria-OverlayArrow {\n margin-bottom: 6.5px;\n}\n\n/* Left placement */\n.bcds-react-aria-Tooltip[data-placement=\"left\"] {\n margin-right: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow {\n margin-top: -2px;\n margin-left: -5.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(90deg);\n}\n";
|
|
16209
|
+
var css_248z = ".bcds-react-aria-Tooltip {\r\n background-color: var(--theme-gray-110);\r\n border-radius: var(--layout-border-radius-medium);\r\n box-shadow: var(--surface-shadow-small);\r\n color: var(--typography-color-primary-invert);\r\n font: var(--typography-regular-small-body);\r\n padding: var(--layout-padding-xsmall) var(--layout-padding-small);\r\n transform: translate3d(0, 0, 0);\r\n}\r\n\r\n.bcds-react-aria-Tooltip > .bcds-react-aria-OverlayArrow {\r\n color: var(--theme-gray-110);\r\n}\r\n\r\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow,\r\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\r\n > .bcds-react-aria-OverlayArrow {\r\n height: 9px;\r\n width: 19px;\r\n}\r\n\r\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\r\n > .bcds-react-aria-OverlayArrow,\r\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\r\n > .bcds-react-aria-OverlayArrow {\r\n height: 19px;\r\n width: 9px;\r\n}\r\n\r\n/* Top placement */\r\n.bcds-react-aria-Tooltip[data-placement=\"top\"] {\r\n margin-bottom: 10px; /* Offset is equal to the depth of the OverlayArrow */\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow {\r\n margin-top: -7.5px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"top\"]\r\n > .bcds-react-aria-OverlayArrow\r\n > svg {\r\n transform: rotate(180deg);\r\n}\r\n\r\n/* Right placement */\r\n.bcds-react-aria-Tooltip[data-placement=\"right\"] {\r\n margin-left: 10px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\r\n > .bcds-react-aria-OverlayArrow {\r\n margin-top: -2px;\r\n margin-right: 4.5px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\r\n > .bcds-react-aria-OverlayArrow\r\n > svg {\r\n transform: rotate(-90deg);\r\n}\r\n\r\n/* Bottom placement */\r\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"] {\r\n margin-top: 9px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\r\n > .bcds-react-aria-OverlayArrow {\r\n margin-bottom: 6.5px;\r\n}\r\n\r\n/* Left placement */\r\n.bcds-react-aria-Tooltip[data-placement=\"left\"] {\r\n margin-right: 10px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\r\n > .bcds-react-aria-OverlayArrow {\r\n margin-top: -2px;\r\n margin-left: -5.5px;\r\n}\r\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\r\n > .bcds-react-aria-OverlayArrow\r\n > svg {\r\n transform: rotate(90deg);\r\n}\r\n";
|
|
15547
16210
|
styleInject(css_248z);
|
|
15548
16211
|
|
|
15549
16212
|
function Tooltip(props) {
|
|
15550
16213
|
return (jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsx(SvgTooltipArrowUp, {}) }), jsx(Fragment, { children: props.children })] }));
|
|
15551
16214
|
}
|
|
15552
16215
|
|
|
15553
|
-
export { AlertBanner, AlertDialog, Button, ButtonGroup, Callout, Checkbox, CheckboxGroup, Dialog, $de32f1b87079253c$export$2e1e1122cf0cba88 as DialogTrigger, Footer, FooterLinks, Form, Header, InlineAlert, Modal, Radio, RadioGroup, Select, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgTooltipArrowUp, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
|
|
16216
|
+
export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Callout, Checkbox, CheckboxGroup, Dialog, $de32f1b87079253c$export$2e1e1122cf0cba88 as DialogTrigger, Footer, FooterLinks, Form, Header, InlineAlert, Modal, Radio, RadioGroup, Select, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgTooltipArrowUp, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
|
|
15554
16217
|
//# sourceMappingURL=index.js.map
|