@cloudscape-design/components 3.0.674 → 3.0.676
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/i18n/messages/all.all.js +1 -1
- package/i18n/messages/all.all.json +1 -1
- package/i18n/messages/all.de.js +1 -1
- package/i18n/messages/all.de.json +1 -1
- package/i18n/messages/all.en-GB.js +1 -1
- package/i18n/messages/all.en-GB.json +1 -1
- package/i18n/messages/all.en.js +1 -1
- package/i18n/messages/all.en.json +1 -1
- package/i18n/messages/all.es.js +1 -1
- package/i18n/messages/all.es.json +1 -1
- package/i18n/messages/all.fr.js +1 -1
- package/i18n/messages/all.fr.json +1 -1
- package/i18n/messages/all.id.js +1 -1
- package/i18n/messages/all.id.json +1 -1
- package/i18n/messages/all.it.js +1 -1
- package/i18n/messages/all.it.json +1 -1
- package/i18n/messages/all.ja.js +1 -1
- package/i18n/messages/all.ja.json +1 -1
- package/i18n/messages/all.ko.js +1 -1
- package/i18n/messages/all.ko.json +1 -1
- package/i18n/messages/all.pt-BR.js +1 -1
- package/i18n/messages/all.pt-BR.json +1 -1
- package/i18n/messages/all.tr.js +1 -1
- package/i18n/messages/all.tr.json +1 -1
- package/i18n/messages/all.zh-CN.js +1 -1
- package/i18n/messages/all.zh-CN.json +1 -1
- package/i18n/messages/all.zh-TW.js +1 -1
- package/i18n/messages/all.zh-TW.json +1 -1
- package/i18n/messages-types.d.ts +1 -0
- package/i18n/messages-types.d.ts.map +1 -1
- package/i18n/messages-types.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/scrollable-containers.js +3 -2
- package/internal/utils/scrollable-containers.js.map +1 -1
- package/package.json +1 -1
- package/popover/use-popover-position.js +3 -2
- package/popover/use-popover-position.js.map +1 -1
- package/tabs/interfaces.d.ts +36 -0
- package/tabs/interfaces.d.ts.map +1 -1
- package/tabs/interfaces.js.map +1 -1
- package/tabs/styles.css.js +25 -22
- package/tabs/styles.scoped.css +107 -77
- package/tabs/styles.selectors.js +25 -22
- package/tabs/tab-header-bar.d.ts.map +1 -1
- package/tabs/tab-header-bar.js +106 -17
- package/tabs/tab-header-bar.js.map +1 -1
- package/test-utils/dom/tabs/index.d.ts +38 -1
- package/test-utils/dom/tabs/index.js +53 -2
- package/test-utils/dom/tabs/index.js.map +1 -1
- package/test-utils/selectors/tabs/index.d.ts +38 -1
- package/test-utils/selectors/tabs/index.js +53 -2
- package/test-utils/selectors/tabs/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages-types.js","sourceRoot":"","sources":["../../../src/i18n/messages-types.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/* eslint-disable prettier/prettier */\n\n/** Auto-generated argument types based on \"en\" i18n strings. Do not edit manually. */\nexport interface I18nFormatArgTypes {\n \"[charts]\": {\n \"loadingText\": never;\n \"errorText\": never;\n \"recoveryText\": never;\n \"i18nStrings.filterLabel\": never;\n \"i18nStrings.filterPlaceholder\": never;\n \"i18nStrings.legendAriaLabel\": never;\n \"i18nStrings.chartAriaRoleDescription\": never;\n \"i18nStrings.xAxisAriaRoleDescription\": never;\n \"i18nStrings.yAxisAriaRoleDescription\": never;\n }\n \"alert\": {\n \"dismissAriaLabel\": never;\n }\n \"annotation-context\": {\n \"i18nStrings.nextButtonText\": never;\n \"i18nStrings.previousButtonText\": never;\n \"i18nStrings.finishButtonText\": never;\n \"i18nStrings.labelDismissAnnotation\": never;\n \"i18nStrings.stepCounterText\": {\n \"stepNumber\": string | number;\n \"totalStepCount\": string | number;\n }\n \"i18nStrings.taskTitle\": {\n \"taskNumber\": string | number;\n \"taskTitle\": string | number;\n }\n \"i18nStrings.labelHotspot\": {\n \"openState\": string;\n \"stepNumber\": string | number;\n \"totalStepCount\": string | number;\n }\n }\n \"app-layout\": {\n \"ariaLabels.drawers\": never;\n \"ariaLabels.drawersOverflow\": never;\n \"ariaLabels.drawersOverflowWithBadge\": never;\n \"ariaLabels.navigation\": never;\n \"ariaLabels.navigationClose\": never;\n \"ariaLabels.navigationToggle\": never;\n \"ariaLabels.notifications\": never;\n \"ariaLabels.tools\": never;\n \"ariaLabels.toolsClose\": never;\n \"ariaLabels.toolsToggle\": never;\n }\n \"area-chart\": {\n \"i18nStrings.detailTotalLabel\": never;\n }\n \"attribute-editor\": {\n \"removeButtonText\": never;\n }\n \"autosuggest\": {\n \"errorIconAriaLabel\": never;\n \"selectedAriaLabel\": never;\n \"enteredTextLabel\": {\n \"value\": string | number;\n }\n \"recoveryText\": never;\n }\n \"breadcrumb-group\": {\n \"expandAriaLabel\": never;\n }\n \"calendar\": {\n \"nextMonthAriaLabel\": never;\n \"previousMonthAriaLabel\": never;\n \"todayAriaLabel\": never;\n \"i18nStrings.nextYearAriaLabel\": never;\n \"i18nStrings.previousYearAriaLabel\": never;\n \"i18nStrings.currentMonthAriaLabel\": never;\n }\n \"cards\": {\n \"ariaLabels.selectionGroupLabel\": never;\n }\n \"code-editor\": {\n \"i18nStrings.loadingState\": never;\n \"i18nStrings.errorState\": never;\n \"i18nStrings.errorStateRecovery\": never;\n \"i18nStrings.editorGroupAriaLabel\": never;\n \"i18nStrings.statusBarGroupAriaLabel\": never;\n \"i18nStrings.cursorPosition\": {\n \"row\": string | number;\n \"column\": string | number;\n }\n \"i18nStrings.errorsTab\": never;\n \"i18nStrings.warningsTab\": never;\n \"i18nStrings.preferencesButtonAriaLabel\": never;\n \"i18nStrings.paneCloseButtonAriaLabel\": never;\n \"i18nStrings.preferencesModalHeader\": never;\n \"i18nStrings.preferencesModalCancel\": never;\n \"i18nStrings.preferencesModalConfirm\": never;\n \"i18nStrings.preferencesModalWrapLines\": never;\n \"i18nStrings.preferencesModalTheme\": never;\n \"i18nStrings.preferencesModalLightThemes\": never;\n \"i18nStrings.preferencesModalDarkThemes\": never;\n }\n \"collection-preferences\": {\n \"title\": never;\n \"confirmLabel\": never;\n \"cancelLabel\": never;\n \"pageSizePreference.title\": never;\n \"wrapLinesPreference.label\": never;\n \"wrapLinesPreference.description\": never;\n \"stripedRowsPreference.label\": never;\n \"stripedRowsPreference.description\": never;\n \"contentDensityPreference.label\": never;\n \"contentDensityPreference.description\": never;\n \"contentDisplayPreference.title\": never;\n \"contentDisplayPreference.description\": never;\n \"contentDisplayPreference.dragHandleAriaLabel\": never;\n \"contentDisplayPreference.dragHandleAriaDescription\": never;\n \"contentDisplayPreference.liveAnnouncementDndStarted\": {\n \"position\": string | number;\n \"total\": string | number;\n }\n \"contentDisplayPreference.liveAnnouncementDndDiscarded\": never;\n \"contentDisplayPreference.liveAnnouncementDndItemReordered\": {\n \"isInitialPosition\": string;\n \"currentPosition\": string | number;\n \"total\": string | number;\n }\n \"contentDisplayPreference.liveAnnouncementDndItemCommitted\": {\n \"isInitialPosition\": string;\n \"initialPosition\": string | number;\n \"total\": string | number;\n \"finalPosition\": string | number;\n }\n }\n \"copy-to-clipboard\": {\n \"i18nStrings.copyButtonText\": never;\n }\n \"date-range-picker\": {\n \"i18nStrings.relativeModeTitle\": never;\n \"i18nStrings.absoluteModeTitle\": never;\n \"i18nStrings.relativeRangeSelectionHeading\": never;\n \"i18nStrings.cancelButtonLabel\": never;\n \"i18nStrings.clearButtonLabel\": never;\n \"i18nStrings.applyButtonLabel\": never;\n \"i18nStrings.customRelativeRangeOptionLabel\": never;\n \"i18nStrings.customRelativeRangeOptionDescription\": never;\n \"i18nStrings.customRelativeRangeUnitLabel\": never;\n \"i18nStrings.customRelativeRangeDurationLabel\": never;\n \"i18nStrings.customRelativeRangeDurationPlaceholder\": never;\n \"i18nStrings.startDateLabel\": never;\n \"i18nStrings.startTimeLabel\": never;\n \"i18nStrings.endDateLabel\": never;\n \"i18nStrings.endTimeLabel\": never;\n \"i18nStrings.dateTimeConstraintText\": never;\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.renderSelectedAbsoluteRangeAriaLive\": {\n \"startDate\": string | number;\n \"endDate\": string | number;\n }\n \"i18nStrings.formatRelativeRange\": {\n \"unit\": string;\n \"amount\": number;\n }\n \"i18nStrings.formatUnit\": {\n \"unit\": string;\n \"amount\": number;\n }\n }\n \"drawer\": {\n \"i18nStrings.loadingText\": never;\n }\n \"flashbar\": {\n \"i18nStrings.ariaLabel\": never;\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.inProgressIconAriaLabel\": never;\n \"i18nStrings.infoIconAriaLabel\": never;\n \"i18nStrings.notificationBarAriaLabel\": never;\n \"i18nStrings.notificationBarText\": never;\n \"i18nStrings.successIconAriaLabel\": never;\n \"i18nStrings.warningIconAriaLabel\": never;\n }\n \"form-field\": {\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.warningIconAriaLabel\": never;\n }\n \"form\": {\n \"errorIconAriaLabel\": never;\n }\n \"help-panel\": {\n \"loadingText\": never;\n }\n \"input\": {\n \"clearAriaLabel\": never;\n }\n \"link\": {\n \"externalIconAriaLabel\": never;\n }\n \"modal\": {\n \"closeAriaLabel\": never;\n }\n \"multiselect\": {\n \"deselectAriaLabel\": {\n \"option__label\": string | number;\n }\n }\n \"pagination\": {\n \"ariaLabels.nextPageLabel\": never;\n \"ariaLabels.pageLabel\": {\n \"pageNumber\": string | number;\n }\n \"ariaLabels.previousPageLabel\": never;\n }\n \"pie-chart\": {\n \"i18nStrings.detailsValue\": never;\n \"i18nStrings.detailsPercentage\": never;\n \"i18nStrings.chartAriaRoleDescription\": never;\n \"i18nStrings.segmentAriaRoleDescription\": never;\n }\n \"popover\": {\n \"dismissAriaLabel\": never;\n }\n \"property-filter\": {\n \"i18nStrings.allPropertiesLabel\": never;\n \"i18nStrings.applyActionText\": never;\n \"i18nStrings.cancelActionText\": never;\n \"i18nStrings.clearFiltersText\": never;\n \"i18nStrings.editTokenHeader\": never;\n \"i18nStrings.groupPropertiesText\": never;\n \"i18nStrings.groupValuesText\": never;\n \"i18nStrings.operationAndText\": never;\n \"i18nStrings.operationOrText\": never;\n \"i18nStrings.operatorContainsText\": never;\n \"i18nStrings.operatorDoesNotContainText\": never;\n \"i18nStrings.operatorDoesNotEqualText\": never;\n \"i18nStrings.operatorEqualsText\": never;\n \"i18nStrings.operatorGreaterOrEqualText\": never;\n \"i18nStrings.operatorGreaterText\": never;\n \"i18nStrings.operatorLessOrEqualText\": never;\n \"i18nStrings.operatorLessText\": never;\n \"i18nStrings.operatorStartsWithText\": never;\n \"i18nStrings.operatorDoesNotStartWithText\": never;\n \"i18nStrings.operatorText\": never;\n \"i18nStrings.operatorsText\": never;\n \"i18nStrings.propertyText\": never;\n \"i18nStrings.tokenLimitShowFewer\": never;\n \"i18nStrings.tokenLimitShowMore\": never;\n \"i18nStrings.valueText\": never;\n \"i18nStrings.removeTokenButtonAriaLabel\": {\n \"token__operator\": string;\n \"token__propertyKey\": string | number;\n \"token__value\": string | number;\n }\n }\n \"s3-resource-selector\": {\n \"i18nStrings.inContextSelectPlaceholder\": never;\n \"i18nStrings.inContextBrowseButton\": never;\n \"i18nStrings.inContextViewButton\": never;\n \"i18nStrings.inContextViewButtonAriaLabel\": never;\n \"i18nStrings.inContextLoadingText\": never;\n \"i18nStrings.inContextUriLabel\": never;\n \"i18nStrings.inContextVersionSelectLabel\": never;\n \"i18nStrings.modalTitle\": never;\n \"i18nStrings.modalCancelButton\": never;\n \"i18nStrings.modalSubmitButton\": never;\n \"i18nStrings.modalBreadcrumbRootItem\": never;\n \"i18nStrings.selectionBuckets\": never;\n \"i18nStrings.selectionObjects\": never;\n \"i18nStrings.selectionVersions\": never;\n \"i18nStrings.selectionBucketsSearchPlaceholder\": never;\n \"i18nStrings.selectionObjectsSearchPlaceholder\": never;\n \"i18nStrings.selectionVersionsSearchPlaceholder\": never;\n \"i18nStrings.selectionBucketsLoading\": never;\n \"i18nStrings.selectionBucketsNoItems\": never;\n \"i18nStrings.selectionObjectsLoading\": never;\n \"i18nStrings.selectionObjectsNoItems\": never;\n \"i18nStrings.selectionVersionsLoading\": never;\n \"i18nStrings.selectionVersionsNoItems\": never;\n \"i18nStrings.filteringNoMatches\": never;\n \"i18nStrings.filteringCantFindMatch\": never;\n \"i18nStrings.clearFilterButtonText\": never;\n \"i18nStrings.columnBucketID\": never;\n \"i18nStrings.columnBucketName\": never;\n \"i18nStrings.columnBucketCreationDate\": never;\n \"i18nStrings.columnBucketRegion\": never;\n \"i18nStrings.columnObjectKey\": never;\n \"i18nStrings.columnObjectLastModified\": never;\n \"i18nStrings.columnObjectSize\": never;\n \"i18nStrings.columnVersionID\": never;\n \"i18nStrings.columnVersionLastModified\": never;\n \"i18nStrings.columnVersionSize\": never;\n \"i18nStrings.validationPathMustBegin\": never;\n \"i18nStrings.validationBucketLowerCase\": never;\n \"i18nStrings.validationBucketMustNotContain\": never;\n \"i18nStrings.validationBucketLength\": never;\n \"i18nStrings.validationBucketMustComplyDns\": never;\n \"i18nStrings.labelSortedDescending\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelSortedAscending\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelNotSorted\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelsBucketsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsBucketsSelection.itemSelectionLabel\": {\n \"item__Name\": string | number;\n }\n \"i18nStrings.labelsObjectsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsObjectsSelection.itemSelectionLabel\": {\n \"item__Key\": string | number;\n }\n \"i18nStrings.labelsVersionsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsVersionsSelection.itemSelectionLabel\": {\n \"item__VersionId\": string | number;\n }\n \"i18nStrings.labelFiltering\": {\n \"itemsType\": string | number;\n }\n \"i18nStrings.labelRefresh\": never;\n \"i18nStrings.labelBreadcrumbs\": never;\n \"i18nStrings.filteringCounterText\": {\n \"count\": number;\n }\n }\n \"select\": {\n \"errorIconAriaLabel\": never;\n \"selectedAriaLabel\": never;\n \"recoveryText\": never;\n }\n \"slider\": {\n \"i18nStrings.valueTextRange\": {\n \"value\": string | number;\n \"previousValue\": string | number;\n \"nextValue\": string | number;\n }\n }\n \"split-panel\": {\n \"i18nStrings.closeButtonAriaLabel\": never;\n \"i18nStrings.openButtonAriaLabel\": never;\n \"i18nStrings.preferencesTitle\": never;\n \"i18nStrings.preferencesPositionLabel\": never;\n \"i18nStrings.preferencesPositionDescription\": never;\n \"i18nStrings.preferencesPositionSide\": never;\n \"i18nStrings.preferencesPositionBottom\": never;\n \"i18nStrings.preferencesConfirm\": never;\n \"i18nStrings.preferencesCancel\": never;\n \"i18nStrings.resizeHandleAriaLabel\": never;\n }\n \"table\": {\n \"ariaLabels.resizerRoleDescription\": never;\n \"ariaLabels.submittingEditText\": never;\n \"ariaLabels.successfulEditLabel\": never;\n \"ariaLabels.expandButtonLabel\": never;\n \"ariaLabels.collapseButtonLabel\": never;\n \"columnDefinitions.editConfig.errorIconAriaLabel\": never;\n \"columnDefinitions.editConfig.editIconAriaLabel\": never;\n }\n \"tabs\": {\n \"i18nStrings.scrollLeftAriaLabel\": never;\n \"i18nStrings.scrollRightAriaLabel\": never;\n }\n \"tag-editor\": {\n \"i18nStrings.keyPlaceholder\": never;\n \"i18nStrings.valuePlaceholder\": never;\n \"i18nStrings.addButton\": never;\n \"i18nStrings.removeButton\": never;\n \"i18nStrings.removeButtonAriaLabel\": {\n \"tag__key\": string | number;\n }\n \"i18nStrings.undoButton\": never;\n \"i18nStrings.undoPrompt\": never;\n \"i18nStrings.loading\": never;\n \"i18nStrings.keyHeader\": never;\n \"i18nStrings.valueHeader\": never;\n \"i18nStrings.optional\": never;\n \"i18nStrings.keySuggestion\": never;\n \"i18nStrings.valueSuggestion\": never;\n \"i18nStrings.emptyTags\": never;\n \"i18nStrings.tooManyKeysSuggestion\": never;\n \"i18nStrings.tooManyValuesSuggestion\": never;\n \"i18nStrings.keysSuggestionLoading\": never;\n \"i18nStrings.keysSuggestionError\": never;\n \"i18nStrings.valuesSuggestionLoading\": never;\n \"i18nStrings.valuesSuggestionError\": never;\n \"i18nStrings.emptyKeyError\": never;\n \"i18nStrings.maxKeyCharLengthError\": never;\n \"i18nStrings.maxValueCharLengthError\": never;\n \"i18nStrings.duplicateKeyError\": never;\n \"i18nStrings.invalidKeyError\": never;\n \"i18nStrings.invalidValueError\": never;\n \"i18nStrings.awsPrefixError\": never;\n \"i18nStrings.tagLimitReached\": {\n \"tagLimit\": number;\n }\n \"i18nStrings.tagLimitExceeded\": {\n \"tagLimit\": number;\n }\n \"i18nStrings.tagLimit\": {\n \"tagLimitAvailable\": string;\n \"availableTags\": number;\n \"tagLimit\": string | number;\n }\n }\n \"token-group\": {\n \"i18nStrings.limitShowFewer\": never;\n \"i18nStrings.limitShowMore\": never;\n }\n \"top-navigation\": {\n \"i18nStrings.searchIconAriaLabel\": never;\n \"i18nStrings.searchDismissIconAriaLabel\": never;\n \"i18nStrings.overflowMenuTriggerText\": never;\n \"i18nStrings.overflowMenuDismissIconAriaLabel\": never;\n \"i18nStrings.overflowMenuBackIconAriaLabel\": never;\n \"i18nStrings.overflowMenuTitleText\": never;\n }\n \"tutorial-panel\": {\n \"i18nStrings.loadingText\": never;\n \"i18nStrings.tutorialListTitle\": never;\n \"i18nStrings.tutorialListDownloadLinkText\": never;\n \"i18nStrings.labelTutorialListDownloadLink\": never;\n \"i18nStrings.tutorialCompletedText\": never;\n \"i18nStrings.learnMoreLinkText\": never;\n \"i18nStrings.startTutorialButtonText\": never;\n \"i18nStrings.restartTutorialButtonText\": never;\n \"i18nStrings.completionScreenTitle\": never;\n \"i18nStrings.feedbackLinkText\": never;\n \"i18nStrings.dismissTutorialButtonText\": never;\n \"i18nStrings.taskTitle\": {\n \"taskNumber\": string | number;\n \"taskTitle\": string | number;\n }\n \"i18nStrings.stepTitle\": {\n \"stepNumber\": string | number;\n \"stepTitle\": string | number;\n }\n \"i18nStrings.labelExitTutorial\": never;\n \"i18nStrings.labelTotalSteps\": {\n \"totalStepCount\": string | number;\n }\n \"i18nStrings.labelsTaskStatus.pending\": never;\n \"i18nStrings.labelsTaskStatus.in-progress\": never;\n \"i18nStrings.labelsTaskStatus.success\": never;\n }\n \"wizard\": {\n \"i18nStrings.stepNumberLabel\": {\n \"stepNumber\": string | number;\n }\n \"i18nStrings.collapsedStepsLabel\": {\n \"stepNumber\": string | number;\n \"stepsCount\": string | number;\n }\n \"i18nStrings.skipToButtonLabel\": {\n \"task__title\": string | number;\n }\n \"i18nStrings.navigationAriaLabel\": never;\n \"i18nStrings.cancelButton\": never;\n \"i18nStrings.previousButton\": never;\n \"i18nStrings.nextButton\": never;\n \"i18nStrings.optional\": never;\n \"i18nStrings.nextButtonLoadingAnnouncement\": never;\n \"i18nStrings.submitButtonLoadingAnnouncement\": never;\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"messages-types.js","sourceRoot":"","sources":["../../../src/i18n/messages-types.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/* eslint-disable prettier/prettier */\n\n/** Auto-generated argument types based on \"en\" i18n strings. Do not edit manually. */\nexport interface I18nFormatArgTypes {\n \"[charts]\": {\n \"loadingText\": never;\n \"errorText\": never;\n \"recoveryText\": never;\n \"i18nStrings.filterLabel\": never;\n \"i18nStrings.filterPlaceholder\": never;\n \"i18nStrings.legendAriaLabel\": never;\n \"i18nStrings.chartAriaRoleDescription\": never;\n \"i18nStrings.xAxisAriaRoleDescription\": never;\n \"i18nStrings.yAxisAriaRoleDescription\": never;\n }\n \"alert\": {\n \"dismissAriaLabel\": never;\n }\n \"annotation-context\": {\n \"i18nStrings.nextButtonText\": never;\n \"i18nStrings.previousButtonText\": never;\n \"i18nStrings.finishButtonText\": never;\n \"i18nStrings.labelDismissAnnotation\": never;\n \"i18nStrings.stepCounterText\": {\n \"stepNumber\": string | number;\n \"totalStepCount\": string | number;\n }\n \"i18nStrings.taskTitle\": {\n \"taskNumber\": string | number;\n \"taskTitle\": string | number;\n }\n \"i18nStrings.labelHotspot\": {\n \"openState\": string;\n \"stepNumber\": string | number;\n \"totalStepCount\": string | number;\n }\n }\n \"app-layout\": {\n \"ariaLabels.drawers\": never;\n \"ariaLabels.drawersOverflow\": never;\n \"ariaLabels.drawersOverflowWithBadge\": never;\n \"ariaLabels.navigation\": never;\n \"ariaLabels.navigationClose\": never;\n \"ariaLabels.navigationToggle\": never;\n \"ariaLabels.notifications\": never;\n \"ariaLabels.tools\": never;\n \"ariaLabels.toolsClose\": never;\n \"ariaLabels.toolsToggle\": never;\n }\n \"area-chart\": {\n \"i18nStrings.detailTotalLabel\": never;\n }\n \"attribute-editor\": {\n \"removeButtonText\": never;\n }\n \"autosuggest\": {\n \"errorIconAriaLabel\": never;\n \"selectedAriaLabel\": never;\n \"enteredTextLabel\": {\n \"value\": string | number;\n }\n \"recoveryText\": never;\n }\n \"breadcrumb-group\": {\n \"expandAriaLabel\": never;\n }\n \"calendar\": {\n \"nextMonthAriaLabel\": never;\n \"previousMonthAriaLabel\": never;\n \"todayAriaLabel\": never;\n \"i18nStrings.nextYearAriaLabel\": never;\n \"i18nStrings.previousYearAriaLabel\": never;\n \"i18nStrings.currentMonthAriaLabel\": never;\n }\n \"cards\": {\n \"ariaLabels.selectionGroupLabel\": never;\n }\n \"code-editor\": {\n \"i18nStrings.loadingState\": never;\n \"i18nStrings.errorState\": never;\n \"i18nStrings.errorStateRecovery\": never;\n \"i18nStrings.editorGroupAriaLabel\": never;\n \"i18nStrings.statusBarGroupAriaLabel\": never;\n \"i18nStrings.cursorPosition\": {\n \"row\": string | number;\n \"column\": string | number;\n }\n \"i18nStrings.errorsTab\": never;\n \"i18nStrings.warningsTab\": never;\n \"i18nStrings.preferencesButtonAriaLabel\": never;\n \"i18nStrings.paneCloseButtonAriaLabel\": never;\n \"i18nStrings.preferencesModalHeader\": never;\n \"i18nStrings.preferencesModalCancel\": never;\n \"i18nStrings.preferencesModalConfirm\": never;\n \"i18nStrings.preferencesModalWrapLines\": never;\n \"i18nStrings.preferencesModalTheme\": never;\n \"i18nStrings.preferencesModalLightThemes\": never;\n \"i18nStrings.preferencesModalDarkThemes\": never;\n }\n \"collection-preferences\": {\n \"title\": never;\n \"confirmLabel\": never;\n \"cancelLabel\": never;\n \"pageSizePreference.title\": never;\n \"wrapLinesPreference.label\": never;\n \"wrapLinesPreference.description\": never;\n \"stripedRowsPreference.label\": never;\n \"stripedRowsPreference.description\": never;\n \"contentDensityPreference.label\": never;\n \"contentDensityPreference.description\": never;\n \"contentDisplayPreference.title\": never;\n \"contentDisplayPreference.description\": never;\n \"contentDisplayPreference.dragHandleAriaLabel\": never;\n \"contentDisplayPreference.dragHandleAriaDescription\": never;\n \"contentDisplayPreference.liveAnnouncementDndStarted\": {\n \"position\": string | number;\n \"total\": string | number;\n }\n \"contentDisplayPreference.liveAnnouncementDndDiscarded\": never;\n \"contentDisplayPreference.liveAnnouncementDndItemReordered\": {\n \"isInitialPosition\": string;\n \"currentPosition\": string | number;\n \"total\": string | number;\n }\n \"contentDisplayPreference.liveAnnouncementDndItemCommitted\": {\n \"isInitialPosition\": string;\n \"initialPosition\": string | number;\n \"total\": string | number;\n \"finalPosition\": string | number;\n }\n }\n \"copy-to-clipboard\": {\n \"i18nStrings.copyButtonText\": never;\n }\n \"date-range-picker\": {\n \"i18nStrings.relativeModeTitle\": never;\n \"i18nStrings.absoluteModeTitle\": never;\n \"i18nStrings.relativeRangeSelectionHeading\": never;\n \"i18nStrings.cancelButtonLabel\": never;\n \"i18nStrings.clearButtonLabel\": never;\n \"i18nStrings.applyButtonLabel\": never;\n \"i18nStrings.customRelativeRangeOptionLabel\": never;\n \"i18nStrings.customRelativeRangeOptionDescription\": never;\n \"i18nStrings.customRelativeRangeUnitLabel\": never;\n \"i18nStrings.customRelativeRangeDurationLabel\": never;\n \"i18nStrings.customRelativeRangeDurationPlaceholder\": never;\n \"i18nStrings.startDateLabel\": never;\n \"i18nStrings.startTimeLabel\": never;\n \"i18nStrings.endDateLabel\": never;\n \"i18nStrings.endTimeLabel\": never;\n \"i18nStrings.dateTimeConstraintText\": never;\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.renderSelectedAbsoluteRangeAriaLive\": {\n \"startDate\": string | number;\n \"endDate\": string | number;\n }\n \"i18nStrings.formatRelativeRange\": {\n \"unit\": string;\n \"amount\": number;\n }\n \"i18nStrings.formatUnit\": {\n \"unit\": string;\n \"amount\": number;\n }\n }\n \"drawer\": {\n \"i18nStrings.loadingText\": never;\n }\n \"flashbar\": {\n \"i18nStrings.ariaLabel\": never;\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.inProgressIconAriaLabel\": never;\n \"i18nStrings.infoIconAriaLabel\": never;\n \"i18nStrings.notificationBarAriaLabel\": never;\n \"i18nStrings.notificationBarText\": never;\n \"i18nStrings.successIconAriaLabel\": never;\n \"i18nStrings.warningIconAriaLabel\": never;\n }\n \"form-field\": {\n \"i18nStrings.errorIconAriaLabel\": never;\n \"i18nStrings.warningIconAriaLabel\": never;\n }\n \"form\": {\n \"errorIconAriaLabel\": never;\n }\n \"help-panel\": {\n \"loadingText\": never;\n }\n \"input\": {\n \"clearAriaLabel\": never;\n }\n \"link\": {\n \"externalIconAriaLabel\": never;\n }\n \"modal\": {\n \"closeAriaLabel\": never;\n }\n \"multiselect\": {\n \"deselectAriaLabel\": {\n \"option__label\": string | number;\n }\n }\n \"pagination\": {\n \"ariaLabels.nextPageLabel\": never;\n \"ariaLabels.pageLabel\": {\n \"pageNumber\": string | number;\n }\n \"ariaLabels.previousPageLabel\": never;\n }\n \"pie-chart\": {\n \"i18nStrings.detailsValue\": never;\n \"i18nStrings.detailsPercentage\": never;\n \"i18nStrings.chartAriaRoleDescription\": never;\n \"i18nStrings.segmentAriaRoleDescription\": never;\n }\n \"popover\": {\n \"dismissAriaLabel\": never;\n }\n \"property-filter\": {\n \"i18nStrings.allPropertiesLabel\": never;\n \"i18nStrings.applyActionText\": never;\n \"i18nStrings.cancelActionText\": never;\n \"i18nStrings.clearFiltersText\": never;\n \"i18nStrings.editTokenHeader\": never;\n \"i18nStrings.groupPropertiesText\": never;\n \"i18nStrings.groupValuesText\": never;\n \"i18nStrings.operationAndText\": never;\n \"i18nStrings.operationOrText\": never;\n \"i18nStrings.operatorContainsText\": never;\n \"i18nStrings.operatorDoesNotContainText\": never;\n \"i18nStrings.operatorDoesNotEqualText\": never;\n \"i18nStrings.operatorEqualsText\": never;\n \"i18nStrings.operatorGreaterOrEqualText\": never;\n \"i18nStrings.operatorGreaterText\": never;\n \"i18nStrings.operatorLessOrEqualText\": never;\n \"i18nStrings.operatorLessText\": never;\n \"i18nStrings.operatorStartsWithText\": never;\n \"i18nStrings.operatorDoesNotStartWithText\": never;\n \"i18nStrings.operatorText\": never;\n \"i18nStrings.operatorsText\": never;\n \"i18nStrings.propertyText\": never;\n \"i18nStrings.tokenLimitShowFewer\": never;\n \"i18nStrings.tokenLimitShowMore\": never;\n \"i18nStrings.valueText\": never;\n \"i18nStrings.removeTokenButtonAriaLabel\": {\n \"token__operator\": string;\n \"token__propertyKey\": string | number;\n \"token__value\": string | number;\n }\n }\n \"s3-resource-selector\": {\n \"i18nStrings.inContextSelectPlaceholder\": never;\n \"i18nStrings.inContextBrowseButton\": never;\n \"i18nStrings.inContextViewButton\": never;\n \"i18nStrings.inContextViewButtonAriaLabel\": never;\n \"i18nStrings.inContextLoadingText\": never;\n \"i18nStrings.inContextUriLabel\": never;\n \"i18nStrings.inContextVersionSelectLabel\": never;\n \"i18nStrings.modalTitle\": never;\n \"i18nStrings.modalCancelButton\": never;\n \"i18nStrings.modalSubmitButton\": never;\n \"i18nStrings.modalBreadcrumbRootItem\": never;\n \"i18nStrings.selectionBuckets\": never;\n \"i18nStrings.selectionObjects\": never;\n \"i18nStrings.selectionVersions\": never;\n \"i18nStrings.selectionBucketsSearchPlaceholder\": never;\n \"i18nStrings.selectionObjectsSearchPlaceholder\": never;\n \"i18nStrings.selectionVersionsSearchPlaceholder\": never;\n \"i18nStrings.selectionBucketsLoading\": never;\n \"i18nStrings.selectionBucketsNoItems\": never;\n \"i18nStrings.selectionObjectsLoading\": never;\n \"i18nStrings.selectionObjectsNoItems\": never;\n \"i18nStrings.selectionVersionsLoading\": never;\n \"i18nStrings.selectionVersionsNoItems\": never;\n \"i18nStrings.filteringNoMatches\": never;\n \"i18nStrings.filteringCantFindMatch\": never;\n \"i18nStrings.clearFilterButtonText\": never;\n \"i18nStrings.columnBucketID\": never;\n \"i18nStrings.columnBucketName\": never;\n \"i18nStrings.columnBucketCreationDate\": never;\n \"i18nStrings.columnBucketRegion\": never;\n \"i18nStrings.columnObjectKey\": never;\n \"i18nStrings.columnObjectLastModified\": never;\n \"i18nStrings.columnObjectSize\": never;\n \"i18nStrings.columnVersionID\": never;\n \"i18nStrings.columnVersionLastModified\": never;\n \"i18nStrings.columnVersionSize\": never;\n \"i18nStrings.validationPathMustBegin\": never;\n \"i18nStrings.validationBucketLowerCase\": never;\n \"i18nStrings.validationBucketMustNotContain\": never;\n \"i18nStrings.validationBucketLength\": never;\n \"i18nStrings.validationBucketMustComplyDns\": never;\n \"i18nStrings.labelSortedDescending\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelSortedAscending\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelNotSorted\": {\n \"columnName\": string | number;\n }\n \"i18nStrings.labelsBucketsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsBucketsSelection.itemSelectionLabel\": {\n \"item__Name\": string | number;\n }\n \"i18nStrings.labelsObjectsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsObjectsSelection.itemSelectionLabel\": {\n \"item__Key\": string | number;\n }\n \"i18nStrings.labelsVersionsSelection.selectionGroupLabel\": never;\n \"i18nStrings.labelsVersionsSelection.itemSelectionLabel\": {\n \"item__VersionId\": string | number;\n }\n \"i18nStrings.labelFiltering\": {\n \"itemsType\": string | number;\n }\n \"i18nStrings.labelRefresh\": never;\n \"i18nStrings.labelBreadcrumbs\": never;\n \"i18nStrings.filteringCounterText\": {\n \"count\": number;\n }\n }\n \"select\": {\n \"errorIconAriaLabel\": never;\n \"selectedAriaLabel\": never;\n \"recoveryText\": never;\n }\n \"slider\": {\n \"i18nStrings.valueTextRange\": {\n \"value\": string | number;\n \"previousValue\": string | number;\n \"nextValue\": string | number;\n }\n }\n \"split-panel\": {\n \"i18nStrings.closeButtonAriaLabel\": never;\n \"i18nStrings.openButtonAriaLabel\": never;\n \"i18nStrings.preferencesTitle\": never;\n \"i18nStrings.preferencesPositionLabel\": never;\n \"i18nStrings.preferencesPositionDescription\": never;\n \"i18nStrings.preferencesPositionSide\": never;\n \"i18nStrings.preferencesPositionBottom\": never;\n \"i18nStrings.preferencesConfirm\": never;\n \"i18nStrings.preferencesCancel\": never;\n \"i18nStrings.resizeHandleAriaLabel\": never;\n }\n \"table\": {\n \"ariaLabels.resizerRoleDescription\": never;\n \"ariaLabels.submittingEditText\": never;\n \"ariaLabels.successfulEditLabel\": never;\n \"ariaLabels.expandButtonLabel\": never;\n \"ariaLabels.collapseButtonLabel\": never;\n \"columnDefinitions.editConfig.errorIconAriaLabel\": never;\n \"columnDefinitions.editConfig.editIconAriaLabel\": never;\n }\n \"tabs\": {\n \"i18nStrings.scrollLeftAriaLabel\": never;\n \"i18nStrings.scrollRightAriaLabel\": never;\n \"i18nStrings.tabsWithActionsAriaRoleDescription\": never;\n }\n \"tag-editor\": {\n \"i18nStrings.keyPlaceholder\": never;\n \"i18nStrings.valuePlaceholder\": never;\n \"i18nStrings.addButton\": never;\n \"i18nStrings.removeButton\": never;\n \"i18nStrings.removeButtonAriaLabel\": {\n \"tag__key\": string | number;\n }\n \"i18nStrings.undoButton\": never;\n \"i18nStrings.undoPrompt\": never;\n \"i18nStrings.loading\": never;\n \"i18nStrings.keyHeader\": never;\n \"i18nStrings.valueHeader\": never;\n \"i18nStrings.optional\": never;\n \"i18nStrings.keySuggestion\": never;\n \"i18nStrings.valueSuggestion\": never;\n \"i18nStrings.emptyTags\": never;\n \"i18nStrings.tooManyKeysSuggestion\": never;\n \"i18nStrings.tooManyValuesSuggestion\": never;\n \"i18nStrings.keysSuggestionLoading\": never;\n \"i18nStrings.keysSuggestionError\": never;\n \"i18nStrings.valuesSuggestionLoading\": never;\n \"i18nStrings.valuesSuggestionError\": never;\n \"i18nStrings.emptyKeyError\": never;\n \"i18nStrings.maxKeyCharLengthError\": never;\n \"i18nStrings.maxValueCharLengthError\": never;\n \"i18nStrings.duplicateKeyError\": never;\n \"i18nStrings.invalidKeyError\": never;\n \"i18nStrings.invalidValueError\": never;\n \"i18nStrings.awsPrefixError\": never;\n \"i18nStrings.tagLimitReached\": {\n \"tagLimit\": number;\n }\n \"i18nStrings.tagLimitExceeded\": {\n \"tagLimit\": number;\n }\n \"i18nStrings.tagLimit\": {\n \"tagLimitAvailable\": string;\n \"availableTags\": number;\n \"tagLimit\": string | number;\n }\n }\n \"token-group\": {\n \"i18nStrings.limitShowFewer\": never;\n \"i18nStrings.limitShowMore\": never;\n }\n \"top-navigation\": {\n \"i18nStrings.searchIconAriaLabel\": never;\n \"i18nStrings.searchDismissIconAriaLabel\": never;\n \"i18nStrings.overflowMenuTriggerText\": never;\n \"i18nStrings.overflowMenuDismissIconAriaLabel\": never;\n \"i18nStrings.overflowMenuBackIconAriaLabel\": never;\n \"i18nStrings.overflowMenuTitleText\": never;\n }\n \"tutorial-panel\": {\n \"i18nStrings.loadingText\": never;\n \"i18nStrings.tutorialListTitle\": never;\n \"i18nStrings.tutorialListDownloadLinkText\": never;\n \"i18nStrings.labelTutorialListDownloadLink\": never;\n \"i18nStrings.tutorialCompletedText\": never;\n \"i18nStrings.learnMoreLinkText\": never;\n \"i18nStrings.startTutorialButtonText\": never;\n \"i18nStrings.restartTutorialButtonText\": never;\n \"i18nStrings.completionScreenTitle\": never;\n \"i18nStrings.feedbackLinkText\": never;\n \"i18nStrings.dismissTutorialButtonText\": never;\n \"i18nStrings.taskTitle\": {\n \"taskNumber\": string | number;\n \"taskTitle\": string | number;\n }\n \"i18nStrings.stepTitle\": {\n \"stepNumber\": string | number;\n \"stepTitle\": string | number;\n }\n \"i18nStrings.labelExitTutorial\": never;\n \"i18nStrings.labelTotalSteps\": {\n \"totalStepCount\": string | number;\n }\n \"i18nStrings.labelsTaskStatus.pending\": never;\n \"i18nStrings.labelsTaskStatus.in-progress\": never;\n \"i18nStrings.labelsTaskStatus.success\": never;\n }\n \"wizard\": {\n \"i18nStrings.stepNumberLabel\": {\n \"stepNumber\": string | number;\n }\n \"i18nStrings.collapsedStepsLabel\": {\n \"stepNumber\": string | number;\n \"stepsCount\": string | number;\n }\n \"i18nStrings.skipToButtonLabel\": {\n \"task__title\": string | number;\n }\n \"i18nStrings.navigationAriaLabel\": never;\n \"i18nStrings.cancelButton\": never;\n \"i18nStrings.previousButton\": never;\n \"i18nStrings.nextButton\": never;\n \"i18nStrings.optional\": never;\n \"i18nStrings.nextButtonLoadingAnnouncement\": never;\n \"i18nStrings.submitButtonLoadingAnnouncement\": never;\n }\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
|
@@ -10,6 +10,7 @@ export const getOverflowParents = (element) => {
|
|
|
10
10
|
return parents;
|
|
11
11
|
};
|
|
12
12
|
export const getOverflowParentDimensions = ({ element, excludeClosestParent = false, expandToViewport = false, canExpandOutsideViewport = false, }) => {
|
|
13
|
+
var _a, _b, _c, _d;
|
|
13
14
|
const parents = expandToViewport
|
|
14
15
|
? []
|
|
15
16
|
: getOverflowParents(element).map(el => {
|
|
@@ -34,8 +35,8 @@ export const getOverflowParentDimensions = ({ element, excludeClosestParent = fa
|
|
|
34
35
|
}
|
|
35
36
|
else {
|
|
36
37
|
parents.push({
|
|
37
|
-
blockSize: window.innerHeight,
|
|
38
|
-
inlineSize: window.innerWidth,
|
|
38
|
+
blockSize: (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight,
|
|
39
|
+
inlineSize: (_d = (_c = window.visualViewport) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : window.innerWidth,
|
|
39
40
|
insetBlockStart: 0,
|
|
40
41
|
insetInlineStart: 0,
|
|
41
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollable-containers.js","sourceRoot":"","sources":["../../../../src/internal/utils/scrollable-containers.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAQpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAoB,EAAiB,EAAE;IACxE,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,IAAI,IAAI,GAAuB,OAAO,CAAC;IAEvC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,KAAK,QAAQ,CAAC,IAAI,EAAE;QAC5D,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrE;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,OAAO,EACP,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,KAAK,EACxB,wBAAwB,GAAG,KAAK,GAMjC,EAAiB,EAAE
|
|
1
|
+
{"version":3,"file":"scrollable-containers.js","sourceRoot":"","sources":["../../../../src/internal/utils/scrollable-containers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { findUpUntil } from './dom';\nexport interface BoundingBox {\n blockSize: number;\n inlineSize: number;\n insetBlockStart: number;\n insetInlineStart: number;\n}\n\nexport const getOverflowParents = (element: HTMLElement): HTMLElement[] => {\n const parents = [];\n let node: HTMLElement | null = element;\n\n while ((node = node.parentElement) && node !== document.body) {\n getComputedStyle(node).overflow !== 'visible' && parents.push(node);\n }\n return parents;\n};\n\nexport const getOverflowParentDimensions = ({\n element,\n excludeClosestParent = false,\n expandToViewport = false,\n canExpandOutsideViewport = false,\n}: {\n element: HTMLElement;\n excludeClosestParent: boolean;\n expandToViewport: boolean;\n canExpandOutsideViewport: boolean;\n}): BoundingBox[] => {\n const parents = expandToViewport\n ? []\n : getOverflowParents(element).map(el => {\n const { height, width, top, left } = el.getBoundingClientRect();\n return {\n // Treat the whole scrollable area as the available height\n // if we're allowed to expand past the viewport.\n blockSize: canExpandOutsideViewport ? el.scrollHeight : height,\n inlineSize: width,\n insetBlockStart: top,\n insetInlineStart: left,\n };\n });\n\n if (canExpandOutsideViewport && !expandToViewport) {\n const documentDimensions = document.documentElement.getBoundingClientRect();\n parents.push({\n inlineSize: Math.max(documentDimensions.width, document.documentElement.clientWidth),\n blockSize: Math.max(documentDimensions.height, document.documentElement.clientHeight),\n insetBlockStart: documentDimensions.top,\n insetInlineStart: documentDimensions.left,\n });\n } else {\n parents.push({\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n insetBlockStart: 0,\n insetInlineStart: 0,\n });\n }\n\n if (excludeClosestParent && !expandToViewport) {\n parents.shift();\n }\n\n return parents;\n};\n\ntype ScrollIntoViewOptions = Parameters<HTMLElement['scrollIntoView']>[0];\n\n/**\n * Calls `scrollIntoView` on the provided element with sensible defaults. If\n * the element does not exist or does not support the `scrollIntoView`\n * method, it will do nothing. This wrapper is created to support environments\n * where the native function is not available like JSDom (feature request:\n * https://github.com/jsdom/jsdom/issues/1422).\n *\n * @param element to be scrolled into view\n * @param options native options for `scrollIntoView`\n */\nexport function scrollElementIntoView(\n element: HTMLElement | undefined,\n options: ScrollIntoViewOptions = { block: 'nearest', inline: 'nearest' }\n) {\n element?.scrollIntoView?.(options);\n}\n\nexport function calculateScroll({ insetBlockStart, blockSize }: BoundingBox) {\n if (insetBlockStart < 0) {\n return insetBlockStart;\n } else if (insetBlockStart + blockSize > window.innerHeight) {\n if (blockSize > window.innerHeight) {\n return insetBlockStart;\n } else {\n return insetBlockStart + blockSize - window.innerHeight;\n }\n }\n return 0;\n}\n\n/**\n * For elements with fixed position, the browser's native scrollIntoView API doesn't work,\n * so we need to manually scroll to the element's position.\n * Supports only vertical scrolling.\n */\nexport function scrollRectangleIntoView(box: BoundingBox, scrollableParent?: HTMLElement) {\n const scrollAmount = calculateScroll(box);\n if (scrollAmount) {\n (scrollableParent || window).scrollBy(0, scrollAmount);\n }\n}\n\nexport function getFirstScrollableParent(element: HTMLElement): HTMLElement | undefined {\n return (\n findUpUntil(element, el => {\n const overflows = el.scrollHeight > el.clientHeight;\n return overflows && ['scroll', 'auto'].includes(getComputedStyle(el).overflowY);\n }) || undefined\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -135,11 +135,12 @@ function toRelativePosition(element, parent) {
|
|
|
135
135
|
* Get a BoundingBox that represents the visible viewport.
|
|
136
136
|
*/
|
|
137
137
|
function getViewportRect(window) {
|
|
138
|
+
var _a, _b, _c, _d;
|
|
138
139
|
return {
|
|
139
140
|
insetBlockStart: 0,
|
|
140
141
|
insetInlineStart: 0,
|
|
141
|
-
inlineSize: window.innerWidth,
|
|
142
|
-
blockSize: window.innerHeight,
|
|
142
|
+
inlineSize: (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : window.innerWidth,
|
|
143
|
+
blockSize: (_d = (_c = window.visualViewport) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : window.innerHeight,
|
|
143
144
|
};
|
|
144
145
|
}
|
|
145
146
|
function getDocumentRect(document) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { getContainingBlock } from '../internal/utils/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: containingBlock ? containingBlockRect : getDocumentRect(document),\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n positionHandlerRef.current = () => {\n const newTrackOffset = toRelativePosition(\n getLogicalBoundingClientRect(track),\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n allowScrollToFit,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.innerWidth,\n blockSize: window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { getContainingBlock } from '../internal/utils/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: containingBlock ? containingBlockRect : getDocumentRect(document),\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n positionHandlerRef.current = () => {\n const newTrackOffset = toRelativePosition(\n getLogicalBoundingClientRect(track),\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n allowScrollToFit,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n"]}
|
package/tabs/interfaces.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BaseComponentProps } from '../internal/base-component';
|
|
3
3
|
import { NonCancelableEventHandler } from '../internal/events';
|
|
4
|
+
import { ButtonProps } from '../button/interfaces';
|
|
4
5
|
export interface TabsProps extends BaseComponentProps {
|
|
5
6
|
/**
|
|
6
7
|
* Specifies the tabs to display. Each tab object has the following properties:
|
|
@@ -9,6 +10,13 @@ export interface TabsProps extends BaseComponentProps {
|
|
|
9
10
|
* - `label` (ReactNode) - Tab label shown in the UI.
|
|
10
11
|
* - `content` (ReactNode) - (Optional) Tab content to render in the container.
|
|
11
12
|
* - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.
|
|
13
|
+
* - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
|
|
14
|
+
* - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.
|
|
15
|
+
* - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.
|
|
16
|
+
* - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.
|
|
17
|
+
* Although it is technically possible to insert any content, our UX guidelines only allow you to add
|
|
18
|
+
* an icon button or icon button dropdown.
|
|
19
|
+
* - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.
|
|
12
20
|
* - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The
|
|
13
21
|
* `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,
|
|
14
22
|
* ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
|
|
@@ -80,6 +88,29 @@ export declare namespace TabsProps {
|
|
|
80
88
|
* Whether this tab is disabled.
|
|
81
89
|
*/
|
|
82
90
|
disabled?: boolean;
|
|
91
|
+
/**
|
|
92
|
+
* (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
|
|
93
|
+
* When a user clicks on this button the onDismiss handler is called.
|
|
94
|
+
*/
|
|
95
|
+
dismissible?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* (Optional) Specifies an aria-label for the dismiss icon button.
|
|
98
|
+
*/
|
|
99
|
+
dismissLabel?: string;
|
|
100
|
+
/**
|
|
101
|
+
* (Optional) Determines whether the dismiss button is disabled.
|
|
102
|
+
*/
|
|
103
|
+
dismissDisabled?: boolean;
|
|
104
|
+
/**
|
|
105
|
+
* (Optional) Action for the tab, rendered next to its corresponding label.
|
|
106
|
+
* Although it is technically possible to insert any content, our UX guidelines only allow you to add
|
|
107
|
+
* an icon button or icon button dropdown.
|
|
108
|
+
*/
|
|
109
|
+
action?: React.ReactNode;
|
|
110
|
+
/**
|
|
111
|
+
* (event => void) Called when a user clicks on the dismiss button.
|
|
112
|
+
*/
|
|
113
|
+
onDismiss?: ButtonProps['onClick'];
|
|
83
114
|
/**
|
|
84
115
|
* You can use this parameter to change the default `href` of the internal tab anchor. The
|
|
85
116
|
* `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,
|
|
@@ -108,6 +139,11 @@ export declare namespace TabsProps {
|
|
|
108
139
|
* ARIA label for the scroll right button that appears when the tab header is wider than the container.
|
|
109
140
|
*/
|
|
110
141
|
scrollRightAriaLabel?: string;
|
|
142
|
+
/**
|
|
143
|
+
* ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used
|
|
144
|
+
* with role="application" to provide further information on the purpose of this component
|
|
145
|
+
*/
|
|
146
|
+
tabsWithActionsAriaRoleDescription?: string;
|
|
111
147
|
}
|
|
112
148
|
}
|
|
113
149
|
//# sourceMappingURL=interfaces.d.ts.map
|
package/tabs/interfaces.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}
|
package/tabs/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n /**\n * Specifies the tabs to display. Each tab object has the following properties:\n *\n * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n * - `label` (ReactNode) - Tab label shown in the UI.\n * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n * ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n * if your application routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n tabs: ReadonlyArray<TabsProps.Tab>;\n\n /**\n * The possible visual variants of tabs are the following:\n * * `default` - Use in any context.\n * * `container` - Use this variant to have the tabs displayed within a container header.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * @visualrefresh `stacked` variant\n */\n variant?: TabsProps.Variant;\n\n /**\n * Called whenever the user selects a different tab.\n * The event's `detail` contains the new `activeTabId`.\n */\n onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n /**\n * The `id` of the currently active tab.\n * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n */\n activeTabId?: string;\n\n /**\n * Provides an `aria-label` to the tab container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tab container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n */\n disableContentPaddings?: boolean;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TabsProps.I18nStrings;\n /**\n * Enabling this property makes the tab content fit to the available height.\n * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n */\n fitHeight?: boolean;\n}\nexport namespace TabsProps {\n export type Variant = 'default' | 'container' | 'stacked';\n\n export interface Tab {\n /**\n * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n */\n id: string;\n /**\n * Tab label shown in the UI.\n */\n label: React.ReactNode;\n /**\n * Tab content to render in the container.\n */\n content?: React.ReactNode;\n /**\n * Whether this tab is disabled.\n */\n disabled?: boolean;\n /**\n * You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n * when the routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n href?: string;\n }\n\n export interface ChangeDetail {\n /**\n * The ID of the clicked tab.\n */\n activeTabId: string;\n /**\n * The `href` attribute of the clicked tab, if defined.\n */\n activeTabHref?: string;\n }\n\n export interface I18nStrings {\n /**\n * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n */\n scrollLeftAriaLabel?: string;\n /**\n * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n */\n scrollRightAriaLabel?: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { ButtonProps } from '../button/interfaces';\n\nexport interface TabsProps extends BaseComponentProps {\n /**\n * Specifies the tabs to display. Each tab object has the following properties:\n *\n * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n * - `label` (ReactNode) - Tab label shown in the UI.\n * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n * ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n * if your application routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n tabs: ReadonlyArray<TabsProps.Tab>;\n\n /**\n * The possible visual variants of tabs are the following:\n * * `default` - Use in any context.\n * * `container` - Use this variant to have the tabs displayed within a container header.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * @visualrefresh `stacked` variant\n */\n variant?: TabsProps.Variant;\n\n /**\n * Called whenever the user selects a different tab.\n * The event's `detail` contains the new `activeTabId`.\n */\n onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n /**\n * The `id` of the currently active tab.\n * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n */\n activeTabId?: string;\n\n /**\n * Provides an `aria-label` to the tab container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tab container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n */\n disableContentPaddings?: boolean;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TabsProps.I18nStrings;\n /**\n * Enabling this property makes the tab content fit to the available height.\n * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n */\n fitHeight?: boolean;\n}\nexport namespace TabsProps {\n export type Variant = 'default' | 'container' | 'stacked';\n\n export interface Tab {\n /**\n * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n */\n id: string;\n /**\n * Tab label shown in the UI.\n */\n label: React.ReactNode;\n /**\n * Tab content to render in the container.\n */\n content?: React.ReactNode;\n /**\n * Whether this tab is disabled.\n */\n disabled?: boolean;\n /**\n * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n * When a user clicks on this button the onDismiss handler is called.\n */\n dismissible?: boolean;\n /**\n * (Optional) Specifies an aria-label for the dismiss icon button.\n */\n dismissLabel?: string;\n /**\n * (Optional) Determines whether the dismiss button is disabled.\n */\n dismissDisabled?: boolean;\n /**\n * (Optional) Action for the tab, rendered next to its corresponding label.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n * an icon button or icon button dropdown.\n */\n action?: React.ReactNode;\n /**\n * (event => void) Called when a user clicks on the dismiss button.\n */\n onDismiss?: ButtonProps['onClick'];\n /**\n * You can use this parameter to change the default `href` of the internal tab anchor. The\n * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n * when the routing can handle such deep links. You can manually update routing on the current page\n * using the `activeTabHref` property of the `change` event's detail.\n */\n href?: string;\n }\n\n export interface ChangeDetail {\n /**\n * The ID of the clicked tab.\n */\n activeTabId: string;\n /**\n * The `href` attribute of the clicked tab, if defined.\n */\n activeTabHref?: string;\n }\n\n export interface I18nStrings {\n /**\n * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n */\n scrollLeftAriaLabel?: string;\n /**\n * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n */\n scrollRightAriaLabel?: string;\n /**\n * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n * with role=\"application\" to provide further information on the purpose of this component\n */\n tabsWithActionsAriaRoleDescription?: string;\n }\n}\n"]}
|
package/tabs/styles.css.js
CHANGED
|
@@ -1,27 +1,30 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"tabs-header": "awsui_tabs-
|
|
5
|
-
"tabs-header-list": "awsui_tabs-header-
|
|
6
|
-
"pagination-button": "awsui_pagination-
|
|
7
|
-
"pagination-button-left": "awsui_pagination-button-
|
|
8
|
-
"pagination-button-left-scrollable": "awsui_pagination-button-left-
|
|
9
|
-
"pagination-button-right": "awsui_pagination-button-
|
|
10
|
-
"pagination-button-right-scrollable": "awsui_pagination-button-right-
|
|
11
|
-
"tabs-tab": "awsui_tabs-
|
|
12
|
-
"tabs-tab-label": "awsui_tabs-tab-
|
|
13
|
-
"tabs-tab-
|
|
14
|
-
"
|
|
15
|
-
"tabs-tab-
|
|
16
|
-
"
|
|
17
|
-
"tabs-
|
|
18
|
-
"
|
|
19
|
-
"tabs": "
|
|
20
|
-
"tabs-
|
|
21
|
-
"
|
|
22
|
-
"tabs
|
|
23
|
-
"tabs-content
|
|
24
|
-
"
|
|
25
|
-
"tabs-
|
|
4
|
+
"tabs-header": "awsui_tabs-header_14rmt_8vbks_194",
|
|
5
|
+
"tabs-header-list": "awsui_tabs-header-list_14rmt_8vbks_202",
|
|
6
|
+
"pagination-button": "awsui_pagination-button_14rmt_8vbks_219",
|
|
7
|
+
"pagination-button-left": "awsui_pagination-button-left_14rmt_8vbks_226",
|
|
8
|
+
"pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_8vbks_229",
|
|
9
|
+
"pagination-button-right": "awsui_pagination-button-right_14rmt_8vbks_233",
|
|
10
|
+
"pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_8vbks_236",
|
|
11
|
+
"tabs-tab": "awsui_tabs-tab_14rmt_8vbks_241",
|
|
12
|
+
"tabs-tab-label": "awsui_tabs-tab-label_14rmt_8vbks_250",
|
|
13
|
+
"tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_8vbks_261",
|
|
14
|
+
"tabs-tab-action": "awsui_tabs-tab-action_14rmt_8vbks_262",
|
|
15
|
+
"tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_8vbks_266",
|
|
16
|
+
"refresh": "awsui_refresh_14rmt_8vbks_281",
|
|
17
|
+
"tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_8vbks_285",
|
|
18
|
+
"tabs-tab-link": "awsui_tabs-tab-link_14rmt_8vbks_327",
|
|
19
|
+
"tabs-tab-active": "awsui_tabs-tab-active_14rmt_8vbks_404",
|
|
20
|
+
"tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_8vbks_411",
|
|
21
|
+
"root": "awsui_root_14rmt_8vbks_415",
|
|
22
|
+
"tabs": "awsui_tabs_14rmt_8vbks_194",
|
|
23
|
+
"tabs-content": "awsui_tabs-content_14rmt_8vbks_456",
|
|
24
|
+
"fit-height": "awsui_fit-height_14rmt_8vbks_460",
|
|
25
|
+
"tabs-content-active": "awsui_tabs-content-active_14rmt_8vbks_466",
|
|
26
|
+
"tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_8vbks_480",
|
|
27
|
+
"with-paddings": "awsui_with-paddings_14rmt_8vbks_480",
|
|
28
|
+
"tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_8vbks_491"
|
|
26
29
|
};
|
|
27
30
|
|