@hashicorp/mds-react 0.9.1 → 0.9.3
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/components/index.js +73 -115
- package/components/index.js.map +1 -1
- package/index-B9mPJh9w.js +579 -0
- package/index-B9mPJh9w.js.map +1 -0
- package/index-BHBlMMNF.js +16 -0
- package/index-BHBlMMNF.js.map +1 -0
- package/index-C4GBbW3N.js +3567 -0
- package/index-C4GBbW3N.js.map +1 -0
- package/{utils/mds-context/index.js → index-DBjAbGt7.js} +19 -20
- package/index-DBjAbGt7.js.map +1 -0
- package/index-WkGIywHj.js +767 -0
- package/index-WkGIywHj.js.map +1 -0
- package/index.js +100 -153
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/patterns/index.js +22 -32
- package/patterns/index.js.map +1 -1
- package/style.css +1 -0
- package/styles/mixins/button.scss +1 -6
- package/use-screen-size-BOnkX_K-.js +9 -0
- package/use-screen-size-BOnkX_K-.js.map +1 -0
- package/utils/index.js +7 -7
- package/assets/style-DD7hNwDr.css +0 -1
- package/components/accordion/index.js +0 -9
- package/components/accordion/index.js.map +0 -1
- package/components/accordion/item/button.js +0 -44
- package/components/accordion/item/button.js.map +0 -1
- package/components/accordion/item/index.js +0 -59
- package/components/accordion/item/index.js.map +0 -1
- package/components/accordion/style.module.scss.js +0 -24
- package/components/accordion/style.module.scss.js.map +0 -1
- package/components/alert/alert.module.scss.js +0 -29
- package/components/alert/alert.module.scss.js.map +0 -1
- package/components/alert/icon.js +0 -34
- package/components/alert/icon.js.map +0 -1
- package/components/alert/index.js +0 -97
- package/components/alert/index.js.map +0 -1
- package/components/badge/index.js +0 -53
- package/components/badge/index.js.map +0 -1
- package/components/badge/style.module.scss.js +0 -22
- package/components/badge/style.module.scss.js.map +0 -1
- package/components/badge-count/index.js +0 -29
- package/components/badge-count/index.js.map +0 -1
- package/components/badge-count/style.module.scss.js +0 -15
- package/components/badge-count/style.module.scss.js.map +0 -1
- package/components/breadcrumbs/index.js +0 -38
- package/components/breadcrumbs/index.js.map +0 -1
- package/components/breadcrumbs/item/index.js +0 -32
- package/components/breadcrumbs/item/index.js.map +0 -1
- package/components/breadcrumbs/style.module.scss.js +0 -27
- package/components/breadcrumbs/style.module.scss.js.map +0 -1
- package/components/breadcrumbs/truncation-button/index.js +0 -25
- package/components/breadcrumbs/truncation-button/index.js.map +0 -1
- package/components/button/index.js +0 -119
- package/components/button/index.js.map +0 -1
- package/components/button/styles.module.scss.js +0 -32
- package/components/button/styles.module.scss.js.map +0 -1
- package/components/card/card-thumbnail/card-thumbnail.module.css.js +0 -8
- package/components/card/card-thumbnail/card-thumbnail.module.css.js.map +0 -1
- package/components/card/card-thumbnail/index.js +0 -23
- package/components/card/card-thumbnail/index.js.map +0 -1
- package/components/card/index.js +0 -157
- package/components/card/index.js.map +0 -1
- package/components/card/styles.module.css.js +0 -29
- package/components/card/styles.module.css.js.map +0 -1
- package/components/code-block/code-block.module.scss.js +0 -34
- package/components/code-block/code-block.module.scss.js.map +0 -1
- package/components/code-block/code-lines/index.js +0 -59
- package/components/code-block/code-lines/index.js.map +0 -1
- package/components/code-block/code-lines/utils/split-html-into-lines.js +0 -19
- package/components/code-block/code-lines/utils/split-html-into-lines.js.map +0 -1
- package/components/code-block/code-lines/utils/split-jsx-into-lines.js +0 -31
- package/components/code-block/code-lines/utils/split-jsx-into-lines.js.map +0 -1
- package/components/code-block/hidden-copy-content/index.js +0 -13
- package/components/code-block/hidden-copy-content/index.js.map +0 -1
- package/components/code-block/index.js +0 -88
- package/components/code-block/index.js.map +0 -1
- package/components/code-block/utils/parse-highlighted-lines.js +0 -39
- package/components/code-block/utils/parse-highlighted-lines.js.map +0 -1
- package/components/code-block/utils/process-snippet.js +0 -20
- package/components/code-block/utils/process-snippet.js.map +0 -1
- package/components/code-block/utils/shellwords.js +0 -33
- package/components/code-block/utils/shellwords.js.map +0 -1
- package/components/combo-box-primitive/index.js +0 -302
- package/components/combo-box-primitive/index.js.map +0 -1
- package/components/dialog-primitive/dialog.module.scss.js +0 -12
- package/components/dialog-primitive/dialog.module.scss.js.map +0 -1
- package/components/dialog-primitive/index.js +0 -15
- package/components/dialog-primitive/index.js.map +0 -1
- package/components/disclosure-primitive/index.js +0 -57
- package/components/disclosure-primitive/index.js.map +0 -1
- package/components/disclosure-primitive/styles.module.css.js +0 -7
- package/components/disclosure-primitive/styles.module.css.js.map +0 -1
- package/components/disclosure-primitive/use-disclosure-primitive.js +0 -17
- package/components/disclosure-primitive/use-disclosure-primitive.js.map +0 -1
- package/components/dismiss-button/index.js +0 -22
- package/components/dismiss-button/index.js.map +0 -1
- package/components/dismiss-button/styles.module.scss.js +0 -7
- package/components/dismiss-button/styles.module.scss.js.map +0 -1
- package/components/dropdown/index.js +0 -79
- package/components/dropdown/index.js.map +0 -1
- package/components/dropdown/list-item/custom.js +0 -9
- package/components/dropdown/list-item/custom.js.map +0 -1
- package/components/dropdown/list-item/index.js +0 -14
- package/components/dropdown/list-item/index.js.map +0 -1
- package/components/dropdown/list-item/interactive.js +0 -49
- package/components/dropdown/list-item/interactive.js.map +0 -1
- package/components/dropdown/list-item/separator.js +0 -17
- package/components/dropdown/list-item/separator.js.map +0 -1
- package/components/dropdown/list-item/styles.module.css.js +0 -26
- package/components/dropdown/list-item/styles.module.css.js.map +0 -1
- package/components/dropdown/list-item/title.js +0 -9
- package/components/dropdown/list-item/title.js.map +0 -1
- package/components/dropdown/styles.module.css.js +0 -24
- package/components/dropdown/styles.module.css.js.map +0 -1
- package/components/dropdown/toggle-button/index.js +0 -54
- package/components/dropdown/toggle-button/index.js.map +0 -1
- package/components/dropdown/toggle-button/styles.module.scss.js +0 -14
- package/components/dropdown/toggle-button/styles.module.scss.js.map +0 -1
- package/components/flight-icon/flight-icon.module.css.js +0 -12
- package/components/flight-icon/flight-icon.module.css.js.map +0 -1
- package/components/flight-icon/index.js +0 -58
- package/components/flight-icon/index.js.map +0 -1
- package/components/form/checkbox/form-checkbox.module.css.js +0 -8
- package/components/form/checkbox/form-checkbox.module.css.js.map +0 -1
- package/components/form/checkbox/index.js +0 -109
- package/components/form/checkbox/index.js.map +0 -1
- package/components/form/error/form-error.module.css.js +0 -14
- package/components/form/error/form-error.module.css.js.map +0 -1
- package/components/form/error/index.js +0 -22
- package/components/form/error/index.js.map +0 -1
- package/components/form/field/form-field.module.css.js +0 -17
- package/components/form/field/form-field.module.css.js.map +0 -1
- package/components/form/field/index.js +0 -46
- package/components/form/field/index.js.map +0 -1
- package/components/form/fieldset/form-fieldset.module.css.js +0 -19
- package/components/form/fieldset/form-fieldset.module.css.js.map +0 -1
- package/components/form/fieldset/index.js +0 -65
- package/components/form/fieldset/index.js.map +0 -1
- package/components/form/file-input/form-file-input.module.scss.js +0 -7
- package/components/form/file-input/form-file-input.module.scss.js.map +0 -1
- package/components/form/file-input/index.js +0 -68
- package/components/form/file-input/index.js.map +0 -1
- package/components/form/helper-text/form-helper-text.module.css.js +0 -7
- package/components/form/helper-text/form-helper-text.module.css.js.map +0 -1
- package/components/form/helper-text/index.js +0 -22
- package/components/form/helper-text/index.js.map +0 -1
- package/components/form/indicator/form-indicator.module.css.js +0 -8
- package/components/form/indicator/form-indicator.module.css.js.map +0 -1
- package/components/form/indicator/index.js +0 -23
- package/components/form/indicator/index.js.map +0 -1
- package/components/form/label/form-label.module.css.js +0 -10
- package/components/form/label/form-label.module.css.js.map +0 -1
- package/components/form/label/index.js +0 -33
- package/components/form/label/index.js.map +0 -1
- package/components/form/legend/form-legend.module.css.js +0 -10
- package/components/form/legend/form-legend.module.css.js.map +0 -1
- package/components/form/legend/index.js +0 -19
- package/components/form/legend/index.js.map +0 -1
- package/components/form/radio/form-radio.module.scss.js +0 -8
- package/components/form/radio/form-radio.module.scss.js.map +0 -1
- package/components/form/radio/index.js +0 -100
- package/components/form/radio/index.js.map +0 -1
- package/components/form/radio-card/description.js +0 -10
- package/components/form/radio-card/description.js.map +0 -1
- package/components/form/radio-card/form-radio-card.module.css.js +0 -30
- package/components/form/radio-card/form-radio-card.module.css.js.map +0 -1
- package/components/form/radio-card/group.js +0 -31
- package/components/form/radio-card/group.js.map +0 -1
- package/components/form/radio-card/index.js +0 -67
- package/components/form/radio-card/index.js.map +0 -1
- package/components/form/radio-card/label.js +0 -10
- package/components/form/radio-card/label.js.map +0 -1
- package/components/form/select/form-select.module.css.js +0 -14
- package/components/form/select/form-select.module.css.js.map +0 -1
- package/components/form/select/index.js +0 -79
- package/components/form/select/index.js.map +0 -1
- package/components/form/super-select/form-super-select.module.css.js +0 -22
- package/components/form/super-select/form-super-select.module.css.js.map +0 -1
- package/components/form/super-select/index.js +0 -170
- package/components/form/super-select/index.js.map +0 -1
- package/components/form/text-input/index.js +0 -91
- package/components/form/text-input/index.js.map +0 -1
- package/components/form/text-input/styles.module.css.js +0 -15
- package/components/form/text-input/styles.module.css.js.map +0 -1
- package/components/form/textarea/form-textarea.module.css.js +0 -14
- package/components/form/textarea/form-textarea.module.css.js.map +0 -1
- package/components/form/textarea/index.js +0 -74
- package/components/form/textarea/index.js.map +0 -1
- package/components/form/toggle/form-toggle.module.scss.js +0 -12
- package/components/form/toggle/form-toggle.module.scss.js.map +0 -1
- package/components/form/toggle/index.js +0 -102
- package/components/form/toggle/index.js.map +0 -1
- package/components/hds/wrappers/tooltip.js +0 -51
- package/components/hds/wrappers/tooltip.js.map +0 -1
- package/components/icon-tile/index.js +0 -50
- package/components/icon-tile/index.js.map +0 -1
- package/components/icon-tile/style.module.scss.js +0 -29
- package/components/icon-tile/style.module.scss.js.map +0 -1
- package/components/inline-link/index.js +0 -33
- package/components/inline-link/index.js.map +0 -1
- package/components/inline-link/inline-link.module.css.js +0 -11
- package/components/inline-link/inline-link.module.css.js.map +0 -1
- package/components/interactive/index.js +0 -59
- package/components/interactive/index.js.map +0 -1
- package/components/legacy-button/index.js +0 -65
- package/components/legacy-button/index.js.map +0 -1
- package/components/legacy-button/utils.js +0 -39
- package/components/legacy-button/utils.js.map +0 -1
- package/components/menu-primitive/index.js +0 -68
- package/components/menu-primitive/index.js.map +0 -1
- package/components/menu-primitive/styles.module.css.js +0 -12
- package/components/menu-primitive/styles.module.css.js.map +0 -1
- package/components/menu-primitive/use-menu-primitive.js +0 -17
- package/components/menu-primitive/use-menu-primitive.js.map +0 -1
- package/components/modal/index.js +0 -61
- package/components/modal/index.js.map +0 -1
- package/components/modal/modal.module.css.js +0 -8
- package/components/modal/modal.module.css.js.map +0 -1
- package/components/modal/use-modal.js +0 -17
- package/components/modal/use-modal.js.map +0 -1
- package/components/separator/index.js +0 -15
- package/components/separator/index.js.map +0 -1
- package/components/separator/separator.module.css.js +0 -10
- package/components/separator/separator.module.css.js.map +0 -1
- package/components/standalone-link/index.js +0 -54
- package/components/standalone-link/index.js.map +0 -1
- package/components/standalone-link/styles.module.scss.js +0 -17
- package/components/standalone-link/styles.module.scss.js.map +0 -1
- package/components/table/index.js +0 -52
- package/components/table/index.js.map +0 -1
- package/components/table/table.module.scss.js +0 -33
- package/components/table/table.module.scss.js.map +0 -1
- package/components/table/td.js +0 -28
- package/components/table/td.js.map +0 -1
- package/components/table/th-button-tooltip.js +0 -24
- package/components/table/th-button-tooltip.js.map +0 -1
- package/components/table/th.js +0 -43
- package/components/table/th.js.map +0 -1
- package/components/table/tr.js +0 -9
- package/components/table/tr.js.map +0 -1
- package/components/table/utils.js +0 -28
- package/components/table/utils.js.map +0 -1
- package/components/tabs/index.js +0 -117
- package/components/tabs/index.js.map +0 -1
- package/components/tabs/tab-panel.js +0 -35
- package/components/tabs/tab-panel.js.map +0 -1
- package/components/tabs/tab.js +0 -70
- package/components/tabs/tab.js.map +0 -1
- package/components/tabs/tabs.module.scss.js +0 -22
- package/components/tabs/tabs.module.scss.js.map +0 -1
- package/components/tabs/use-tabs-context.js +0 -16
- package/components/tabs/use-tabs-context.js.map +0 -1
- package/components/text/index.js +0 -112
- package/components/text/index.js.map +0 -1
- package/components/text/style.module.scss.js +0 -9
- package/components/text/style.module.scss.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js +0 -62
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js +0 -20
- package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/index.js +0 -104
- package/components/visualizations/bar-chart/horizontal-chart/index.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/legend/index.js +0 -13
- package/components/visualizations/bar-chart/horizontal-chart/legend/index.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js +0 -14
- package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js.map +0 -1
- package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js +0 -28
- package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js.map +0 -1
- package/components/visualizations/bar-chart/index.js +0 -37
- package/components/visualizations/bar-chart/index.js.map +0 -1
- package/components/visualizations/bar-chart/style.module.css.js +0 -12
- package/components/visualizations/bar-chart/style.module.css.js.map +0 -1
- package/components/visualizations/donut-chart/components/arc-tooltip/index.js +0 -14
- package/components/visualizations/donut-chart/components/arc-tooltip/index.js.map +0 -1
- package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js +0 -10
- package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js.map +0 -1
- package/components/visualizations/donut-chart/components/external-arc-label/index.js +0 -58
- package/components/visualizations/donut-chart/components/external-arc-label/index.js.map +0 -1
- package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js +0 -16
- package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js.map +0 -1
- package/components/visualizations/donut-chart/components/internal-arc-label/index.js +0 -42
- package/components/visualizations/donut-chart/components/internal-arc-label/index.js.map +0 -1
- package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js +0 -14
- package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js.map +0 -1
- package/components/visualizations/donut-chart/index.js +0 -90
- package/components/visualizations/donut-chart/index.js.map +0 -1
- package/components/visualizations/donut-chart/styles.module.css.js +0 -20
- package/components/visualizations/donut-chart/styles.module.css.js.map +0 -1
- package/hooks/use-media-query/index.js +0 -16
- package/hooks/use-media-query/index.js.map +0 -1
- package/patterns/card/newsroom-card/index.js +0 -26
- package/patterns/card/newsroom-card/index.js.map +0 -1
- package/patterns/card/newsroom-card/style.module.css.js +0 -8
- package/patterns/card/newsroom-card/style.module.css.js.map +0 -1
- package/patterns/card/partner-card/index.js +0 -42
- package/patterns/card/partner-card/index.js.map +0 -1
- package/patterns/card/partner-card/style.module.css.js +0 -12
- package/patterns/card/partner-card/style.module.css.js.map +0 -1
- package/patterns/card/person-card/index.js +0 -52
- package/patterns/card/person-card/index.js.map +0 -1
- package/patterns/card/person-card/style.module.css.js +0 -12
- package/patterns/card/person-card/style.module.css.js.map +0 -1
- package/patterns/card/primitives.js +0 -77
- package/patterns/card/primitives.js.map +0 -1
- package/patterns/card/promo-card/index.js +0 -36
- package/patterns/card/promo-card/index.js.map +0 -1
- package/patterns/card/resource-card/index.js +0 -26
- package/patterns/card/resource-card/index.js.map +0 -1
- package/patterns/card/style.module.css.js +0 -30
- package/patterns/card/style.module.css.js.map +0 -1
- package/patterns/card/thumbnails/index.js +0 -25
- package/patterns/card/thumbnails/index.js.map +0 -1
- package/patterns/card/unified-card/index.js +0 -37
- package/patterns/card/unified-card/index.js.map +0 -1
- package/patterns/copy-button/clipboard.js +0 -78
- package/patterns/copy-button/clipboard.js.map +0 -1
- package/patterns/copy-button/index.js +0 -57
- package/patterns/copy-button/index.js.map +0 -1
- package/patterns/copy-button/style.module.css.js +0 -13
- package/patterns/copy-button/style.module.css.js.map +0 -1
- package/patterns/layout/index.js +0 -47
- package/patterns/layout/index.js.map +0 -1
- package/patterns/layout/layout.module.css.js +0 -20
- package/patterns/layout/layout.module.css.js.map +0 -1
- package/patterns/product-badge/index.js +0 -22
- package/patterns/product-badge/index.js.map +0 -1
- package/patterns/product-badge/style.module.css.js +0 -8
- package/patterns/product-badge/style.module.css.js.map +0 -1
- package/patterns/product-logo/index.js +0 -130
- package/patterns/product-logo/index.js.map +0 -1
- package/patterns/product-logo/product-logo.module.css.js +0 -13
- package/patterns/product-logo/product-logo.module.css.js.map +0 -1
- package/patterns/related-content/index.js +0 -65
- package/patterns/related-content/index.js.map +0 -1
- package/patterns/related-content/style.module.css.js +0 -22
- package/patterns/related-content/style.module.css.js.map +0 -1
- package/utils/get-contrast-yiq.js +0 -13
- package/utils/get-contrast-yiq.js.map +0 -1
- package/utils/hooks/use-screen-size.js +0 -10
- package/utils/hooks/use-screen-size.js.map +0 -1
- package/utils/i18n/constants/index.js +0 -98
- package/utils/i18n/constants/index.js.map +0 -1
- package/utils/i18n/helpers/locale-provider.js +0 -9
- package/utils/i18n/helpers/locale-provider.js.map +0 -1
- package/utils/i18n/helpers/to-smart-sentence-case.js +0 -12
- package/utils/i18n/helpers/to-smart-sentence-case.js.map +0 -1
- package/utils/i18n/helpers/to-smart-title-case.js +0 -10
- package/utils/i18n/helpers/to-smart-title-case.js.map +0 -1
- package/utils/i18n/helpers/use-locale.js +0 -14
- package/utils/i18n/helpers/use-locale.js.map +0 -1
- package/utils/i18n/index.js +0 -41
- package/utils/i18n/index.js.map +0 -1
- package/utils/i18n/index2.js +0 -33
- package/utils/i18n/index2.js.map +0 -1
- package/utils/make-normalizer/index.js +0 -34
- package/utils/make-normalizer/index.js.map +0 -1
- package/utils/mds-context/index.js.map +0 -1
package/components/tabs/index.js
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as b, jsxs as M } from "react/jsx-runtime";
|
|
3
|
-
import I from "classnames";
|
|
4
|
-
import { useState as i, useRef as N, useCallback as m, useEffect as u, useMemo as O } from "react";
|
|
5
|
-
import { TabPanel as S } from "./tab-panel.js";
|
|
6
|
-
import { Tab as U } from "./tab.js";
|
|
7
|
-
import { useTabsContext as q, TabsContext as B } from "./use-tabs-context.js";
|
|
8
|
-
import p from "./tabs.module.scss.js";
|
|
9
|
-
const F = ({
|
|
10
|
-
children: h,
|
|
11
|
-
onClickTab: n,
|
|
12
|
-
initialSelectedTabIndex: c = 0,
|
|
13
|
-
size: x = "medium",
|
|
14
|
-
className: E,
|
|
15
|
-
...k
|
|
16
|
-
}) => {
|
|
17
|
-
const [l, f] = i(
|
|
18
|
-
c
|
|
19
|
-
), s = N([]), d = N([]), [r, A] = i([]), [L, R] = i([]), [W, C] = i(0), [K, V] = i(0), a = N(null), y = m((t) => {
|
|
20
|
-
const e = s.current[t]?.parentNode;
|
|
21
|
-
e && e.scrollIntoView({
|
|
22
|
-
behavior: "smooth",
|
|
23
|
-
block: "nearest",
|
|
24
|
-
inline: "nearest"
|
|
25
|
-
});
|
|
26
|
-
}, []);
|
|
27
|
-
u(() => {
|
|
28
|
-
f(c);
|
|
29
|
-
}, [c]), u(() => {
|
|
30
|
-
const t = s.current[l]?.parentElement;
|
|
31
|
-
if (t && a.current) {
|
|
32
|
-
const e = t.offsetLeft, o = t.offsetWidth;
|
|
33
|
-
V(e), C(o), a.current.scrollTo({
|
|
34
|
-
left: e,
|
|
35
|
-
behavior: "smooth"
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
}, [s, l, y, a]), u(() => {
|
|
39
|
-
A(s.current.map((o) => o.id));
|
|
40
|
-
let t = 0, e = 0;
|
|
41
|
-
if (s.current.forEach((o, T) => {
|
|
42
|
-
o.hasAttribute("data-is-selected") && (t = T, e++);
|
|
43
|
-
}), e > 1)
|
|
44
|
-
throw new Error("Only one tab may use isSelected argument");
|
|
45
|
-
f(t);
|
|
46
|
-
}, [s]), u(() => {
|
|
47
|
-
R(d.current.map((t) => t.id));
|
|
48
|
-
}, [d]);
|
|
49
|
-
const P = m(
|
|
50
|
-
(t, e) => {
|
|
51
|
-
f(t), y(t), typeof n == "function" && n(e, t);
|
|
52
|
-
},
|
|
53
|
-
[n, y]
|
|
54
|
-
), w = m(
|
|
55
|
-
(t, e) => {
|
|
56
|
-
e.preventDefault(), s.current[t].focus();
|
|
57
|
-
},
|
|
58
|
-
[]
|
|
59
|
-
), g = m(
|
|
60
|
-
(t, e) => {
|
|
61
|
-
const o = "ArrowLeft", T = "ArrowRight", $ = "Enter", D = " ";
|
|
62
|
-
if (e.key === T) {
|
|
63
|
-
const v = (t + 1) % r.length;
|
|
64
|
-
w(v, e);
|
|
65
|
-
} else if (e.key === o) {
|
|
66
|
-
const v = (t + r.length - 1) % r.length;
|
|
67
|
-
w(v, e);
|
|
68
|
-
} else (e.key === $ || e.key === D) && f(t);
|
|
69
|
-
},
|
|
70
|
-
[w, r.length]
|
|
71
|
-
), j = O(
|
|
72
|
-
() => ({
|
|
73
|
-
tabNodes: s,
|
|
74
|
-
tabIds: r,
|
|
75
|
-
panelNodes: d,
|
|
76
|
-
panelIds: L,
|
|
77
|
-
selectedTabIndex: l,
|
|
78
|
-
onClick: P,
|
|
79
|
-
onKeyUp: g,
|
|
80
|
-
size: x,
|
|
81
|
-
tabsListRef: a
|
|
82
|
-
}),
|
|
83
|
-
[
|
|
84
|
-
s,
|
|
85
|
-
r,
|
|
86
|
-
d,
|
|
87
|
-
L,
|
|
88
|
-
l,
|
|
89
|
-
P,
|
|
90
|
-
g,
|
|
91
|
-
x,
|
|
92
|
-
a
|
|
93
|
-
]
|
|
94
|
-
);
|
|
95
|
-
return /* @__PURE__ */ b(B.Provider, { value: j, children: /* @__PURE__ */ b(
|
|
96
|
-
"div",
|
|
97
|
-
{
|
|
98
|
-
className: I(p.tabs, E),
|
|
99
|
-
...k,
|
|
100
|
-
style: {
|
|
101
|
-
"--indicator-left-pos": `${K}px`,
|
|
102
|
-
"--indicator-width": `${W}px`
|
|
103
|
-
},
|
|
104
|
-
children: h
|
|
105
|
-
}
|
|
106
|
-
) });
|
|
107
|
-
}, G = ({ children: h, className: n }) => {
|
|
108
|
-
const { tabsListRef: c } = q();
|
|
109
|
-
return /* @__PURE__ */ b("div", { className: I(p["tablist-wrapper"], n), children: /* @__PURE__ */ M("ul", { className: p.tablist, role: "tablist", ref: c, children: [
|
|
110
|
-
h,
|
|
111
|
-
/* @__PURE__ */ b("li", { className: p.indicator, role: "presentation" })
|
|
112
|
-
] }) });
|
|
113
|
-
}, z = { Provider: F, TabList: G, Panel: S, Tab: U };
|
|
114
|
-
export {
|
|
115
|
-
z as Tabs
|
|
116
|
-
};
|
|
117
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\t\tlet initialTabIndex = 0\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement, index) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tinitialTabIndex = index\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tthrow new Error('Only one tab may use isSelected argument')\n\t\t}\n\n\t\tsetSelectedTabIndex(initialTabIndex)\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","initialTabIndex","selectedCount","index","tabElement","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as b } from "react/jsx-runtime";
|
|
3
|
-
import { useId as f, useMemo as o } from "react";
|
|
4
|
-
import u from "classnames";
|
|
5
|
-
import { useTabsContext as I } from "./use-tabs-context.js";
|
|
6
|
-
import x from "./tabs.module.scss.js";
|
|
7
|
-
const y = ({ children: r, className: d, ...l }) => {
|
|
8
|
-
const { panelIds: n, tabIds: t, selectedTabIndex: a, panelNodes: c } = I(), s = "panel-" + f(), e = o(
|
|
9
|
-
() => n.indexOf(s),
|
|
10
|
-
[n, s]
|
|
11
|
-
), i = o(
|
|
12
|
-
() => e > -1 ? t[e] : void 0,
|
|
13
|
-
[t, e]
|
|
14
|
-
), m = o(
|
|
15
|
-
() => e === a,
|
|
16
|
-
[e, a]
|
|
17
|
-
);
|
|
18
|
-
return /* @__PURE__ */ b(
|
|
19
|
-
"section",
|
|
20
|
-
{
|
|
21
|
-
className: u(x.panel, d),
|
|
22
|
-
...l,
|
|
23
|
-
role: "tabpanel",
|
|
24
|
-
"aria-labelledby": i,
|
|
25
|
-
id: s,
|
|
26
|
-
hidden: !m,
|
|
27
|
-
ref: (p) => c.current.push(p),
|
|
28
|
-
children: r
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
};
|
|
32
|
-
export {
|
|
33
|
-
y as TabPanel
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=tab-panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId]\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex]\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}
|
package/components/tabs/tab.js
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as r, jsxs as N } from "react/jsx-runtime";
|
|
3
|
-
import c from "classnames";
|
|
4
|
-
import { BadgeCount as z } from "../badge-count/index.js";
|
|
5
|
-
import { useId as T, useMemo as p } from "react";
|
|
6
|
-
import { useTabsContext as j } from "./use-tabs-context.js";
|
|
7
|
-
import { FlightIcon as k } from "../flight-icon/index.js";
|
|
8
|
-
import o from "./tabs.module.scss.js";
|
|
9
|
-
const M = ({
|
|
10
|
-
count: n,
|
|
11
|
-
icon: i,
|
|
12
|
-
isSelected: b,
|
|
13
|
-
children: y,
|
|
14
|
-
className: u,
|
|
15
|
-
trackingKey: f,
|
|
16
|
-
tabIndicatorTheme: g = "primary",
|
|
17
|
-
...x
|
|
18
|
-
}) => {
|
|
19
|
-
const { tabNodes: h, tabIds: d, selectedTabIndex: m, onClick: I, onKeyUp: C, size: l } = j(), s = "tab-" + T(), t = p(() => d.indexOf(s), [d, s]), a = p(
|
|
20
|
-
() => t === m,
|
|
21
|
-
[t, m]
|
|
22
|
-
);
|
|
23
|
-
return /* @__PURE__ */ r(
|
|
24
|
-
"li",
|
|
25
|
-
{
|
|
26
|
-
className: c(
|
|
27
|
-
o.tab,
|
|
28
|
-
o[g],
|
|
29
|
-
{
|
|
30
|
-
[o.selected]: a
|
|
31
|
-
},
|
|
32
|
-
u
|
|
33
|
-
),
|
|
34
|
-
...x,
|
|
35
|
-
role: "presentation",
|
|
36
|
-
children: /* @__PURE__ */ N(
|
|
37
|
-
"button",
|
|
38
|
-
{
|
|
39
|
-
className: c(
|
|
40
|
-
o["tab-button"],
|
|
41
|
-
"mds-typography-font-weight-medium",
|
|
42
|
-
{
|
|
43
|
-
"mds-typography-legacy-body-200": l === "medium",
|
|
44
|
-
"mds-typography-legacy-body-300": l === "large"
|
|
45
|
-
}
|
|
46
|
-
),
|
|
47
|
-
role: "tab",
|
|
48
|
-
type: "button",
|
|
49
|
-
id: s,
|
|
50
|
-
"aria-selected": a,
|
|
51
|
-
tabIndex: a ? void 0 : -1,
|
|
52
|
-
onClick: (e) => I(t, e),
|
|
53
|
-
onKeyUp: (e) => C(t, e),
|
|
54
|
-
"data-is-selected": b,
|
|
55
|
-
"data-analytics": f,
|
|
56
|
-
ref: (e) => h.current.push(e),
|
|
57
|
-
children: [
|
|
58
|
-
i && /* @__PURE__ */ r(k, { name: i, size: 16, role: "presentation" }),
|
|
59
|
-
y,
|
|
60
|
-
n && /* @__PURE__ */ r(z, { text: n, size: "small", role: "presentation" })
|
|
61
|
-
]
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
export {
|
|
68
|
-
M as Tab
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=tab.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
const t = "tablist__sKiEs", a = "tab__qi523", s = "primary__iGc9C", e = "selected__SVr0E", n = "indicator__OHxre", r = "secondary__qlHsL", c = "panel__G8tI0", _ = {
|
|
2
|
-
"tablist-wrapper": "tablist-wrapper__nF28e",
|
|
3
|
-
tablist: t,
|
|
4
|
-
tab: a,
|
|
5
|
-
primary: s,
|
|
6
|
-
selected: e,
|
|
7
|
-
indicator: n,
|
|
8
|
-
secondary: r,
|
|
9
|
-
"tab-button": "tab-button__qI9wt",
|
|
10
|
-
panel: c
|
|
11
|
-
};
|
|
12
|
-
export {
|
|
13
|
-
_ as default,
|
|
14
|
-
n as indicator,
|
|
15
|
-
c as panel,
|
|
16
|
-
s as primary,
|
|
17
|
-
r as secondary,
|
|
18
|
-
e as selected,
|
|
19
|
-
a as tab,
|
|
20
|
-
t as tablist
|
|
21
|
-
};
|
|
22
|
-
//# sourceMappingURL=tabs.module.scss.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { createContext as e, useContext as o } from "react";
|
|
3
|
-
const n = e(
|
|
4
|
-
void 0
|
|
5
|
-
);
|
|
6
|
-
function s() {
|
|
7
|
-
const t = o(n);
|
|
8
|
-
if (t === void 0)
|
|
9
|
-
throw new Error("useTabsContext must be used within a TabsContext.Provider");
|
|
10
|
-
return t;
|
|
11
|
-
}
|
|
12
|
-
export {
|
|
13
|
-
n as TabsContext,
|
|
14
|
-
s as useTabsContext
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=use-tabs-context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tabs-context.js","sources":["../../../src/components/tabs/use-tabs-context.ts"],"sourcesContent":["'use client'\n\nimport {\n\ttype MutableRefObject,\n\ttype MouseEvent,\n\ttype KeyboardEvent,\n\tcreateContext,\n\tuseContext,\n} from 'react'\n\ninterface TabsContextState {\n\ttabNodes: MutableRefObject<Array<HTMLButtonElement>>\n\tpanelNodes: MutableRefObject<Array<HTMLDivElement>>\n\ttabIds: Array<string>\n\tpanelIds: Array<string>\n\tselectedTabIndex: number\n\tonClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void\n\tonKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void\n\tsize: 'medium' | 'large'\n\ttabsListRef: MutableRefObject<HTMLUListElement | null>\n}\n\nexport const TabsContext = createContext<TabsContextState | undefined>(\n\tundefined\n)\n\nexport function useTabsContext(): TabsContextState {\n\tconst context = useContext(TabsContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useTabsContext must be used within a TabsContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext"],"mappings":";;AAsB2B,MAC1BA,IAAAC;AAAA,EACD;AAEO;AACN,SAAMC,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,2DAAA;AAED,SAAAA;;"}
|
package/components/text/index.js
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
-
import l from "classnames";
|
|
3
|
-
import { createElement as e } from "react";
|
|
4
|
-
import m from "./style.module.scss.js";
|
|
5
|
-
const b = [
|
|
6
|
-
"primary",
|
|
7
|
-
"strong",
|
|
8
|
-
"faint",
|
|
9
|
-
"disabled",
|
|
10
|
-
"high-contrast",
|
|
11
|
-
"action",
|
|
12
|
-
"action-hover",
|
|
13
|
-
"action-active",
|
|
14
|
-
"highlight",
|
|
15
|
-
"highlight-on-surface",
|
|
16
|
-
"highlight-high-contrast",
|
|
17
|
-
"success",
|
|
18
|
-
"success-on-surface",
|
|
19
|
-
"success-high-contrast",
|
|
20
|
-
"warning",
|
|
21
|
-
"warning-on-surface",
|
|
22
|
-
"warning-high-contrast",
|
|
23
|
-
"critical",
|
|
24
|
-
"critical-on-surface",
|
|
25
|
-
"critical-high-contrast"
|
|
26
|
-
], B = ["regular", "medium", "semibold", "bold"];
|
|
27
|
-
function f(r, o) {
|
|
28
|
-
return {
|
|
29
|
-
"hds-body": `mds-typography-legacy-body-${o}`,
|
|
30
|
-
code: `mds-typography-code-${o}`,
|
|
31
|
-
"display-expressive": `mds-typography-display-expressive-${o}`,
|
|
32
|
-
label: "mds-typography-label",
|
|
33
|
-
body: `mds-typography-body-${o}`
|
|
34
|
-
}[r];
|
|
35
|
-
}
|
|
36
|
-
const n = ({
|
|
37
|
-
tag: r,
|
|
38
|
-
group: o,
|
|
39
|
-
size: s = "200",
|
|
40
|
-
weight: a,
|
|
41
|
-
align: c,
|
|
42
|
-
color: t,
|
|
43
|
-
children: p,
|
|
44
|
-
className: g,
|
|
45
|
-
...d
|
|
46
|
-
}) => {
|
|
47
|
-
const h = r ?? "span", u = f(o, s), i = b.includes(t);
|
|
48
|
-
return /* @__PURE__ */ y(
|
|
49
|
-
h,
|
|
50
|
-
{
|
|
51
|
-
className: l(
|
|
52
|
-
u,
|
|
53
|
-
{
|
|
54
|
-
[m[`align-${c}`]]: c,
|
|
55
|
-
[`mds-typography-font-weight-${a}`]: a,
|
|
56
|
-
[`mds-foreground-${t}`]: t && i
|
|
57
|
-
},
|
|
58
|
-
g
|
|
59
|
-
),
|
|
60
|
-
style: t && !i ? { color: t } : {},
|
|
61
|
-
...d,
|
|
62
|
-
children: p
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
}, T = ({
|
|
66
|
-
size: r = "300",
|
|
67
|
-
...o
|
|
68
|
-
}) => e(n, {
|
|
69
|
-
...o,
|
|
70
|
-
size: r,
|
|
71
|
-
group: "body"
|
|
72
|
-
}), x = ({
|
|
73
|
-
size: r = "200",
|
|
74
|
-
...o
|
|
75
|
-
}) => e(n, {
|
|
76
|
-
...o,
|
|
77
|
-
size: r,
|
|
78
|
-
group: "display-expressive"
|
|
79
|
-
}), v = (r) => e(n, {
|
|
80
|
-
...r,
|
|
81
|
-
group: "label"
|
|
82
|
-
}), $ = ({
|
|
83
|
-
size: r = "200",
|
|
84
|
-
weight: o = "regular",
|
|
85
|
-
...s
|
|
86
|
-
}) => e(n, {
|
|
87
|
-
...s,
|
|
88
|
-
size: r,
|
|
89
|
-
weight: o,
|
|
90
|
-
group: "hds-body"
|
|
91
|
-
}), E = ({
|
|
92
|
-
size: r = "200",
|
|
93
|
-
weight: o = "regular",
|
|
94
|
-
...s
|
|
95
|
-
}) => e(n, {
|
|
96
|
-
...s,
|
|
97
|
-
size: r,
|
|
98
|
-
weight: o,
|
|
99
|
-
group: "code"
|
|
100
|
-
}), D = {
|
|
101
|
-
Body: T,
|
|
102
|
-
DisplayExpressive: x,
|
|
103
|
-
Label: v,
|
|
104
|
-
HDSBody: $,
|
|
105
|
-
Code: E
|
|
106
|
-
};
|
|
107
|
-
export {
|
|
108
|
-
b as TEXT_COLORS,
|
|
109
|
-
B as TEXT_WEIGHTS,
|
|
110
|
-
D as Text
|
|
111
|
-
};
|
|
112
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps<T extends ElementType> {\n\ttag?: T\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n}\n\ninterface TextImplProps<T extends ElementType> extends BaseTextProps<T> {\n\tgroup: TextGroup\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = <T extends ElementType = 'span'>({\n\ttag,\n\tgroup,\n\tsize = '200',\n\tweight,\n\talign,\n\tcolor,\n\tchildren,\n\tclassName,\n\t...rest\n}: TextImplProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof TextImplProps<T>>) => {\n\tconst Component = tag ?? 'span'\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\ninterface BodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '200' | '300' | '400'\n}\n\nconst Body = <T extends ElementType>({\n\tsize = '300',\n\t...rest\n}: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'body',\n\t})\n}\n\ninterface DisplayExpressiveProps<T extends ElementType>\n\textends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nconst DisplayExpressive = <T extends ElementType>({\n\tsize = '200',\n\t...rest\n}: DisplayExpressiveProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof DisplayExpressiveProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'display-expressive',\n\t})\n}\n\ntype LabelProps<T extends ElementType> = Omit<BaseTextProps<T>, 'size'>\n\nconst Label = <T extends ElementType>(\n\tprops: LabelProps<T> & Omit<ComponentPropsWithRef<T>, keyof LabelProps<T>>\n) => {\n\treturn createElement(TextImpl, {\n\t\t...props,\n\t\tgroup: 'label',\n\t})\n}\n\ninterface HDSBodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst HDSBody = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: HDSBodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof HDSBodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body',\n\t})\n}\n\ninterface CodeProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst Code = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code',\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","props","HDSBody","Code","Text"],"mappings":";;;;AAQA,MAAMA,IAAc;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAqBMC,IAAe,CAAC,WAAW,UAAU,YAAY,MAAM;AAuB7D,SAASC,EAAmBC,GAAkBC,GAAwB;AASrE,SARmD;AAAA,IAClD,YAAY,8BAA8BA,CAAI;AAAA,IAC9C,MAAM,uBAAuBA,CAAI;AAAA,IACjC,sBAAsB,qCAAqCA,CAAI;AAAA,IAC/D,OAAO;AAAA,IACP,MAAM,uBAAuBA,CAAI;AAAA,EAAA,EAGXD,CAAK;AAC7B;AAEA,MAAME,IAAW,CAAiC;AAAA,EACjD,KAAAC;AAAA,EACA,OAAAH;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAG;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAC4D;AAC3D,QAAMC,IAAYP,KAAO,QACnBQ,IAAUZ,EAAmBC,GAAOC,CAAI,GAExCW,IAAsBf,EAAY,SAASS,CAAkB;AAEnE,SACC,gBAAAO;AAAA,IAACH;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVH;AAAA,QACA;AAAA,UACC,CAACI,EAAE,SAASV,CAAK,EAAE,CAAC,GAAGA;AAAA,UACvB,CAAC,8BAA8BD,CAAM,EAAE,GAAGA;AAAA,UAC1C,CAAC,kBAAkBE,CAAK,EAAE,GAAGA,KAASM;AAAA,QAAA;AAAA,QAEvCJ;AAAA,MAAA;AAAA,MAED,OAAOF,KAAS,CAACM,IAAsB,EAAE,OAAAN,EAAA,IAAU,CAAA;AAAA,MAClD,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGJ,GAMMS,IAAO,CAAwB;AAAA,EACpC,MAAAf,IAAO;AAAA,EACP,GAAGQ;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAQIiB,IAAoB,CAAwB;AAAA,EACjD,MAAAjB,IAAO;AAAA,EACP,GAAGQ;AACJ,MAEQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAKIkB,IAAQ,CACbC,MAEOH,EAAcf,GAAU;AAAA,EAC9B,GAAGkB;AAAA,EACH,OAAO;AAAA,CACP,GAOIC,IAAU,CAAwB;AAAA,EACvC,MAAApB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAOIkB,IAAO,CAAwB;AAAA,EACpC,MAAArB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAGImB,IAAO;AAAA,EACZ,MAAAP;AAAA,EACA,mBAAAE;AAAA,EACA,OAAAC;AAAA,EACA,SAAAE;AAAA,EACA,MAAAC;AACD;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsxs as f, jsx as u } from "react/jsx-runtime";
|
|
3
|
-
import { useState as g } from "react";
|
|
4
|
-
import i from "classnames";
|
|
5
|
-
import h from "use-resize-observer";
|
|
6
|
-
import { getContrastYIQ as b, hexToRgb as x } from "../../../../../utils/get-contrast-yiq.js";
|
|
7
|
-
import { Text as V } from "../../../../text/index.js";
|
|
8
|
-
import s from "./style.module.css.js";
|
|
9
|
-
function j({
|
|
10
|
-
value: e,
|
|
11
|
-
highestValue: l,
|
|
12
|
-
color: a,
|
|
13
|
-
stackable: m
|
|
14
|
-
}) {
|
|
15
|
-
const [n, r] = g(!1), { ref: c } = h({
|
|
16
|
-
onResize: ({ width: o }) => {
|
|
17
|
-
e === 0 && (e = 0.5);
|
|
18
|
-
let t = 32;
|
|
19
|
-
e >= 10 && e <= 99 ? t = 40 : e >= 100 && (t = 48), o && o < t ? r(!0) : r(!1);
|
|
20
|
-
}
|
|
21
|
-
}), d = b(x(a)), p = e / l * 100;
|
|
22
|
-
return /* @__PURE__ */ f(
|
|
23
|
-
"div",
|
|
24
|
-
{
|
|
25
|
-
ref: c,
|
|
26
|
-
className: i(s.datasetValue, s[d]),
|
|
27
|
-
style: {
|
|
28
|
-
"--width": p
|
|
29
|
-
},
|
|
30
|
-
children: [
|
|
31
|
-
/* @__PURE__ */ u(
|
|
32
|
-
"div",
|
|
33
|
-
{
|
|
34
|
-
className: s.datasetValueBar,
|
|
35
|
-
style: {
|
|
36
|
-
"--bar-background": a
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
),
|
|
40
|
-
/* @__PURE__ */ f(
|
|
41
|
-
V.Body,
|
|
42
|
-
{
|
|
43
|
-
tag: "span",
|
|
44
|
-
size: "200",
|
|
45
|
-
className: i(s.datasetValuePercent, {
|
|
46
|
-
[s.offset]: n,
|
|
47
|
-
[s.stackable]: m
|
|
48
|
-
}),
|
|
49
|
-
children: [
|
|
50
|
-
e,
|
|
51
|
-
"%"
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
)
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
export {
|
|
60
|
-
j as default
|
|
61
|
-
};
|
|
62
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport classNames from 'classnames'\nimport useResizeObserver from 'use-resize-observer'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\nimport { Text } from '../../../../../components/text'\nimport s from './style.module.css'\n\ninterface DatasetValueProps {\n\tvalue: number\n\thighestValue: number\n\tcolor: string\n\tstackable: boolean\n}\n\nexport default function DatasetValue({\n\tvalue,\n\thighestValue,\n\tcolor,\n\tstackable,\n}: DatasetValueProps) {\n\tconst [valueIsOffset, setValueIsOffset] = useState(false)\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\t// If the value is 0, we want to show a 0.5% bar\n\t\t\tif (value === 0) {\n\t\t\t\tvalue = 0.5\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * The logic below determines the threshold (in `px`)\n\t\t\t * a bar's width needs to reach for the value to be offset\n\t\t\t * by moving it to the right of the bar.\n\t\t\t *\n\t\t\t * The default below is for single-digit values.\n\t\t\t */\n\t\t\tlet offsetThreshold = 32\n\n\t\t\tif (value >= 10 && value <= 99) {\n\t\t\t\t// Offset threshold for 2 digit values\n\t\t\t\toffsetThreshold = 40\n\t\t\t} else if (value >= 100) {\n\t\t\t\t// Offset threshold for 3+ digit values\n\t\t\t\toffsetThreshold = 48\n\t\t\t}\n\n\t\t\tif (width && width < offsetThreshold) {\n\t\t\t\tsetValueIsOffset(true)\n\t\t\t} else {\n\t\t\t\tsetValueIsOffset(false)\n\t\t\t}\n\t\t},\n\t})\n\n\tconst valueColor = getContrastYIQ(hexToRgb(color))\n\n\t/**\n\t * The actual width of the bar, however, should be\n\t * a percentage of the highest value in the chart\n\t */\n\tconst percentageOfHighest = (value / highestValue) * 100\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(s.datasetValue, s[valueColor])}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t'--width': percentageOfHighest,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={s.datasetValueBar}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t'--bar-background': color,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Text.Body\n\t\t\t\ttag=\"span\"\n\t\t\t\tsize=\"200\"\n\t\t\t\tclassName={classNames(s.datasetValuePercent, {\n\t\t\t\t\t[s.offset]: valueIsOffset,\n\t\t\t\t\t[s.stackable]: stackable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{value}%\n\t\t\t</Text.Body>\n\t\t</div>\n\t)\n}\n"],"names":["DatasetValue","value","highestValue","color","stackable","valueIsOffset","useState","useResizeObserver","offsetThreshold","width","setValueIsOffset","valueColor","getContrastYIQ","jsxs","ref","classNames","percentageOfHighest","jsx","Text"],"mappings":";;;;;;;;AAgBqC,SACpCA,EAAA;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACD,WAAAC;AACC,GAAA;AACA,QAAM,CAAAC,IAA4C,IAAAC,EAAA,EAAA,YACvC,IAAGC,EAAY;AAAA,IAExB,UAAI,YAAa,MAAA;AAChB,MAAAN,MAAQ,MACTA,IAAA;AAWA,UAAIO,IAAe;AAElB,MAAAP,KAAA,WAAkB,KACnBO,IAAoB,KAEnBP,KAAkB,QACnBO,IAAA,KAGCC,KAAAA,IAAiBD,IAClBE,EAAO,EAAA,IAEPA,EAAA,EAAA;AAAA,IAED;AAAA,EAED,CAAA,GAMMC,IAAAC,IAA+BT,CAAA,QAGpCF,IAAAC,IAAA;AAAA,SAAC,gBAAAW;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAC;AAAA,MACA,WACCC,EAAA,EAAA,cAAA,EAAAJ,CAAA,CAAA;AAAA,MAAA;QAEA,WAAAK;AAAA,MAGD;AAAA,MAAA,UAAA;AAAA,QAAC,gBAAAC;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WACC,EAAA;AAAA,YAAA;cACqB,oBAAAd;AAAA,YACrB;AAAA,UAEF;AAAA,QAAA;AAAA,QACM,gBAAAU;AAAA,UAALK,EAAA;AAAA,UAAA;AAAA,YAEA;YACA;YAA6C,WACnCH,EAAG,EAAA,qBAAA;AAAA,cACZ,CAAC,EAAE,MAAA,GAASV;AAAA,cACZ,CAAA,EAAA,SAAA,GAAAD;AAAA,YAEA;YAAA,UAAA;AAAA,cAAMH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}
|
package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
const a = "datasetValue__7Cgnp", t = "datasetValueBar__XH-zW", e = "datasetValuePercent__5-Ofn", s = "offset__5sIB1", l = "stackable__EL-7z", c = "light__bf-WO", _ = "dark__grmLH", d = {
|
|
2
|
-
datasetValue: a,
|
|
3
|
-
datasetValueBar: t,
|
|
4
|
-
datasetValuePercent: e,
|
|
5
|
-
offset: s,
|
|
6
|
-
stackable: l,
|
|
7
|
-
light: c,
|
|
8
|
-
dark: _
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
_ as dark,
|
|
12
|
-
a as datasetValue,
|
|
13
|
-
t as datasetValueBar,
|
|
14
|
-
e as datasetValuePercent,
|
|
15
|
-
d as default,
|
|
16
|
-
c as light,
|
|
17
|
-
s as offset,
|
|
18
|
-
l as stackable
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=style.module.css.js.map
|
package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsxs as c, jsx as a } from "react/jsx-runtime";
|
|
3
|
-
import { useState as T, useMemo as f } from "react";
|
|
4
|
-
import C from "classnames";
|
|
5
|
-
import S from "react-wrap-balancer";
|
|
6
|
-
import y from "./dataset-value/index.js";
|
|
7
|
-
import B from "./legend/index.js";
|
|
8
|
-
import { useMediaQuery as k } from "../../../../hooks/use-media-query/index.js";
|
|
9
|
-
import { MDSButton as v } from "../../../legacy-button/index.js";
|
|
10
|
-
import { Text as w } from "../../../text/index.js";
|
|
11
|
-
import l from "./style.module.css.js";
|
|
12
|
-
function O({
|
|
13
|
-
categories: n,
|
|
14
|
-
datasets: r,
|
|
15
|
-
// Default this to virtually unlimited
|
|
16
|
-
maxInitialDatasets: i = 999,
|
|
17
|
-
stacked: o = !1
|
|
18
|
-
}) {
|
|
19
|
-
const h = k("(min-width: 560px)"), d = r.length > i, [m, p] = T(d), N = f(() => m ? r.slice(0, i) : r, [m, r, i]), g = f(() => {
|
|
20
|
-
let e = 0;
|
|
21
|
-
return r.forEach((s) => {
|
|
22
|
-
if (o) {
|
|
23
|
-
const t = b(s.values);
|
|
24
|
-
h ? t > e && (e = t) : s.values.forEach(({ value: u }) => {
|
|
25
|
-
u > e && (e = u);
|
|
26
|
-
});
|
|
27
|
-
} else
|
|
28
|
-
s.values.forEach(({ value: t }) => {
|
|
29
|
-
t > e && (e = t);
|
|
30
|
-
});
|
|
31
|
-
}), e;
|
|
32
|
-
}, [r, h]);
|
|
33
|
-
return /* @__PURE__ */ c("div", { className: l.barChart, children: [
|
|
34
|
-
/* @__PURE__ */ a("div", { className: l.chart, children: N.map((e) => /* @__PURE__ */ c("div", { className: l.dataset, children: [
|
|
35
|
-
/* @__PURE__ */ a("div", { className: l.datasetLabel, children: /* @__PURE__ */ a(S, { children: e.label }) }),
|
|
36
|
-
/* @__PURE__ */ c(
|
|
37
|
-
"div",
|
|
38
|
-
{
|
|
39
|
-
className: C(l.datasetValues, {
|
|
40
|
-
[l.datasetValuesStacked]: o
|
|
41
|
-
}),
|
|
42
|
-
children: [
|
|
43
|
-
e.values.map(({ value: s, color: t }, u) => /* @__PURE__ */ a(
|
|
44
|
-
y,
|
|
45
|
-
{
|
|
46
|
-
value: s,
|
|
47
|
-
highestValue: g,
|
|
48
|
-
color: t,
|
|
49
|
-
stackable: o
|
|
50
|
-
},
|
|
51
|
-
`dataset-${e.label}-${s}-${u}`
|
|
52
|
-
)),
|
|
53
|
-
o ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c(w.Body, { size: "200", tag: "p", className: l.datasetTotal, children: [
|
|
54
|
-
/* @__PURE__ */ a("span", { className: l.datasetTotalText, children: "Total:" }),
|
|
55
|
-
/* @__PURE__ */ c("span", { className: l.datasetTotalPercent, children: [
|
|
56
|
-
e.total || b(e.values),
|
|
57
|
-
"%"
|
|
58
|
-
] })
|
|
59
|
-
] }) }) : null
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] }, e.label)) }),
|
|
64
|
-
d && (m ? /* @__PURE__ */ a(
|
|
65
|
-
v,
|
|
66
|
-
{
|
|
67
|
-
className: l.showAllButton,
|
|
68
|
-
title: "Show all",
|
|
69
|
-
theme: {
|
|
70
|
-
brand: "neutral",
|
|
71
|
-
variant: "secondary",
|
|
72
|
-
background: "light"
|
|
73
|
-
},
|
|
74
|
-
onClick: () => p(!1)
|
|
75
|
-
}
|
|
76
|
-
) : /* @__PURE__ */ a(
|
|
77
|
-
v,
|
|
78
|
-
{
|
|
79
|
-
className: l.showAllButton,
|
|
80
|
-
title: "Show less",
|
|
81
|
-
theme: {
|
|
82
|
-
brand: "neutral",
|
|
83
|
-
variant: "secondary",
|
|
84
|
-
background: "light"
|
|
85
|
-
},
|
|
86
|
-
onClick: () => p(!0)
|
|
87
|
-
}
|
|
88
|
-
)),
|
|
89
|
-
n && n.length > 1 && /* @__PURE__ */ a(B, { className: l.legend, keys: n })
|
|
90
|
-
] });
|
|
91
|
-
}
|
|
92
|
-
function b(n) {
|
|
93
|
-
return n.reduce(
|
|
94
|
-
(i, o) => ({ value: i.value + o.value, color: "" }),
|
|
95
|
-
{
|
|
96
|
-
value: 0,
|
|
97
|
-
color: ""
|
|
98
|
-
}
|
|
99
|
-
).value;
|
|
100
|
-
}
|
|
101
|
-
export {
|
|
102
|
-
O as default
|
|
103
|
-
};
|
|
104
|
-
//# sourceMappingURL=index.js.map
|