draft-components 1.13.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{css → dist/css}/draft-components.css +553 -558
- package/{css → dist/css}/draft-components.dark.css +185 -113
- package/dist/esm/components/alert/alert.d.ts +15 -0
- package/dist/esm/components/alert/alert.js +12 -0
- package/dist/esm/components/alert/index.d.ts +1 -0
- package/dist/esm/components/alert/index.js +1 -0
- package/{types → dist/esm}/components/avatar/avatar.d.ts +8 -7
- package/dist/esm/components/avatar/avatar.js +41 -0
- package/dist/esm/components/avatar/index.d.ts +1 -0
- package/dist/esm/components/avatar/index.js +1 -0
- package/dist/esm/components/avatar-group/avatar-group.js +5 -0
- package/dist/esm/components/avatar-group/index.d.ts +1 -0
- package/dist/esm/components/avatar-group/index.js +1 -0
- package/{esm → dist/esm}/components/badge/badge.js +3 -6
- package/dist/esm/components/badge/index.d.ts +1 -0
- package/dist/esm/components/badge/index.js +1 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs-context.js +13 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs-item.js +16 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs.js +7 -0
- package/dist/esm/components/breadcrumbs/index.d.ts +2 -0
- package/dist/esm/components/breadcrumbs/index.js +2 -0
- package/{types → dist/esm}/components/button/button.d.ts +12 -10
- package/dist/esm/components/button/button.js +22 -0
- package/dist/esm/components/button/icon-button.d.ts +4 -0
- package/dist/esm/components/button/icon-button.js +7 -0
- package/dist/esm/components/button/index.d.ts +2 -0
- package/dist/esm/components/button/index.js +2 -0
- package/dist/esm/components/button-group/button-group.js +5 -0
- package/dist/esm/components/button-group/index.d.ts +1 -0
- package/dist/esm/components/button-group/index.js +1 -0
- package/dist/esm/components/caption/caption.d.ts +10 -0
- package/dist/esm/components/caption/caption.js +10 -0
- package/dist/esm/components/caption/index.d.ts +1 -0
- package/dist/esm/components/caption/index.js +1 -0
- package/dist/esm/components/checkbox/checkbox.js +15 -0
- package/dist/esm/components/checkbox/index.d.ts +1 -0
- package/dist/esm/components/checkbox/index.js +1 -0
- package/dist/esm/components/color-picker/color-picker-button.js +11 -0
- package/{esm → dist/esm}/components/color-picker/color-picker.js +4 -7
- package/dist/esm/components/color-picker/index.d.ts +1 -0
- package/dist/esm/components/color-picker/index.js +1 -0
- package/{esm → dist/esm}/components/date-picker/calendar-day.js +4 -7
- package/{types → dist/esm}/components/date-picker/calendar-grid-head.d.ts +1 -1
- package/dist/esm/components/date-picker/calendar-grid-head.js +11 -0
- package/{types → dist/esm}/components/date-picker/calendar-grid.d.ts +2 -2
- package/{esm → dist/esm}/components/date-picker/calendar-grid.js +7 -10
- package/dist/esm/components/date-picker/calendar-header.js +43 -0
- package/{types → dist/esm}/components/date-picker/calendar.d.ts +3 -3
- package/dist/esm/components/date-picker/calendar.js +19 -0
- package/{esm → dist/esm}/components/date-picker/date-helpers.js +20 -22
- package/{types → dist/esm}/components/date-picker/date-picker.d.ts +2 -2
- package/dist/esm/components/date-picker/date-picker.js +15 -0
- package/{types → dist/esm}/components/date-picker/date-range-picker.d.ts +3 -3
- package/{esm → dist/esm}/components/date-picker/date-range-picker.js +4 -7
- package/{types → dist/esm}/components/date-picker/date-range.d.ts +1 -1
- package/{esm → dist/esm}/components/date-picker/date-range.js +1 -4
- package/dist/esm/components/date-picker/index.d.ts +2 -0
- package/dist/esm/components/date-picker/index.js +2 -0
- package/{types → dist/esm}/components/date-picker/parse-min-max-props.d.ts +1 -1
- package/{esm → dist/esm}/components/date-picker/parse-min-max-props.js +1 -4
- package/{types → dist/esm}/components/date-picker-popover/date-picker-popover.d.ts +2 -2
- package/dist/esm/components/date-picker-popover/date-picker-popover.js +15 -0
- package/dist/esm/components/date-picker-popover/index.d.ts +1 -0
- package/dist/esm/components/date-picker-popover/index.js +1 -0
- package/dist/esm/components/date-range-picker-popover/date-range-picker-popover-footer.js +5 -0
- package/{types → dist/esm}/components/date-range-picker-popover/date-range-picker-popover-presets.d.ts +1 -1
- package/dist/esm/components/date-range-picker-popover/date-range-picker-popover-presets.js +30 -0
- package/{types → dist/esm}/components/date-range-picker-popover/date-range-picker-popover.d.ts +3 -3
- package/{esm → dist/esm}/components/date-range-picker-popover/date-range-picker-popover.js +7 -14
- package/{types → dist/esm}/components/date-range-picker-popover/helpers.d.ts +1 -1
- package/{esm → dist/esm}/components/date-range-picker-popover/helpers.js +1 -3
- package/dist/esm/components/date-range-picker-popover/index.d.ts +2 -0
- package/dist/esm/components/date-range-picker-popover/index.js +2 -0
- package/{types → dist/esm}/components/date-range-picker-popover/types.d.ts +1 -1
- package/dist/esm/components/date-range-picker-popover/types.js +1 -0
- package/{esm → dist/esm}/components/date-range-picker-popover/use-is-compact-view.js +2 -5
- package/dist/esm/components/dialog/dialog-body.js +7 -0
- package/{esm → dist/esm}/components/dialog/dialog-context.js +4 -7
- package/dist/esm/components/dialog/dialog-footer.js +8 -0
- package/dist/esm/components/dialog/dialog-header.js +15 -0
- package/{esm → dist/esm}/components/dialog/dialog.js +9 -15
- package/dist/esm/components/dialog/index.d.ts +4 -0
- package/dist/esm/components/dialog/index.js +4 -0
- package/dist/esm/components/empty-state/empty-state.d.ts +12 -0
- package/dist/esm/components/empty-state/empty-state.js +17 -0
- package/dist/esm/components/empty-state/index.d.ts +1 -0
- package/dist/esm/components/empty-state/index.js +1 -0
- package/{esm → dist/esm}/components/file-picker/file-picker.js +6 -10
- package/dist/esm/components/file-picker/index.d.ts +1 -0
- package/dist/esm/components/file-picker/index.js +1 -0
- package/dist/esm/components/filter-buttons/filter-button.js +6 -0
- package/{esm → dist/esm}/components/filter-buttons/filter-buttons.js +4 -7
- package/dist/esm/components/filter-buttons/index.d.ts +2 -0
- package/dist/esm/components/filter-buttons/index.js +2 -0
- package/{types → dist/esm}/components/filtered-search/filter-item.d.ts +1 -1
- package/dist/esm/components/filtered-search/filter-item.js +17 -0
- package/dist/esm/components/filtered-search/filter-operator-select.js +12 -0
- package/dist/esm/components/filtered-search/filter-token.js +12 -0
- package/dist/esm/components/filtered-search/filter-value-list.js +15 -0
- package/{types → dist/esm}/components/filtered-search/filtered-search.d.ts +1 -1
- package/{esm → dist/esm}/components/filtered-search/filtered-search.js +11 -16
- package/{types → dist/esm}/components/filtered-search/index.d.ts +4 -4
- package/dist/esm/components/filtered-search/index.js +3 -0
- package/dist/esm/components/filtered-search/model/abstract-filter.js +2 -0
- package/{types → dist/esm}/components/filtered-search/model/string-filter.d.ts +2 -2
- package/{esm → dist/esm}/components/filtered-search/model/string-filter.js +1 -4
- package/{types → dist/esm}/components/filtered-search/model/string-set-filter.d.ts +1 -1
- package/{esm → dist/esm}/components/filtered-search/model/string-set-filter.js +1 -4
- package/dist/esm/components/filtered-search/model/validation-result.js +1 -0
- package/dist/esm/components/filtered-search/string-filter-input.js +15 -0
- package/{types → dist/esm}/components/filtered-search/string-filter-item.d.ts +1 -1
- package/{esm → dist/esm}/components/filtered-search/string-filter-item.js +6 -10
- package/{types → dist/esm}/components/filtered-search/string-set-filter-item.d.ts +1 -1
- package/{esm → dist/esm}/components/filtered-search/string-set-filter-item.js +6 -10
- package/{types → dist/esm}/components/filtered-search/types.d.ts +2 -2
- package/dist/esm/components/filtered-search/types.js +1 -0
- package/{esm → dist/esm}/components/filtered-search/use-combobox-ids.js +2 -5
- package/{esm → dist/esm}/components/filtered-search/use-translations.js +4 -7
- package/{types → dist/esm}/components/form-field/form-field.d.ts +7 -3
- package/dist/esm/components/form-field/form-field.js +37 -0
- package/dist/esm/components/form-field/index.d.ts +1 -0
- package/dist/esm/components/form-field/index.js +1 -0
- package/dist/esm/components/hero-icons/24/outline/arrow-small-down-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/arrow-small-down-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/arrow-small-up-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/arrow-small-up-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/arrows-up-down-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/arrows-up-down-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/chevron-left-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/chevron-left-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/chevron-right-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/chevron-right-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/eye-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/eye-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/eye-slash-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/eye-slash-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/magnifying-glass-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/magnifying-glass-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/trash-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/trash-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/outline/x-mark-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/outline/x-mark-icon.js +5 -0
- package/dist/esm/components/hero-icons/24/solid/exclamation-triangle-icon.d.ts +4 -0
- package/dist/esm/components/hero-icons/24/solid/exclamation-triangle-icon.js +5 -0
- package/dist/esm/components/index.d.ts +42 -0
- package/dist/esm/components/index.js +42 -0
- package/dist/esm/components/label/index.d.ts +1 -0
- package/dist/esm/components/label/index.js +1 -0
- package/dist/esm/components/label/label.js +8 -0
- package/dist/esm/components/menu/index.d.ts +3 -0
- package/dist/esm/components/menu/index.js +3 -0
- package/{types → dist/esm}/components/menu/menu-item.d.ts +4 -6
- package/dist/esm/components/menu/menu-item.js +16 -0
- package/dist/esm/components/menu/menu-separator.js +5 -0
- package/{types → dist/esm}/components/menu/menu.d.ts +6 -5
- package/{esm → dist/esm}/components/menu/menu.js +7 -11
- package/dist/esm/components/nav-list/index.d.ts +3 -0
- package/dist/esm/components/nav-list/index.js +3 -0
- package/dist/esm/components/nav-list/nav-list-item.js +15 -0
- package/dist/esm/components/nav-list/nav-list-title.js +5 -0
- package/dist/esm/components/nav-list/nav-list.js +5 -0
- package/dist/esm/components/password-input/index.d.ts +1 -0
- package/dist/esm/components/password-input/index.js +1 -0
- package/dist/esm/components/password-input/password-input.d.ts +9 -0
- package/dist/esm/components/password-input/password-input.js +17 -0
- package/dist/esm/components/popover/index.d.ts +1 -0
- package/dist/esm/components/popover/index.js +1 -0
- package/{types → dist/esm}/components/popover/popover.d.ts +1 -1
- package/{esm → dist/esm}/components/popover/popover.js +8 -11
- package/{esm → dist/esm}/components/popover/use-page-click.js +2 -5
- package/dist/esm/components/portal/index.d.ts +1 -0
- package/dist/esm/components/portal/index.js +1 -0
- package/{esm → dist/esm}/components/portal/portal-context.js +6 -5
- package/{esm → dist/esm}/components/portal/portal.js +1 -4
- package/{types → dist/esm}/components/positioner/calc-position.d.ts +1 -1
- package/{esm → dist/esm}/components/positioner/calc-position.js +2 -4
- package/dist/esm/components/positioner/index.d.ts +1 -0
- package/dist/esm/components/positioner/index.js +1 -0
- package/{types → dist/esm}/components/positioner/positioner.d.ts +1 -1
- package/{esm → dist/esm}/components/positioner/positioner.js +5 -8
- package/dist/esm/components/positioner/types.js +1 -0
- package/dist/esm/components/radio/index.d.ts +1 -0
- package/dist/esm/components/radio/index.js +1 -0
- package/dist/esm/components/radio/radio.js +23 -0
- package/dist/esm/components/segmented-control/index.d.ts +1 -0
- package/dist/esm/components/segmented-control/index.js +1 -0
- package/dist/esm/components/segmented-control/segmented-button.d.ts +11 -0
- package/dist/esm/components/segmented-control/segmented-button.js +10 -0
- package/{types → dist/esm}/components/segmented-control/segmented-control.d.ts +5 -3
- package/dist/esm/components/segmented-control/segmented-control.js +15 -0
- package/dist/esm/components/select/index.d.ts +1 -0
- package/dist/esm/components/select/index.js +1 -0
- package/{types → dist/esm}/components/select/select.d.ts +9 -9
- package/dist/esm/components/select/select.js +34 -0
- package/dist/esm/components/selection-control/index.d.ts +1 -0
- package/dist/esm/components/selection-control/index.js +1 -0
- package/dist/esm/components/selection-control/selection-control.js +15 -0
- package/{types → dist/esm}/components/slide-over/index.d.ts +4 -4
- package/dist/esm/components/slide-over/index.js +3 -0
- package/dist/esm/components/slide-over/slide-over-body.js +5 -0
- package/{types → dist/esm}/components/slide-over/slide-over-context.d.ts +1 -1
- package/dist/esm/components/slide-over/slide-over-context.js +18 -0
- package/dist/esm/components/slide-over/slide-over-header.js +13 -0
- package/{types → dist/esm}/components/slide-over/slide-over.d.ts +3 -3
- package/{esm → dist/esm}/components/slide-over/slide-over.js +7 -12
- package/dist/esm/components/slide-over/types.js +1 -0
- package/dist/esm/components/slider/index.d.ts +2 -0
- package/dist/esm/components/slider/index.js +2 -0
- package/dist/esm/components/slider/slider-tick-marks.js +12 -0
- package/{types → dist/esm}/components/slider/slider.d.ts +1 -1
- package/{esm → dist/esm}/components/slider/slider.js +5 -8
- package/dist/esm/components/spinner/index.d.ts +1 -0
- package/dist/esm/components/spinner/index.js +1 -0
- package/dist/esm/components/spinner/spinner.js +6 -0
- package/dist/esm/components/switch/index.d.ts +1 -0
- package/dist/esm/components/switch/index.js +1 -0
- package/dist/esm/components/switch/switch.js +12 -0
- package/dist/esm/components/table/index.d.ts +7 -0
- package/dist/esm/components/table/index.js +7 -0
- package/dist/esm/components/table/table-body.js +6 -0
- package/dist/esm/components/table/table-cell.js +6 -0
- package/{esm → dist/esm}/components/table/table-container.js +3 -6
- package/{types → dist/esm}/components/table/table-head-cell.d.ts +1 -1
- package/dist/esm/components/table/table-head-cell.js +27 -0
- package/dist/esm/components/table/table-head.js +9 -0
- package/dist/esm/components/table/table-row.js +9 -0
- package/{esm → dist/esm}/components/table/table.js +3 -6
- package/dist/esm/components/tabs/index.d.ts +4 -0
- package/dist/esm/components/tabs/index.js +4 -0
- package/{esm → dist/esm}/components/tabs/tab-list.js +3 -6
- package/{types → dist/esm}/components/tabs/tab-panel.d.ts +1 -1
- package/dist/esm/components/tabs/tab-panel.js +11 -0
- package/dist/esm/components/tabs/tab.js +14 -0
- package/{types → dist/esm}/components/tabs/tabs-context.d.ts +1 -1
- package/{esm → dist/esm}/components/tabs/tabs-context.js +5 -8
- package/{types → dist/esm}/components/tabs/tabs.d.ts +1 -1
- package/dist/esm/components/tabs/tabs.js +6 -0
- package/dist/esm/components/tabs/types.js +1 -0
- package/dist/esm/components/tag/index.d.ts +1 -0
- package/dist/esm/components/tag/index.js +1 -0
- package/dist/esm/components/tag/tag.d.ts +15 -0
- package/dist/esm/components/tag/tag.js +11 -0
- package/dist/esm/components/text-input/index.d.ts +1 -0
- package/dist/esm/components/text-input/index.js +1 -0
- package/{types → dist/esm}/components/text-input/text-input.d.ts +12 -13
- package/dist/esm/components/text-input/text-input.js +42 -0
- package/dist/esm/components/textarea/index.d.ts +1 -0
- package/dist/esm/components/textarea/index.js +1 -0
- package/dist/esm/components/textarea/textarea.d.ts +12 -0
- package/dist/esm/components/textarea/textarea.js +19 -0
- package/dist/esm/components/toast/index.d.ts +2 -0
- package/dist/esm/components/toast/index.js +2 -0
- package/dist/esm/components/toast/toast-button.js +6 -0
- package/dist/esm/components/toast/toast.js +6 -0
- package/dist/esm/components/toaster/index.d.ts +1 -0
- package/dist/esm/components/toaster/index.js +1 -0
- package/{esm → dist/esm}/components/toaster/toaster.js +9 -13
- package/dist/esm/components/tooltip/index.d.ts +1 -0
- package/dist/esm/components/tooltip/index.js +1 -0
- package/{types → dist/esm}/components/tooltip/tooltip.d.ts +1 -1
- package/{esm → dist/esm}/components/tooltip/tooltip.js +8 -11
- package/dist/esm/hooks/index.d.ts +4 -0
- package/dist/esm/hooks/index.js +4 -0
- package/{esm → dist/esm}/hooks/use-disable-body-scroll.js +1 -4
- package/{esm → dist/esm}/hooks/use-esc-key-down.js +2 -5
- package/{esm → dist/esm}/hooks/use-focus-trap.js +1 -4
- package/{esm → dist/esm}/hooks/use-mount-transition.js +2 -5
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +3 -0
- package/{esm → dist/esm}/lib/helpers.js +3 -5
- package/dist/esm/lib/index.d.ts +3 -0
- package/dist/esm/lib/index.js +3 -0
- package/{esm → dist/esm}/lib/keyboard-keys.js +1 -3
- package/{esm → dist/esm}/lib/react-helpers.js +6 -9
- package/package.json +41 -55
- package/cjs/components/alert/alert.cjs +0 -19
- package/cjs/components/avatar/avatar.cjs +0 -31
- package/cjs/components/avatar-group/avatar-group.cjs +0 -10
- package/cjs/components/badge/badge.cjs +0 -23
- package/cjs/components/breadcrumbs/breadcrumbs-context.cjs +0 -19
- package/cjs/components/breadcrumbs/breadcrumbs-item.cjs +0 -21
- package/cjs/components/breadcrumbs/breadcrumbs.cjs +0 -12
- package/cjs/components/button/button.cjs +0 -41
- package/cjs/components/button/icon-button.cjs +0 -12
- package/cjs/components/button-group/button-group.cjs +0 -10
- package/cjs/components/caption/caption.cjs +0 -27
- package/cjs/components/caption/icons.cjs +0 -21
- package/cjs/components/checkbox/checkbox.cjs +0 -20
- package/cjs/components/color-picker/color-picker-button.cjs +0 -16
- package/cjs/components/color-picker/color-picker.cjs +0 -24
- package/cjs/components/date-picker/calendar-day.cjs +0 -17
- package/cjs/components/date-picker/calendar-grid-head.cjs +0 -16
- package/cjs/components/date-picker/calendar-grid.cjs +0 -106
- package/cjs/components/date-picker/calendar-header.cjs +0 -48
- package/cjs/components/date-picker/calendar.cjs +0 -24
- package/cjs/components/date-picker/date-helpers.cjs +0 -112
- package/cjs/components/date-picker/date-picker.cjs +0 -20
- package/cjs/components/date-picker/date-range-picker.cjs +0 -61
- package/cjs/components/date-picker/date-range.cjs +0 -28
- package/cjs/components/date-picker/icons.cjs +0 -13
- package/cjs/components/date-picker/parse-min-max-props.cjs +0 -20
- package/cjs/components/date-picker-popover/date-picker-popover.cjs +0 -24
- package/cjs/components/date-range-picker-popover/date-range-picker-popover-footer.cjs +0 -11
- package/cjs/components/date-range-picker-popover/date-range-picker-popover-presets.cjs +0 -35
- package/cjs/components/date-range-picker-popover/date-range-picker-popover.cjs +0 -59
- package/cjs/components/date-range-picker-popover/helpers.cjs +0 -15
- package/cjs/components/date-range-picker-popover/use-is-compact-view.cjs +0 -27
- package/cjs/components/dialog/dialog-body.cjs +0 -12
- package/cjs/components/dialog/dialog-context.cjs +0 -24
- package/cjs/components/dialog/dialog-footer.cjs +0 -13
- package/cjs/components/dialog/dialog-header.cjs +0 -21
- package/cjs/components/dialog/dialog.cjs +0 -50
- package/cjs/components/dialog/x-mark-icon.cjs +0 -9
- package/cjs/components/empty-state/empty-state.cjs +0 -10
- package/cjs/components/file-picker/file-picker.cjs +0 -47
- package/cjs/components/filter-buttons/filter-button.cjs +0 -11
- package/cjs/components/filter-buttons/filter-buttons.cjs +0 -27
- package/cjs/components/filtered-search/filter-item.cjs +0 -23
- package/cjs/components/filtered-search/filter-operator-select.cjs +0 -17
- package/cjs/components/filtered-search/filter-token.cjs +0 -17
- package/cjs/components/filtered-search/filter-value-list.cjs +0 -20
- package/cjs/components/filtered-search/filtered-search.cjs +0 -225
- package/cjs/components/filtered-search/icons.cjs +0 -21
- package/cjs/components/filtered-search/model/abstract-filter.cjs +0 -6
- package/cjs/components/filtered-search/model/string-filter.cjs +0 -46
- package/cjs/components/filtered-search/model/string-set-filter.cjs +0 -44
- package/cjs/components/filtered-search/string-filter-input.cjs +0 -17
- package/cjs/components/filtered-search/string-filter-item.cjs +0 -68
- package/cjs/components/filtered-search/string-set-filter-item.cjs +0 -77
- package/cjs/components/filtered-search/use-combobox-ids.cjs +0 -17
- package/cjs/components/filtered-search/use-translations.cjs +0 -24
- package/cjs/components/form-field/form-field.cjs +0 -26
- package/cjs/components/index.cjs +0 -141
- package/cjs/components/label/label.cjs +0 -13
- package/cjs/components/menu/menu-item.cjs +0 -21
- package/cjs/components/menu/menu-separator.cjs +0 -10
- package/cjs/components/menu/menu.cjs +0 -191
- package/cjs/components/nav-list/nav-list-item.cjs +0 -20
- package/cjs/components/nav-list/nav-list-title.cjs +0 -10
- package/cjs/components/nav-list/nav-list.cjs +0 -10
- package/cjs/components/password-input/icons.cjs +0 -13
- package/cjs/components/password-input/password-input.cjs +0 -30
- package/cjs/components/popover/popover.cjs +0 -96
- package/cjs/components/popover/use-page-click.cjs +0 -51
- package/cjs/components/portal/portal-context.cjs +0 -22
- package/cjs/components/portal/portal.cjs +0 -11
- package/cjs/components/positioner/calc-position.cjs +0 -117
- package/cjs/components/positioner/positioner.cjs +0 -64
- package/cjs/components/radio/radio.cjs +0 -28
- package/cjs/components/segmented-control/segmented-control-button.cjs +0 -15
- package/cjs/components/segmented-control/segmented-control.cjs +0 -48
- package/cjs/components/select/select.cjs +0 -39
- package/cjs/components/selection-control/selection-control.cjs +0 -18
- package/cjs/components/slide-over/slide-over-body.cjs +0 -10
- package/cjs/components/slide-over/slide-over-context.cjs +0 -24
- package/cjs/components/slide-over/slide-over-header.cjs +0 -21
- package/cjs/components/slide-over/slide-over.cjs +0 -113
- package/cjs/components/slider/slider-tick-marks.cjs +0 -17
- package/cjs/components/slider/slider.cjs +0 -41
- package/cjs/components/spinner/spinner.cjs +0 -11
- package/cjs/components/switch/switch.cjs +0 -17
- package/cjs/components/table/icons.cjs +0 -17
- package/cjs/components/table/table-body.cjs +0 -11
- package/cjs/components/table/table-cell.cjs +0 -11
- package/cjs/components/table/table-container.cjs +0 -23
- package/cjs/components/table/table-head-cell.cjs +0 -30
- package/cjs/components/table/table-head.cjs +0 -14
- package/cjs/components/table/table-row.cjs +0 -14
- package/cjs/components/table/table.cjs +0 -16
- package/cjs/components/tabs/tab-list.cjs +0 -67
- package/cjs/components/tabs/tab-panel.cjs +0 -16
- package/cjs/components/tabs/tab.cjs +0 -19
- package/cjs/components/tabs/tabs-context.cjs +0 -31
- package/cjs/components/tabs/tabs.cjs +0 -11
- package/cjs/components/tag/tag.cjs +0 -16
- package/cjs/components/text-input/text-input.cjs +0 -42
- package/cjs/components/textarea/textarea.cjs +0 -40
- package/cjs/components/toast/toast-button.cjs +0 -11
- package/cjs/components/toast/toast.cjs +0 -11
- package/cjs/components/toast/x-mark-icon.cjs +0 -9
- package/cjs/components/toaster/toaster.cjs +0 -115
- package/cjs/components/tooltip/tooltip.cjs +0 -75
- package/cjs/hooks/index.cjs +0 -13
- package/cjs/hooks/use-disable-body-scroll.cjs +0 -37
- package/cjs/hooks/use-esc-key-down.cjs +0 -56
- package/cjs/hooks/use-focus-trap.cjs +0 -89
- package/cjs/hooks/use-mount-transition.cjs +0 -41
- package/cjs/index.cjs +0 -161
- package/cjs/lib/helpers.cjs +0 -25
- package/cjs/lib/index.cjs +0 -17
- package/cjs/lib/keyboard-keys.cjs +0 -19
- package/cjs/lib/react-helpers.cjs +0 -58
- package/esm/components/alert/alert.js +0 -17
- package/esm/components/avatar/avatar.js +0 -29
- package/esm/components/avatar-group/avatar-group.js +0 -8
- package/esm/components/breadcrumbs/breadcrumbs-context.js +0 -16
- package/esm/components/breadcrumbs/breadcrumbs-item.js +0 -19
- package/esm/components/breadcrumbs/breadcrumbs.js +0 -10
- package/esm/components/button/button.js +0 -39
- package/esm/components/button/icon-button.js +0 -10
- package/esm/components/button-group/button-group.js +0 -8
- package/esm/components/caption/caption.js +0 -25
- package/esm/components/caption/icons.js +0 -16
- package/esm/components/checkbox/checkbox.js +0 -18
- package/esm/components/color-picker/color-picker-button.js +0 -14
- package/esm/components/date-picker/calendar-grid-head.js +0 -14
- package/esm/components/date-picker/calendar-header.js +0 -46
- package/esm/components/date-picker/calendar.js +0 -22
- package/esm/components/date-picker/date-picker.js +0 -18
- package/esm/components/date-picker/icons.js +0 -10
- package/esm/components/date-picker-popover/date-picker-popover.js +0 -22
- package/esm/components/date-range-picker-popover/date-range-picker-popover-footer.js +0 -9
- package/esm/components/date-range-picker-popover/date-range-picker-popover-presets.js +0 -33
- package/esm/components/dialog/dialog-body.js +0 -10
- package/esm/components/dialog/dialog-footer.js +0 -11
- package/esm/components/dialog/dialog-header.js +0 -19
- package/esm/components/dialog/x-mark-icon.js +0 -7
- package/esm/components/empty-state/empty-state.js +0 -8
- package/esm/components/filter-buttons/filter-button.js +0 -9
- package/esm/components/filtered-search/filter-item.js +0 -21
- package/esm/components/filtered-search/filter-operator-select.js +0 -15
- package/esm/components/filtered-search/filter-token.js +0 -15
- package/esm/components/filtered-search/filter-value-list.js +0 -18
- package/esm/components/filtered-search/icons.js +0 -16
- package/esm/components/filtered-search/model/abstract-filter.js +0 -4
- package/esm/components/filtered-search/string-filter-input.js +0 -15
- package/esm/components/form-field/form-field.js +0 -24
- package/esm/components/index.js +0 -68
- package/esm/components/label/label.js +0 -11
- package/esm/components/menu/menu-item.js +0 -19
- package/esm/components/menu/menu-separator.js +0 -8
- package/esm/components/nav-list/nav-list-item.js +0 -18
- package/esm/components/nav-list/nav-list-title.js +0 -8
- package/esm/components/nav-list/nav-list.js +0 -8
- package/esm/components/password-input/icons.js +0 -10
- package/esm/components/password-input/password-input.js +0 -28
- package/esm/components/radio/radio.js +0 -26
- package/esm/components/segmented-control/segmented-control-button.js +0 -13
- package/esm/components/segmented-control/segmented-control.js +0 -46
- package/esm/components/select/select.js +0 -37
- package/esm/components/selection-control/selection-control.js +0 -16
- package/esm/components/slide-over/slide-over-body.js +0 -8
- package/esm/components/slide-over/slide-over-context.js +0 -21
- package/esm/components/slide-over/slide-over-header.js +0 -19
- package/esm/components/slider/slider-tick-marks.js +0 -15
- package/esm/components/spinner/spinner.js +0 -9
- package/esm/components/switch/switch.js +0 -15
- package/esm/components/table/icons.js +0 -13
- package/esm/components/table/table-body.js +0 -9
- package/esm/components/table/table-cell.js +0 -9
- package/esm/components/table/table-head-cell.js +0 -28
- package/esm/components/table/table-head.js +0 -12
- package/esm/components/table/table-row.js +0 -12
- package/esm/components/tabs/tab-panel.js +0 -14
- package/esm/components/tabs/tab.js +0 -17
- package/esm/components/tabs/tabs.js +0 -9
- package/esm/components/tag/tag.js +0 -14
- package/esm/components/text-input/text-input.js +0 -40
- package/esm/components/textarea/textarea.js +0 -38
- package/esm/components/toast/toast-button.js +0 -9
- package/esm/components/toast/toast.js +0 -9
- package/esm/components/toast/x-mark-icon.js +0 -7
- package/esm/hooks/index.js +0 -4
- package/esm/index.js +0 -75
- package/esm/lib/index.js +0 -3
- package/types/components/alert/alert.d.ts +0 -12
- package/types/components/alert/index.d.ts +0 -1
- package/types/components/avatar/index.d.ts +0 -1
- package/types/components/avatar-group/index.d.ts +0 -1
- package/types/components/badge/index.d.ts +0 -1
- package/types/components/breadcrumbs/index.d.ts +0 -2
- package/types/components/button/icon-button.d.ts +0 -7
- package/types/components/button/index.d.ts +0 -2
- package/types/components/button-group/index.d.ts +0 -1
- package/types/components/caption/caption.d.ts +0 -7
- package/types/components/caption/icons.d.ts +0 -5
- package/types/components/caption/index.d.ts +0 -1
- package/types/components/checkbox/index.d.ts +0 -1
- package/types/components/color-picker/index.d.ts +0 -1
- package/types/components/date-picker/icons.d.ts +0 -3
- package/types/components/date-picker/index.d.ts +0 -2
- package/types/components/date-picker-popover/index.d.ts +0 -1
- package/types/components/date-range-picker-popover/index.d.ts +0 -2
- package/types/components/dialog/index.d.ts +0 -4
- package/types/components/dialog/x-mark-icon.d.ts +0 -2
- package/types/components/empty-state/empty-state.d.ts +0 -11
- package/types/components/empty-state/index.d.ts +0 -1
- package/types/components/file-picker/index.d.ts +0 -1
- package/types/components/filter-buttons/index.d.ts +0 -2
- package/types/components/filtered-search/icons.d.ts +0 -5
- package/types/components/form-field/index.d.ts +0 -1
- package/types/components/index.d.ts +0 -42
- package/types/components/label/index.d.ts +0 -1
- package/types/components/menu/index.d.ts +0 -3
- package/types/components/nav-list/index.d.ts +0 -3
- package/types/components/password-input/icons.d.ts +0 -3
- package/types/components/password-input/index.d.ts +0 -1
- package/types/components/password-input/password-input.d.ts +0 -10
- package/types/components/popover/index.d.ts +0 -1
- package/types/components/portal/index.d.ts +0 -1
- package/types/components/positioner/index.d.ts +0 -1
- package/types/components/radio/index.d.ts +0 -1
- package/types/components/segmented-control/index.d.ts +0 -1
- package/types/components/segmented-control/segmented-control-button.d.ts +0 -10
- package/types/components/select/index.d.ts +0 -1
- package/types/components/selection-control/index.d.ts +0 -1
- package/types/components/slider/index.d.ts +0 -2
- package/types/components/spinner/index.d.ts +0 -1
- package/types/components/switch/index.d.ts +0 -1
- package/types/components/table/icons.d.ts +0 -4
- package/types/components/table/index.d.ts +0 -7
- package/types/components/tabs/index.d.ts +0 -4
- package/types/components/tag/index.d.ts +0 -1
- package/types/components/tag/tag.d.ts +0 -18
- package/types/components/text-input/index.d.ts +0 -1
- package/types/components/textarea/index.d.ts +0 -1
- package/types/components/textarea/textarea.d.ts +0 -20
- package/types/components/toast/index.d.ts +0 -2
- package/types/components/toast/x-mark-icon.d.ts +0 -2
- package/types/components/toaster/index.d.ts +0 -1
- package/types/components/tooltip/index.d.ts +0 -1
- package/types/hooks/index.d.ts +0 -4
- package/types/index.d.ts +0 -3
- package/types/lib/index.d.ts +0 -3
- /package/{css → dist/css}/draft-components-utilities.css +0 -0
- /package/{types → dist/esm}/components/avatar-group/avatar-group.d.ts +0 -0
- /package/{types → dist/esm}/components/badge/badge.d.ts +0 -0
- /package/{types → dist/esm}/components/breadcrumbs/breadcrumbs-context.d.ts +0 -0
- /package/{types → dist/esm}/components/breadcrumbs/breadcrumbs-item.d.ts +0 -0
- /package/{types → dist/esm}/components/breadcrumbs/breadcrumbs.d.ts +0 -0
- /package/{types → dist/esm}/components/button-group/button-group.d.ts +0 -0
- /package/{types → dist/esm}/components/checkbox/checkbox.d.ts +0 -0
- /package/{types → dist/esm}/components/color-picker/color-picker-button.d.ts +0 -0
- /package/{types → dist/esm}/components/color-picker/color-picker.d.ts +0 -0
- /package/{types → dist/esm}/components/date-picker/calendar-day.d.ts +0 -0
- /package/{types → dist/esm}/components/date-picker/calendar-header.d.ts +0 -0
- /package/{types → dist/esm}/components/date-picker/date-helpers.d.ts +0 -0
- /package/{types → dist/esm}/components/date-range-picker-popover/date-range-picker-popover-footer.d.ts +0 -0
- /package/{types → dist/esm}/components/date-range-picker-popover/use-is-compact-view.d.ts +0 -0
- /package/{types → dist/esm}/components/dialog/dialog-body.d.ts +0 -0
- /package/{types → dist/esm}/components/dialog/dialog-context.d.ts +0 -0
- /package/{types → dist/esm}/components/dialog/dialog-footer.d.ts +0 -0
- /package/{types → dist/esm}/components/dialog/dialog-header.d.ts +0 -0
- /package/{types → dist/esm}/components/dialog/dialog.d.ts +0 -0
- /package/{types → dist/esm}/components/file-picker/file-picker.d.ts +0 -0
- /package/{types → dist/esm}/components/filter-buttons/filter-button.d.ts +0 -0
- /package/{types → dist/esm}/components/filter-buttons/filter-buttons.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/filter-operator-select.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/filter-token.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/filter-value-list.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/model/abstract-filter.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/model/validation-result.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/string-filter-input.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/use-combobox-ids.d.ts +0 -0
- /package/{types → dist/esm}/components/filtered-search/use-translations.d.ts +0 -0
- /package/{types → dist/esm}/components/label/label.d.ts +0 -0
- /package/{types → dist/esm}/components/menu/menu-separator.d.ts +0 -0
- /package/{types → dist/esm}/components/nav-list/nav-list-item.d.ts +0 -0
- /package/{types → dist/esm}/components/nav-list/nav-list-title.d.ts +0 -0
- /package/{types → dist/esm}/components/nav-list/nav-list.d.ts +0 -0
- /package/{types → dist/esm}/components/popover/use-page-click.d.ts +0 -0
- /package/{types → dist/esm}/components/portal/portal-context.d.ts +0 -0
- /package/{types → dist/esm}/components/portal/portal.d.ts +0 -0
- /package/{types → dist/esm}/components/positioner/types.d.ts +0 -0
- /package/{types → dist/esm}/components/radio/radio.d.ts +0 -0
- /package/{types → dist/esm}/components/selection-control/selection-control.d.ts +0 -0
- /package/{types → dist/esm}/components/slide-over/slide-over-body.d.ts +0 -0
- /package/{types → dist/esm}/components/slide-over/slide-over-header.d.ts +0 -0
- /package/{types → dist/esm}/components/slide-over/types.d.ts +0 -0
- /package/{types → dist/esm}/components/slider/slider-tick-marks.d.ts +0 -0
- /package/{types → dist/esm}/components/spinner/spinner.d.ts +0 -0
- /package/{types → dist/esm}/components/switch/switch.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table-body.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table-cell.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table-container.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table-head.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table-row.d.ts +0 -0
- /package/{types → dist/esm}/components/table/table.d.ts +0 -0
- /package/{types → dist/esm}/components/tabs/tab-list.d.ts +0 -0
- /package/{types → dist/esm}/components/tabs/tab.d.ts +0 -0
- /package/{types → dist/esm}/components/tabs/types.d.ts +0 -0
- /package/{types → dist/esm}/components/toast/toast-button.d.ts +0 -0
- /package/{types → dist/esm}/components/toast/toast.d.ts +0 -0
- /package/{types → dist/esm}/components/toaster/toaster.d.ts +0 -0
- /package/{types → dist/esm}/hooks/use-disable-body-scroll.d.ts +0 -0
- /package/{types → dist/esm}/hooks/use-esc-key-down.d.ts +0 -0
- /package/{types → dist/esm}/hooks/use-focus-trap.d.ts +0 -0
- /package/{types → dist/esm}/hooks/use-mount-transition.d.ts +0 -0
- /package/{types → dist/esm}/lib/helpers.d.ts +0 -0
- /package/{types → dist/esm}/lib/keyboard-keys.d.ts +0 -0
- /package/{types → dist/esm}/lib/react-helpers.d.ts +0 -0
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import { jsx } from
|
|
2
|
-
import { useRef, useState
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { assertIfNullable } from '../../lib/helpers.js';
|
|
4
4
|
import { classNames } from '../../lib/react-helpers.js';
|
|
5
|
-
import { Portal } from '../portal/
|
|
6
|
-
import { Toast } from '../toast/
|
|
7
|
-
import { ToastButton } from '../toast/toast-button.js';
|
|
8
|
-
|
|
5
|
+
import { Portal } from '../portal/index.js';
|
|
6
|
+
import { Toast, ToastButton } from '../toast/index.js';
|
|
9
7
|
const TOAST_SHOW_EVENT = 'toast_show';
|
|
10
8
|
const isToastShowEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_SHOW_EVENT);
|
|
11
9
|
const TOAST_HIDE_EVENT = 'toast_hide';
|
|
12
10
|
const isToastHideEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_HIDE_EVENT);
|
|
13
|
-
class Toaster {
|
|
11
|
+
export class Toaster {
|
|
14
12
|
constructor(params) {
|
|
15
13
|
this._id = 0;
|
|
16
14
|
this.timeoutMs = params?.timeoutMs || 10000;
|
|
@@ -46,7 +44,7 @@ class Toaster {
|
|
|
46
44
|
window.dispatchEvent(event);
|
|
47
45
|
}
|
|
48
46
|
render(options) {
|
|
49
|
-
return (
|
|
47
|
+
return (_jsx(ToastsList, { toaster: this, toastGap: options?.toastGap, toastPosition: options?.toastPosition, toastCloseButtonAriaLabel: options?.toastCloseButtonAriaLabel }));
|
|
50
48
|
}
|
|
51
49
|
}
|
|
52
50
|
function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toastCloseButtonAriaLabel = 'Close', }) {
|
|
@@ -95,19 +93,17 @@ function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toas
|
|
|
95
93
|
}
|
|
96
94
|
}
|
|
97
95
|
}, [toasts, toastGap, toastPosition]);
|
|
98
|
-
return (
|
|
96
|
+
return (_jsx(Portal, { children: _jsx("ul", { ref: ref, className: classNames({
|
|
99
97
|
'dc-toasts-list': true,
|
|
100
98
|
[`dc-toasts-list_${toastPosition}`]: toastPosition,
|
|
101
99
|
}), children: toasts.map((toast) => {
|
|
102
100
|
const hideToast = () => toaster.hideToast(toast.id);
|
|
103
|
-
const actions = toast.actions?.map((action, index) => (
|
|
101
|
+
const actions = toast.actions?.map((action, index) => (_jsx(ToastButton, { onClick: () => {
|
|
104
102
|
action.onClick?.();
|
|
105
103
|
if (action.shouldHideAfterClick ?? true) {
|
|
106
104
|
hideToast();
|
|
107
105
|
}
|
|
108
106
|
}, children: action.content }, index)));
|
|
109
|
-
return (
|
|
107
|
+
return (_jsx("li", { children: _jsx(Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast.icon, message: toast.message, actions: actions, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast.title }) }, toast.id));
|
|
110
108
|
}) }) }));
|
|
111
109
|
}
|
|
112
|
-
|
|
113
|
-
export { Toaster };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './tooltip.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './tooltip.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
|
|
2
|
-
import { PositionerProps } from '../positioner';
|
|
2
|
+
import { PositionerProps } from '../positioner/index.js';
|
|
3
3
|
type TooltipChildrenRenderFn = (props: {
|
|
4
4
|
ref: RefCallback<HTMLElement>;
|
|
5
5
|
}, context: {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { jsx } from
|
|
2
|
-
import {
|
|
3
|
-
import { isReactElementWithRef, mergeRefs
|
|
4
|
-
import { useMountTransition } from '../../hooks/
|
|
5
|
-
import { Positioner } from '../positioner/
|
|
6
|
-
|
|
7
|
-
function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, htmlContent, content, children, ...props }) {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cloneElement, useId, useMemo, useState, } from 'react';
|
|
3
|
+
import { classNames, isReactElementWithRef, mergeRefs } from '../../lib/react-helpers.js';
|
|
4
|
+
import { useMountTransition } from '../../hooks/index.js';
|
|
5
|
+
import { Positioner } from '../positioner/index.js';
|
|
6
|
+
export function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, htmlContent, content, children, ...props }) {
|
|
8
7
|
const [defaultShow, setDefaultShow] = useState(props.defaultIsShown ?? false);
|
|
9
8
|
const defaultId = useId();
|
|
10
9
|
const tooltipId = props.id || defaultId;
|
|
@@ -60,14 +59,12 @@ function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style
|
|
|
60
59
|
if (isShown || isMounted) {
|
|
61
60
|
delete props.defaultIsShown;
|
|
62
61
|
delete props.isShown;
|
|
63
|
-
return (
|
|
62
|
+
return (_jsx("div", { ...props, ref: portalRef, id: tooltipId, style: {
|
|
64
63
|
'--dc-tooltip-transition-duration': `${durationMs}ms`,
|
|
65
64
|
...portalStyle,
|
|
66
65
|
...style,
|
|
67
66
|
}, className: classNames('dc-tooltip', transitionClass, className), content: htmlContent, role: "tooltip", children: content }));
|
|
68
67
|
}
|
|
69
68
|
};
|
|
70
|
-
return (
|
|
69
|
+
return (_jsx(Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));
|
|
71
70
|
}
|
|
72
|
-
|
|
73
|
-
export { Tooltip };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { once } from '../lib/helpers.js';
|
|
3
|
-
|
|
4
|
-
function useDisableBodyScroll(options = {
|
|
3
|
+
export function useDisableBodyScroll(options = {
|
|
5
4
|
isEnabled: true,
|
|
6
5
|
}) {
|
|
7
6
|
useEffect(() => {
|
|
@@ -31,5 +30,3 @@ function disableBodyScroll() {
|
|
|
31
30
|
}
|
|
32
31
|
});
|
|
33
32
|
}
|
|
34
|
-
|
|
35
|
-
export { useDisableBodyScroll };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
2
|
import { KeyboardKeys } from '../lib/keyboard-keys.js';
|
|
3
|
-
|
|
4
3
|
const handlers = [];
|
|
5
4
|
/**
|
|
6
5
|
* Invokes a given handler when the `Esc` key was pressed.
|
|
@@ -13,7 +12,7 @@ const handlers = [];
|
|
|
13
12
|
* @param options.isEnabled A flag that determines whether to run
|
|
14
13
|
* the passed handler or not.
|
|
15
14
|
*/
|
|
16
|
-
function useEscKeyDown(handler, options = {
|
|
15
|
+
export function useEscKeyDown(handler, options = {
|
|
17
16
|
isEnabled: true,
|
|
18
17
|
}) {
|
|
19
18
|
const handlerRef = useRef(handler);
|
|
@@ -50,5 +49,3 @@ function useEscKeyDown(handler, options = {
|
|
|
50
49
|
};
|
|
51
50
|
}, [isEnabled]);
|
|
52
51
|
}
|
|
53
|
-
|
|
54
|
-
export { useEscKeyDown };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { KeyboardKeys } from '../lib/keyboard-keys.js';
|
|
3
3
|
import { focusElement } from '../lib/react-helpers.js';
|
|
4
|
-
|
|
5
4
|
const modals = [];
|
|
6
5
|
const focusableElementsSelector = [
|
|
7
6
|
'a[href]',
|
|
@@ -24,7 +23,7 @@ const focusableElementsSelector = [
|
|
|
24
23
|
* @param {boolean} options.isEnabled - A flag that determines whether
|
|
25
24
|
* to trap focus or not.
|
|
26
25
|
*/
|
|
27
|
-
function useFocusTrap(modalRef, options = {
|
|
26
|
+
export function useFocusTrap(modalRef, options = {
|
|
28
27
|
isEnabled: true,
|
|
29
28
|
}) {
|
|
30
29
|
const isEnabled = options.isEnabled;
|
|
@@ -83,5 +82,3 @@ function useFocusTrap(modalRef, options = {
|
|
|
83
82
|
};
|
|
84
83
|
}, [isEnabled, modalRef]);
|
|
85
84
|
}
|
|
86
|
-
|
|
87
|
-
export { useFocusTrap };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { classNames } from '../lib/react-helpers.js';
|
|
3
|
-
|
|
4
|
-
function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
|
|
3
|
+
export function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
|
|
5
4
|
const [isMounted, setIsMounted] = useState(isShown);
|
|
6
5
|
const [hasEnterToClass, setHasEnterToClass] = useState(false);
|
|
7
6
|
const firstMount = useRef(true);
|
|
@@ -35,5 +34,3 @@ function useMountTransition({ animateFirstMount = false, isShown, durationMs, en
|
|
|
35
34
|
: classNames(enterFrom, hasEnterToClass && enterTo),
|
|
36
35
|
};
|
|
37
36
|
}
|
|
38
|
-
|
|
39
|
-
export { useMountTransition };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function once(fn) {
|
|
1
|
+
export function once(fn) {
|
|
2
2
|
let called = false;
|
|
3
3
|
let result;
|
|
4
4
|
return (...args) => {
|
|
@@ -9,13 +9,11 @@ function once(fn) {
|
|
|
9
9
|
return result;
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
|
-
function exhaustiveCheck(value, message) {
|
|
12
|
+
export function exhaustiveCheck(value, message) {
|
|
13
13
|
throw new Error(message);
|
|
14
14
|
}
|
|
15
|
-
function assertIfNullable(value, message = 'assertIfNullable: value is null or undefined.') {
|
|
15
|
+
export function assertIfNullable(value, message = 'assertIfNullable: value is null or undefined.') {
|
|
16
16
|
if (value == null) {
|
|
17
17
|
throw Error(message);
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
export { assertIfNullable, exhaustiveCheck, once };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { isValidElement } from 'react';
|
|
2
|
-
|
|
3
|
-
function classNames(...classes) {
|
|
1
|
+
import { isValidElement, } from 'react';
|
|
2
|
+
export function classNames(...classes) {
|
|
4
3
|
let resultString = '';
|
|
5
4
|
for (const className of classes) {
|
|
6
5
|
if (!className) {
|
|
@@ -19,7 +18,7 @@ function classNames(...classes) {
|
|
|
19
18
|
}
|
|
20
19
|
return resultString.trimEnd();
|
|
21
20
|
}
|
|
22
|
-
function mergeRefs(...refs) {
|
|
21
|
+
export function mergeRefs(...refs) {
|
|
23
22
|
return (instance) => {
|
|
24
23
|
for (const ref of refs) {
|
|
25
24
|
if (ref != null) {
|
|
@@ -33,20 +32,18 @@ function mergeRefs(...refs) {
|
|
|
33
32
|
}
|
|
34
33
|
};
|
|
35
34
|
}
|
|
36
|
-
function isReactElementWithRef(element) {
|
|
35
|
+
export function isReactElementWithRef(element) {
|
|
37
36
|
return isValidElement(element) && 'ref' in element;
|
|
38
37
|
}
|
|
39
|
-
function focusElement(element) {
|
|
38
|
+
export function focusElement(element) {
|
|
40
39
|
if (element != null && element instanceof HTMLElement) {
|
|
41
40
|
element.focus();
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
|
-
function getRefElement(ref, message = 'getElementFromRef: ref value is null.') {
|
|
43
|
+
export function getRefElement(ref, message = 'getElementFromRef: ref value is null.') {
|
|
45
44
|
const value = ref.current;
|
|
46
45
|
if (value == null) {
|
|
47
46
|
throw new Error(message);
|
|
48
47
|
}
|
|
49
48
|
return value;
|
|
50
49
|
}
|
|
51
|
-
|
|
52
|
-
export { classNames, focusElement, getRefElement, isReactElementWithRef, mergeRefs };
|
package/package.json
CHANGED
|
@@ -1,36 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "draft-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "The React based UI components library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"types": "./
|
|
9
|
-
"import": "./esm/index.js"
|
|
10
|
-
"require": "./cjs/index.cjs"
|
|
8
|
+
"types": "./dist/esm/index.d.ts",
|
|
9
|
+
"import": "./dist/esm/index.js"
|
|
11
10
|
},
|
|
12
|
-
"./css/*":
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
"./css/*": "./dist/css/*"
|
|
12
|
+
},
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">= 16"
|
|
16
15
|
},
|
|
17
|
-
"module": "./esm/index.js",
|
|
18
|
-
"main": "./cjs/index.cjs",
|
|
19
|
-
"types": "./types/index.d.ts",
|
|
20
16
|
"files": [
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"css",
|
|
24
|
-
"types"
|
|
17
|
+
"dist/esm",
|
|
18
|
+
"dist/css"
|
|
25
19
|
],
|
|
26
20
|
"scripts": {
|
|
27
21
|
"prepare": "husky install",
|
|
28
|
-
"test": "
|
|
29
|
-
"coverage": "
|
|
30
|
-
"lint": "
|
|
31
|
-
"lint-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
22
|
+
"test": "vitest run",
|
|
23
|
+
"coverage": "vitest run --coverage",
|
|
24
|
+
"lint": "npm run lint-js && npm run lint-css",
|
|
25
|
+
"lint-js": "eslint '**/*.{js,ts,tsx}'",
|
|
26
|
+
"lint-css": "stylelint 'src/**/*.css'",
|
|
27
|
+
"typecheck": "tsc --project 'tsconfig.json' --noEmit",
|
|
28
|
+
"prebuild": "npm run typecheck && npm run lint && npm run test",
|
|
34
29
|
"build": "node scripts/build.js",
|
|
35
30
|
"build-storybook": "storybook build",
|
|
36
31
|
"preversion": "npm run build",
|
|
@@ -57,55 +52,46 @@
|
|
|
57
52
|
},
|
|
58
53
|
"devDependencies": {
|
|
59
54
|
"@alexzimakov/eslint-config": "1.6.0",
|
|
60
|
-
"@babel/core": "7.22.9",
|
|
61
|
-
"@babel/preset-env": "7.22.9",
|
|
62
|
-
"@babel/preset-react": "7.22.5",
|
|
63
|
-
"@babel/preset-typescript": "7.22.5",
|
|
64
55
|
"@heroicons/react": "2.0.18",
|
|
65
|
-
"@
|
|
66
|
-
"@storybook/addon-
|
|
67
|
-
"@storybook/addon-
|
|
68
|
-
"@storybook/
|
|
69
|
-
"@storybook/react": "7.
|
|
70
|
-
"@storybook/react-vite": "7.1.1",
|
|
56
|
+
"@storybook/addon-actions": "7.4.0",
|
|
57
|
+
"@storybook/addon-essentials": "7.4.0",
|
|
58
|
+
"@storybook/addon-links": "7.4.0",
|
|
59
|
+
"@storybook/react": "7.4.0",
|
|
60
|
+
"@storybook/react-vite": "7.4.0",
|
|
71
61
|
"@testing-library/dom": "9.3.1",
|
|
72
|
-
"@testing-library/jest-dom": "
|
|
62
|
+
"@testing-library/jest-dom": "6.1.2",
|
|
73
63
|
"@testing-library/react": "14.0.0",
|
|
74
64
|
"@testing-library/user-event": "14.4.3",
|
|
75
|
-
"@types/
|
|
76
|
-
"@types/
|
|
77
|
-
"@types/react": "18.2.16",
|
|
65
|
+
"@types/node": "18.17.12",
|
|
66
|
+
"@types/react": "18.2.21",
|
|
78
67
|
"@types/react-dom": "18.2.7",
|
|
79
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
80
|
-
"@typescript-eslint/parser": "6.
|
|
81
|
-
"
|
|
82
|
-
"
|
|
68
|
+
"@typescript-eslint/eslint-plugin": "6.5.0",
|
|
69
|
+
"@typescript-eslint/parser": "6.5.0",
|
|
70
|
+
"@vitest/coverage-istanbul": "0.34.3",
|
|
71
|
+
"autoprefixer": "10.4.15",
|
|
72
|
+
"eslint": "8.48.0",
|
|
83
73
|
"eslint-plugin-jsx-a11y": "6.7.1",
|
|
84
|
-
"eslint-plugin-react": "7.33.
|
|
74
|
+
"eslint-plugin-react": "7.33.2",
|
|
85
75
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
86
76
|
"eslint-plugin-storybook": "0.6.13",
|
|
87
|
-
"eslint-plugin-testing-library": "
|
|
77
|
+
"eslint-plugin-testing-library": "6.0.1",
|
|
88
78
|
"husky": "8.0.3",
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"postcss": "8.4.27",
|
|
79
|
+
"jsdom": "22.1.0",
|
|
80
|
+
"lint-staged": "14.0.1",
|
|
81
|
+
"postcss": "8.4.29",
|
|
93
82
|
"postcss-import": "15.1.0",
|
|
94
83
|
"react": "18.2.0",
|
|
95
84
|
"react-dom": "18.2.0",
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"stylelint": "15.10.2",
|
|
85
|
+
"storybook": "7.4.0",
|
|
86
|
+
"stylelint": "15.10.3",
|
|
99
87
|
"stylelint-config-standard": "34.0.0",
|
|
100
88
|
"stylelint-order": "6.0.3",
|
|
101
|
-
"typescript": "5.
|
|
102
|
-
"vite": "4.4.
|
|
89
|
+
"typescript": "5.2.2",
|
|
90
|
+
"vite": "4.4.9",
|
|
91
|
+
"vitest": "0.34.3"
|
|
103
92
|
},
|
|
104
93
|
"lint-staged": {
|
|
105
|
-
"*.ts?(x)": "npm run lint",
|
|
106
|
-
"*.css": "npm run lint-
|
|
107
|
-
},
|
|
108
|
-
"engines": {
|
|
109
|
-
"node": ">= 14.16"
|
|
94
|
+
"*.ts?(x)": "npm run lint-js",
|
|
95
|
+
"*.css": "npm run lint-css"
|
|
110
96
|
}
|
|
111
97
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const react = require('react');
|
|
5
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
6
|
-
|
|
7
|
-
const Alert = react.forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }, ref) {
|
|
8
|
-
const shouldShowIcon = Boolean(icon);
|
|
9
|
-
const shouldRenderHeading = Boolean(heading);
|
|
10
|
-
const shouldRenderContent = Boolean(children);
|
|
11
|
-
return (jsxRuntime.jsxs("div", { ...props, ref: ref, className: reactHelpers.classNames(className, {
|
|
12
|
-
'dc-alert': true,
|
|
13
|
-
'dc-alert_has_icon': shouldShowIcon,
|
|
14
|
-
[`dc-alert_variant_${variant}`]: variant,
|
|
15
|
-
[`dc-alert_appearance_${appearance}`]: appearance,
|
|
16
|
-
}), children: [shouldShowIcon && jsxRuntime.jsx("div", { className: "dc-alert__icon", children: icon }), jsxRuntime.jsxs("div", { className: "dc-alert__body", children: [shouldRenderHeading && (jsxRuntime.jsx("h1", { className: "dc-alert__title", children: heading })), shouldRenderContent && (jsxRuntime.jsx("div", { className: "dc-alert__content", children: children }))] })] }));
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
exports.Alert = Alert;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const react = require('react');
|
|
5
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
6
|
-
|
|
7
|
-
const avatarSizesPx = {
|
|
8
|
-
xs: 24,
|
|
9
|
-
sm: 32,
|
|
10
|
-
md: 40,
|
|
11
|
-
lg: 48,
|
|
12
|
-
xl: 56,
|
|
13
|
-
};
|
|
14
|
-
const Avatar = react.forwardRef(function Avatar({ isSquare = false, hasInnerShadow = false, size = 'md', fill = 'gray', src, alt, placeholder, className, ...props }, ref) {
|
|
15
|
-
let content;
|
|
16
|
-
if (!src && placeholder) {
|
|
17
|
-
content = (jsxRuntime.jsx("div", { className: "dc-avatar__placeholder", "aria-label": alt, children: placeholder }));
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
const sizePx = avatarSizesPx[size];
|
|
21
|
-
content = (jsxRuntime.jsx("img", { className: "dc-avatar__image", src: src, alt: alt, width: sizePx, height: sizePx }));
|
|
22
|
-
}
|
|
23
|
-
return (jsxRuntime.jsx("div", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-avatar', {
|
|
24
|
-
[`dc-avatar_size_${size}`]: size,
|
|
25
|
-
[`dc-avatar_fill_${fill}`]: fill,
|
|
26
|
-
'dc-avatar_square': isSquare,
|
|
27
|
-
'dc-avatar_has_inner-shadow': hasInnerShadow,
|
|
28
|
-
}), children: content }));
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
exports.Avatar = Avatar;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
5
|
-
|
|
6
|
-
function AvatarGroup({ className, children, ...props }) {
|
|
7
|
-
return (jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames(className, 'dc-avatar-group'), children: children }));
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
exports.AvatarGroup = AvatarGroup;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
5
|
-
|
|
6
|
-
function Badge({ className, children, ...props }) {
|
|
7
|
-
let isCircle;
|
|
8
|
-
if (typeof children === 'number' && children > 0 && children < 10) {
|
|
9
|
-
isCircle = true;
|
|
10
|
-
}
|
|
11
|
-
else if (typeof children === 'string' && children.length === 1) {
|
|
12
|
-
isCircle = true;
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
15
|
-
isCircle = !children;
|
|
16
|
-
}
|
|
17
|
-
return (jsxRuntime.jsx("span", { ...props, className: reactHelpers.classNames(className, {
|
|
18
|
-
'dc-badge': true,
|
|
19
|
-
'dc-badge_circle': isCircle,
|
|
20
|
-
}), children: children }));
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.Badge = Badge;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const react = require('react');
|
|
5
|
-
|
|
6
|
-
const BreadcrumbsContext = react.createContext(null);
|
|
7
|
-
function useBreadcrumbsContext() {
|
|
8
|
-
const context = react.useContext(BreadcrumbsContext);
|
|
9
|
-
if (!context) {
|
|
10
|
-
throw new Error('useBreadcrumbsContext must be used withing BreadcrumbsContextProvider');
|
|
11
|
-
}
|
|
12
|
-
return context;
|
|
13
|
-
}
|
|
14
|
-
function BreadcrumbsContextProvider(props) {
|
|
15
|
-
return (jsxRuntime.jsx(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
exports.BreadcrumbsContextProvider = BreadcrumbsContextProvider;
|
|
19
|
-
exports.useBreadcrumbsContext = useBreadcrumbsContext;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
5
|
-
const breadcrumbsContext = require('./breadcrumbs-context.cjs');
|
|
6
|
-
|
|
7
|
-
function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
|
|
8
|
-
const { separator } = breadcrumbsContext.useBreadcrumbsContext();
|
|
9
|
-
className = reactHelpers.classNames('dc-breadcrumbs-item__link', className);
|
|
10
|
-
children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon != null && jsxRuntime.jsx("div", { className: "dc-breadcrumbs-item__icon", children: icon }), jsxRuntime.jsx("div", { className: "dc-breadcrumbs-item__text", children: children })] }));
|
|
11
|
-
let content;
|
|
12
|
-
if (typeof renderAs === 'function') {
|
|
13
|
-
content = renderAs({ className, children });
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
content = jsxRuntime.jsx("a", { ...props, className: className, children: children });
|
|
17
|
-
}
|
|
18
|
-
return (jsxRuntime.jsxs("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && (jsxRuntime.jsx("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
exports.BreadcrumbsItem = BreadcrumbsItem;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
5
|
-
const breadcrumbsContext = require('./breadcrumbs-context.cjs');
|
|
6
|
-
|
|
7
|
-
const defaultSeparator = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: jsxRuntime.jsx("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
|
|
8
|
-
function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
|
|
9
|
-
return (jsxRuntime.jsx(breadcrumbsContext.BreadcrumbsContextProvider, { separator: separator, children: jsxRuntime.jsx("nav", { ...props, className: reactHelpers.classNames('dc-breadcrumbs', className), children: jsxRuntime.jsx("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
exports.Breadcrumbs = Breadcrumbs;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const react = require('react');
|
|
5
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
6
|
-
const spinner = require('../spinner/spinner.cjs');
|
|
7
|
-
|
|
8
|
-
const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', leftIcon = null, rightIcon = null, caption = null, renderAs, className, children, ...props }, ref) {
|
|
9
|
-
let addOnLeft = null;
|
|
10
|
-
if (loading) {
|
|
11
|
-
addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
|
|
12
|
-
}
|
|
13
|
-
else if (leftIcon) {
|
|
14
|
-
addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: leftIcon }));
|
|
15
|
-
}
|
|
16
|
-
let addOnRight = null;
|
|
17
|
-
if (rightIcon) {
|
|
18
|
-
addOnRight = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: rightIcon }));
|
|
19
|
-
}
|
|
20
|
-
const shouldRenderLabel = Boolean(children);
|
|
21
|
-
const shouldRenderCaption = Boolean(caption);
|
|
22
|
-
const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxRuntime.jsxs("span", { className: "dc-button__body", children: [jsxRuntime.jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsxRuntime.jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
|
|
23
|
-
className = reactHelpers.classNames(className, {
|
|
24
|
-
'dc-button': true,
|
|
25
|
-
'dc-button_block': isBlock,
|
|
26
|
-
'dc-button_loading': loading,
|
|
27
|
-
'dc-button_has_caption': shouldRenderCaption,
|
|
28
|
-
[`dc-button_${size}`]: size,
|
|
29
|
-
[`dc-button_appearance_${appearance}`]: appearance,
|
|
30
|
-
[`dc-button_variant_${variant}`]: variant,
|
|
31
|
-
});
|
|
32
|
-
if (typeof renderAs === 'function') {
|
|
33
|
-
return renderAs({
|
|
34
|
-
className,
|
|
35
|
-
children: content,
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
return (jsxRuntime.jsx("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: content }));
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
exports.Button = Button;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const react = require('react');
|
|
5
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
6
|
-
const button = require('./button.cjs');
|
|
7
|
-
|
|
8
|
-
const IconButton = react.forwardRef(function IconButton({ className, icon, ...props }, ref) {
|
|
9
|
-
return jsxRuntime.jsx(button.Button, { ...props, ref: ref, leftIcon: icon, className: reactHelpers.classNames('dc-button_icon-only', className) });
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
exports.IconButton = IconButton;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
const reactHelpers = require('../../lib/react-helpers.cjs');
|
|
5
|
-
|
|
6
|
-
function ButtonGroup({ className, children, ...props }) {
|
|
7
|
-
return (jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames(className, 'dc-button-group'), children: children }));
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
exports.ButtonGroup = ButtonGroup;
|