@reykjavik/hanna-react 0.10.57 → 0.10.60
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/AccordionList.js +3 -28
- package/ActionCards.d.ts +1 -1
- package/ActionCards.js +4 -6
- package/Alert.js +5 -30
- package/ArticleCards.d.ts +6 -0
- package/ArticleCards.js +7 -0
- package/ArticleCarousel/_ArticleCarouselCard.d.ts +1 -1
- package/ArticleCarousel/_ArticleCarouselCard.js +8 -10
- package/ArticleCarousel.js +3 -5
- package/ArticleMeta.d.ts +1 -0
- package/ArticleMeta.js +7 -28
- package/Attention.js +3 -5
- package/BasicTable.js +5 -7
- package/{esm/CenterColumn.d.ts → BgBox.d.ts} +4 -3
- package/BgBox.js +12 -0
- package/Bling.js +3 -5
- package/BlockBreak.js +2 -4
- package/BlockQuote.js +2 -4
- package/BreadCrumbs.js +4 -6
- package/ButtonBack.d.ts +1 -1
- package/ButtonBack.js +4 -6
- package/ButtonBar.js +3 -5
- package/ButtonPrimary.d.ts +1 -1
- package/ButtonPrimary.js +4 -6
- package/ButtonSecondary.d.ts +1 -1
- package/ButtonSecondary.js +4 -6
- package/ButtonTertiary.d.ts +1 -1
- package/ButtonTertiary.js +4 -6
- package/CHANGELOG.md +20 -1
- package/Carousel.js +3 -5
- package/CarouselStepper.js +3 -5
- package/CenterColumn.js +3 -5
- package/Checkbox.d.ts +1 -1
- package/Checkbox.js +4 -6
- package/CheckboxButtonsGroup.d.ts +1 -1
- package/CheckboxButtonsGroup.js +6 -8
- package/CheckboxGroup.d.ts +1 -1
- package/CheckboxGroup.js +5 -7
- package/CityBlock.d.ts +1 -1
- package/CityBlock.js +3 -5
- package/ContactBubble.js +6 -31
- package/ContentArticle.js +8 -10
- package/ContentImage.d.ts +1 -1
- package/ContentImage.js +4 -6
- package/Datepicker.js +6 -31
- package/ExtraLinks.d.ts +1 -1
- package/ExtraLinks.js +8 -21
- package/FeatureList.js +3 -5
- package/FieldGroup.js +3 -5
- package/FileInput.js +5 -41
- package/Foonote.js +2 -4
- package/FooterBadges.js +4 -6
- package/FooterInfo.js +3 -5
- package/Footnote.js +2 -4
- package/Form.js +3 -5
- package/FormField.js +3 -28
- package/Gallery/_GalleryItem.d.ts +1 -1
- package/Gallery/_GalleryItem.js +9 -45
- package/Gallery/_GalleryModal.js +6 -31
- package/Gallery/_GalleryModalContext.js +2 -4
- package/Gallery/_GalleryModalItem.js +5 -18
- package/Gallery.js +6 -31
- package/GridBlocks.d.ts +2 -2
- package/GridBlocks.js +8 -10
- package/Heading.d.ts +1 -1
- package/Heading.js +4 -6
- package/HeroBlock.d.ts +2 -2
- package/HeroBlock.js +6 -8
- package/IframeBlock.d.ts +5 -1
- package/IframeBlock.js +6 -8
- package/Illustration.d.ts +1 -1
- package/Illustration.js +4 -6
- package/ImageCards.d.ts +1 -1
- package/ImageCards.js +6 -19
- package/InfoBlock.js +2 -4
- package/InfoHero.d.ts +2 -2
- package/InfoHero.js +8 -10
- package/IslandBlock.d.ts +1 -1
- package/IslandBlock.js +3 -5
- package/IslandPageBlock.d.ts +1 -1
- package/IslandPageBlock.js +3 -5
- package/LabeledTextBlock.d.ts +1 -1
- package/LabeledTextBlock.js +4 -6
- package/Layout.js +9 -11
- package/MainMenu/_Auxiliary.js +4 -6
- package/MainMenu/_PrimaryPanel.js +5 -7
- package/MainMenu.js +7 -32
- package/MiniMetrics.d.ts +1 -1
- package/MiniMetrics.js +5 -7
- package/Modal.js +3 -5
- package/NameCard.js +6 -8
- package/NameCards.js +3 -5
- package/NewsHero.d.ts +1 -1
- package/NewsHero.js +7 -9
- package/PageFilter.js +4 -6
- package/PageHeading.js +3 -5
- package/Picture.d.ts +7 -0
- package/Picture.js +11 -0
- package/ProcessOverview.js +3 -5
- package/PullQuote.js +2 -4
- package/RadioButtonsGroup.d.ts +1 -1
- package/RadioButtonsGroup.js +6 -8
- package/RadioGroup.d.ts +2 -2
- package/RadioGroup.js +6 -8
- package/RelatedLinks.js +4 -6
- package/RowBlock.js +3 -5
- package/RowBlockColumn.js +3 -5
- package/SearchInput.js +5 -41
- package/SearchResults/_SearchResultsItem.js +6 -8
- package/SearchResults.js +7 -32
- package/SeenEffect.js +3 -16
- package/Selectbox.js +6 -42
- package/ShareButtons.js +4 -26
- package/Sharpie.js +3 -5
- package/SiteSearchAutocomplete.js +5 -41
- package/SiteSearchCurtain.js +3 -28
- package/SiteSearchInput.d.ts +1 -1
- package/SiteSearchInput.js +4 -40
- package/Skeleton.js +4 -6
- package/SubHeading.js +3 -5
- package/Tabs.js +3 -28
- package/TagPill.d.ts +1 -1
- package/TagPill.js +7 -20
- package/TextBlock.js +3 -5
- package/TextButton.d.ts +1 -1
- package/TextButton.js +4 -6
- package/TextInput.js +5 -41
- package/VSpacer.js +3 -5
- package/VerticalTabsTOC.js +3 -28
- package/WizardLayout.js +7 -9
- package/WizardLayoutClose.d.ts +1 -1
- package/WizardLayoutClose.js +4 -6
- package/WizardStepper.js +3 -5
- package/_abstract/_AbstractCarousel.js +7 -32
- package/_abstract/_Blings.js +3 -5
- package/_abstract/_Block.d.ts +2 -2
- package/_abstract/_Block.js +7 -9
- package/_abstract/{Button.d.ts → _Button.d.ts} +0 -0
- package/_abstract/{Button.js → _Button.js} +6 -19
- package/{esm/_abstract/CardList.d.ts → _abstract/_CardList.d.ts} +2 -1
- package/_abstract/{CardList.js → _CardList.js} +12 -12
- package/{esm/_abstract/Image.d.ts → _abstract/_Image.d.ts} +9 -5
- package/_abstract/{Image.js → _Image.js} +5 -7
- package/_abstract/{Link.d.ts → _Link.d.ts} +0 -0
- package/_abstract/{Link.js → _Link.js} +2 -4
- package/_abstract/_Quote.js +4 -6
- package/{esm/_abstract/TogglerGroup.d.ts → _abstract/_TogglerGroup.d.ts} +1 -1
- package/_abstract/{TogglerGroup.js → _TogglerGroup.js} +8 -8
- package/{esm/_abstract/TogglerGroupField.d.ts → _abstract/_TogglerGroupField.d.ts} +2 -2
- package/_abstract/_TogglerGroupField.js +14 -0
- package/_abstract/{TogglerInput.d.ts → _TogglerInput.d.ts} +0 -0
- package/_abstract/{TogglerInput.js → _TogglerInput.js} +4 -17
- package/_abstract/breakOnNL.js +2 -4
- package/package.json +6 -365
- package/utils/env.js +2 -4
- package/utils/seenEffect.d.ts +2 -2
- package/utils/seenEffect.js +1 -1
- package/utils/useScrollbarWidthCSSVar.js +2 -4
- package/utils.js +3 -16
- package/_abstract/CardList.d.ts +0 -29
- package/_abstract/Image.d.ts +0 -32
- package/_abstract/TogglerGroup.d.ts +0 -31
- package/_abstract/TogglerGroupField.d.ts +0 -17
- package/_abstract/TogglerGroupField.js +0 -27
- package/esm/AccordionList.d.ts +0 -17
- package/esm/AccordionList.js +0 -24
- package/esm/ActionCards.d.ts +0 -5
- package/esm/ActionCards.js +0 -9
- package/esm/Alert.d.ts +0 -49
- package/esm/Alert.js +0 -92
- package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts +0 -27
- package/esm/ArticleCarousel/_ArticleCarouselCard.js +0 -24
- package/esm/ArticleCarousel.d.ts +0 -12
- package/esm/ArticleCarousel.js +0 -8
- package/esm/ArticleMeta.d.ts +0 -9
- package/esm/ArticleMeta.js +0 -18
- package/esm/Attention.d.ts +0 -7
- package/esm/Attention.js +0 -4
- package/esm/BasicTable.d.ts +0 -12
- package/esm/BasicTable.js +0 -29
- package/esm/Bling.d.ts +0 -81
- package/esm/Bling.js +0 -44
- package/esm/BlockBreak.d.ts +0 -2
- package/esm/BlockBreak.js +0 -6
- package/esm/BlockQuote.d.ts +0 -4
- package/esm/BlockQuote.js +0 -4
- package/esm/BreadCrumbs.d.ts +0 -11
- package/esm/BreadCrumbs.js +0 -28
- package/esm/ButtonBack.d.ts +0 -7
- package/esm/ButtonBack.js +0 -4
- package/esm/ButtonBar.d.ts +0 -16
- package/esm/ButtonBar.js +0 -14
- package/esm/ButtonPrimary.d.ts +0 -7
- package/esm/ButtonPrimary.js +0 -4
- package/esm/ButtonSecondary.d.ts +0 -7
- package/esm/ButtonSecondary.js +0 -4
- package/esm/ButtonTertiary.d.ts +0 -12
- package/esm/ButtonTertiary.js +0 -15
- package/esm/Carousel.d.ts +0 -4
- package/esm/Carousel.js +0 -4
- package/esm/CarouselStepper.d.ts +0 -4
- package/esm/CarouselStepper.js +0 -4
- package/esm/CenterColumn.js +0 -7
- package/esm/Checkbox.d.ts +0 -4
- package/esm/Checkbox.js +0 -4
- package/esm/CheckboxButtonsGroup.d.ts +0 -11
- package/esm/CheckboxButtonsGroup.js +0 -14
- package/esm/CheckboxGroup.d.ts +0 -9
- package/esm/CheckboxGroup.js +0 -7
- package/esm/CityBlock.d.ts +0 -23
- package/esm/CityBlock.js +0 -18
- package/esm/ContactBubble.d.ts +0 -58
- package/esm/ContactBubble.js +0 -148
- package/esm/ContentArticle.d.ts +0 -15
- package/esm/ContentArticle.js +0 -21
- package/esm/ContentImage.d.ts +0 -8
- package/esm/ContentImage.js +0 -18
- package/esm/Datepicker.d.ts +0 -39
- package/esm/Datepicker.js +0 -63
- package/esm/ExtraLinks.d.ts +0 -18
- package/esm/ExtraLinks.js +0 -34
- package/esm/FeatureList.d.ts +0 -12
- package/esm/FeatureList.js +0 -16
- package/esm/FieldGroup.d.ts +0 -9
- package/esm/FieldGroup.js +0 -9
- package/esm/FileInput.d.ts +0 -17
- package/esm/FileInput.js +0 -154
- package/esm/Foonote.d.ts +0 -12
- package/esm/Foonote.js +0 -7
- package/esm/FooterBadges.d.ts +0 -9
- package/esm/FooterBadges.js +0 -12
- package/esm/FooterInfo.d.ts +0 -18
- package/esm/FooterInfo.js +0 -9
- package/esm/Footnote.d.ts +0 -6
- package/esm/Footnote.js +0 -3
- package/esm/Form.d.ts +0 -7
- package/esm/Form.js +0 -10
- package/esm/FormField.d.ts +0 -65
- package/esm/FormField.js +0 -91
- package/esm/Gallery/_GalleryItem.d.ts +0 -8
- package/esm/Gallery/_GalleryItem.js +0 -30
- package/esm/Gallery/_GalleryModal.d.ts +0 -6
- package/esm/Gallery/_GalleryModal.js +0 -54
- package/esm/Gallery/_GalleryModalContext.d.ts +0 -9
- package/esm/Gallery/_GalleryModalContext.js +0 -3
- package/esm/Gallery/_GalleryModalItem.d.ts +0 -3
- package/esm/Gallery/_GalleryModalItem.js +0 -22
- package/esm/Gallery.d.ts +0 -17
- package/esm/Gallery.js +0 -27
- package/esm/GridBlocks.d.ts +0 -26
- package/esm/GridBlocks.js +0 -24
- package/esm/Heading.d.ts +0 -16
- package/esm/Heading.js +0 -17
- package/esm/HeroBlock.d.ts +0 -19
- package/esm/HeroBlock.js +0 -21
- package/esm/IframeBlock.d.ts +0 -23
- package/esm/IframeBlock.js +0 -26
- package/esm/Illustration.d.ts +0 -13
- package/esm/Illustration.js +0 -8
- package/esm/ImageCards.d.ts +0 -8
- package/esm/ImageCards.js +0 -22
- package/esm/InfoBlock.d.ts +0 -17
- package/esm/InfoBlock.js +0 -13
- package/esm/InfoHero.d.ts +0 -17
- package/esm/InfoHero.js +0 -82
- package/esm/IslandBlock.d.ts +0 -25
- package/esm/IslandBlock.js +0 -16
- package/esm/IslandPageBlock.d.ts +0 -24
- package/esm/IslandPageBlock.js +0 -16
- package/esm/LabeledTextBlock.d.ts +0 -11
- package/esm/LabeledTextBlock.js +0 -14
- package/esm/Layout.d.ts +0 -33
- package/esm/Layout.js +0 -52
- package/esm/MainMenu/_Auxiliary.d.ts +0 -6
- package/esm/MainMenu/_Auxiliary.js +0 -13
- package/esm/MainMenu/_PrimaryPanel.d.ts +0 -13
- package/esm/MainMenu/_PrimaryPanel.js +0 -22
- package/esm/MainMenu.d.ts +0 -48
- package/esm/MainMenu.js +0 -136
- package/esm/MiniMetrics.d.ts +0 -8
- package/esm/MiniMetrics.js +0 -12
- package/esm/Modal.d.ts +0 -10
- package/esm/Modal.js +0 -14
- package/esm/NameCard.d.ts +0 -64
- package/esm/NameCard.js +0 -82
- package/esm/NameCards.d.ts +0 -6
- package/esm/NameCards.js +0 -7
- package/esm/NewsHero.d.ts +0 -14
- package/esm/NewsHero.js +0 -86
- package/esm/PageFilter.d.ts +0 -17
- package/esm/PageFilter.js +0 -15
- package/esm/PageHeading.d.ts +0 -10
- package/esm/PageHeading.js +0 -12
- package/esm/ProcessOverview.d.ts +0 -13
- package/esm/ProcessOverview.js +0 -17
- package/esm/PullQuote.d.ts +0 -4
- package/esm/PullQuote.js +0 -4
- package/esm/RadioButtonsGroup.d.ts +0 -11
- package/esm/RadioButtonsGroup.js +0 -14
- package/esm/RadioGroup.d.ts +0 -13
- package/esm/RadioGroup.js +0 -7
- package/esm/RelatedLinks.d.ts +0 -20
- package/esm/RelatedLinks.js +0 -26
- package/esm/RowBlock.d.ts +0 -12
- package/esm/RowBlock.js +0 -9
- package/esm/RowBlockColumn.d.ts +0 -8
- package/esm/RowBlockColumn.js +0 -11
- package/esm/SearchInput.d.ts +0 -18
- package/esm/SearchInput.js +0 -33
- package/esm/SearchResults/_SearchResultsItem.d.ts +0 -18
- package/esm/SearchResults/_SearchResultsItem.js +0 -15
- package/esm/SearchResults.d.ts +0 -33
- package/esm/SearchResults.js +0 -109
- package/esm/SeenEffect.d.ts +0 -4
- package/esm/SeenEffect.js +0 -19
- package/esm/Selectbox.d.ts +0 -8
- package/esm/Selectbox.js +0 -46
- package/esm/ShareButtons.d.ts +0 -9
- package/esm/ShareButtons.js +0 -51
- package/esm/Sharpie.d.ts +0 -23
- package/esm/Sharpie.js +0 -22
- package/esm/SiteSearchAutocomplete.d.ts +0 -40
- package/esm/SiteSearchAutocomplete.js +0 -58
- package/esm/SiteSearchCurtain.d.ts +0 -6
- package/esm/SiteSearchCurtain.js +0 -33
- package/esm/SiteSearchInput.d.ts +0 -24
- package/esm/SiteSearchInput.js +0 -40
- package/esm/Skeleton.d.ts +0 -25
- package/esm/Skeleton.js +0 -30
- package/esm/SubHeading.d.ts +0 -10
- package/esm/SubHeading.js +0 -13
- package/esm/Tabs.d.ts +0 -35
- package/esm/Tabs.js +0 -94
- package/esm/TagPill.d.ts +0 -27
- package/esm/TagPill.js +0 -43
- package/esm/TextBlock.d.ts +0 -15
- package/esm/TextBlock.js +0 -15
- package/esm/TextButton.d.ts +0 -9
- package/esm/TextButton.js +0 -9
- package/esm/TextInput.d.ts +0 -16
- package/esm/TextInput.js +0 -35
- package/esm/VSpacer.d.ts +0 -24
- package/esm/VSpacer.js +0 -41
- package/esm/VerticalTabsTOC.d.ts +0 -14
- package/esm/VerticalTabsTOC.js +0 -68
- package/esm/WizardLayout.d.ts +0 -15
- package/esm/WizardLayout.js +0 -30
- package/esm/WizardLayoutClose.d.ts +0 -3
- package/esm/WizardLayoutClose.js +0 -4
- package/esm/WizardStepper.d.ts +0 -36
- package/esm/WizardStepper.js +0 -25
- package/esm/_abstract/Button.d.ts +0 -40
- package/esm/_abstract/Button.js +0 -47
- package/esm/_abstract/CardList.js +0 -36
- package/esm/_abstract/Image.js +0 -27
- package/esm/_abstract/Link.d.ts +0 -27
- package/esm/_abstract/Link.js +0 -24
- package/esm/_abstract/TogglerGroup.js +0 -29
- package/esm/_abstract/TogglerGroupField.js +0 -22
- package/esm/_abstract/TogglerInput.d.ts +0 -22
- package/esm/_abstract/TogglerInput.js +0 -33
- package/esm/_abstract/_AbstractCarousel.d.ts +0 -25
- package/esm/_abstract/_AbstractCarousel.js +0 -130
- package/esm/_abstract/_Blings.d.ts +0 -11
- package/esm/_abstract/_Blings.js +0 -12
- package/esm/_abstract/_Block.d.ts +0 -22
- package/esm/_abstract/_Block.js +0 -24
- package/esm/_abstract/_Quote.d.ts +0 -9
- package/esm/_abstract/_Quote.js +0 -8
- package/esm/_abstract/breakOnNL.d.ts +0 -2
- package/esm/_abstract/breakOnNL.js +0 -8
- package/esm/assets.d.ts +0 -42
- package/esm/assets.js +0 -56
- package/esm/constants.d.ts +0 -39
- package/esm/constants.js +0 -22
- package/esm/focus-visible.d.ts +0 -1
- package/esm/focus-visible.js +0 -1
- package/esm/package.json +0 -1
- package/esm/utils/env.d.ts +0 -1
- package/esm/utils/env.js +0 -8
- package/esm/utils/seenEffect.d.ts +0 -28
- package/esm/utils/seenEffect.js +0 -73
- package/esm/utils/useFormatMonitor.d.ts +0 -38
- package/esm/utils/useFormatMonitor.js +0 -41
- package/esm/utils/useGetSVGtext.d.ts +0 -6
- package/esm/utils/useGetSVGtext.js +0 -19
- package/esm/utils/useMenuToggling.d.ts +0 -8
- package/esm/utils/useMenuToggling.js +0 -62
- package/esm/utils/useScrollbarWidthCSSVar.d.ts +0 -1
- package/esm/utils/useScrollbarWidthCSSVar.js +0 -3
- package/esm/utils.d.ts +0 -2
- package/esm/utils.js +0 -2
package/esm/SiteSearchCurtain.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { useOnMount } from '@hugsmidjan/react/hooks';
|
|
3
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
4
|
-
import { isPreact } from './utils/env';
|
|
5
|
-
const SiteSearchCurtain = (props) => {
|
|
6
|
-
const [focused, setFocused] = useState(false);
|
|
7
|
-
let blurTimeout;
|
|
8
|
-
useOnMount(() => {
|
|
9
|
-
const closeSearch = (e) => {
|
|
10
|
-
if (e.key === 'Escape') {
|
|
11
|
-
setFocused(false);
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
document.addEventListener('keyup', closeSearch);
|
|
15
|
-
return () => {
|
|
16
|
-
document.removeEventListener('keyup', closeSearch);
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
const focusHandler = () => {
|
|
20
|
-
blurTimeout && clearTimeout(blurTimeout);
|
|
21
|
-
setFocused(true);
|
|
22
|
-
};
|
|
23
|
-
const blurHandler = (e) => {
|
|
24
|
-
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
|
|
25
|
-
blurTimeout = setTimeout(() => {
|
|
26
|
-
setFocused(false);
|
|
27
|
-
blurTimeout = undefined;
|
|
28
|
-
}, 100);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
return (React.createElement("div", Object.assign({ className: getBemClass('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
|
|
32
|
-
};
|
|
33
|
-
export default SiteSearchCurtain;
|
package/esm/SiteSearchInput.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { SSRSupport } from '@hugsmidjan/react/hooks';
|
|
3
|
-
import { FormFieldWrappingProps } from './FormField';
|
|
4
|
-
declare type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit'>;
|
|
5
|
-
declare type WrappingProps = Pick<FormFieldWrappingProps, 'id' | 'label'>;
|
|
6
|
-
export declare type SiteSearchInputProps = {
|
|
7
|
-
/** Triggered when user hits ENTER key with the focus inside the input field
|
|
8
|
-
*
|
|
9
|
-
* Return `true` to **allow** the browser's default submit hehavior
|
|
10
|
-
*/
|
|
11
|
-
onSubmit?: () => boolean | void;
|
|
12
|
-
/** Custom action to perform when the user clicks the search button
|
|
13
|
-
*
|
|
14
|
-
* Return `true` to **allow** the browser's default submit hehavior
|
|
15
|
-
*
|
|
16
|
-
* Defaults to `onSearch`
|
|
17
|
-
*/
|
|
18
|
-
onButtonClick?: () => boolean | void;
|
|
19
|
-
buttonText?: string;
|
|
20
|
-
children?: undefined;
|
|
21
|
-
ssr?: SSRSupport;
|
|
22
|
-
} & WrappingProps & InputElmProps;
|
|
23
|
-
declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "title" | "id" | "ssr" | "form" | "label" | "slot" | "style" | "pattern" | "children" | "hidden" | "onClick" | "dir" | "is" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "alt" | "multiple" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
|
|
24
|
-
export default SiteSearchInput;
|
package/esm/SiteSearchInput.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { useState } from 'react';
|
|
13
|
-
import FormField from './FormField';
|
|
14
|
-
// ---------------------------------------------------------------------------
|
|
15
|
-
const SiteSearchInput = React.forwardRef((props, ref) => {
|
|
16
|
-
var _a;
|
|
17
|
-
const { label, id, onChange, placeholder = typeof label === 'string' ? label : undefined, buttonText = 'Leita', onSubmit, onButtonClick = onSubmit, onKeyDown, ssr } = props, inputElementProps = __rest(props, ["label", "id", "onChange", "placeholder", "buttonText", "onSubmit", "onButtonClick", "onKeyDown", "ssr"]);
|
|
18
|
-
const { value, defaultValue } = inputElementProps;
|
|
19
|
-
const [hasValue, setHasValue] = useState(undefined);
|
|
20
|
-
const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
|
|
21
|
-
const empty = !filled && !placeholder;
|
|
22
|
-
const _onChange = value != null
|
|
23
|
-
? onChange
|
|
24
|
-
: (e) => {
|
|
25
|
-
setHasValue(!!e.target.value);
|
|
26
|
-
onChange && onChange(e);
|
|
27
|
-
};
|
|
28
|
-
return (React.createElement(FormField, { className: "SiteSearchInput", ssr: ssr, label: label, empty: empty, filled: filled, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
|
|
29
|
-
React.createElement("input", Object.assign({ className: "SiteSearchInput__input", onChange: _onChange }, inputProps, { placeholder: placeholder, onKeyDown: onSubmit
|
|
30
|
-
? (e) => {
|
|
31
|
-
if (e.key === 'Enter' && onSubmit() !== true) {
|
|
32
|
-
e.preventDefault();
|
|
33
|
-
}
|
|
34
|
-
onKeyDown && onKeyDown(e);
|
|
35
|
-
}
|
|
36
|
-
: onKeyDown }, inputElementProps, { ref: ref })),
|
|
37
|
-
' ',
|
|
38
|
-
React.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick && ((e) => !onButtonClick() && e.preventDefault()), title: buttonText }, buttonText))) }));
|
|
39
|
-
});
|
|
40
|
-
export default SiteSearchInput;
|
package/esm/Skeleton.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
export declare type SkeletonProps = {
|
|
3
|
-
text?: boolean;
|
|
4
|
-
height?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
|
|
5
|
-
items?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
|
|
6
|
-
gap?: 1 | 2 | 3 | 4 | 5;
|
|
7
|
-
};
|
|
8
|
-
declare const Skeleton: {
|
|
9
|
-
(props: SkeletonProps): JSX.Element;
|
|
10
|
-
/** Returns a single `<Skeleton height={X}/>` element of branded type `SkeletonBlock` */
|
|
11
|
-
block(height?: SkeletonProps['height']): SkeletonBlock;
|
|
12
|
-
/** Returns a single `<Skeleton text height={X}/>` element of branded type `SkeletonText` */
|
|
13
|
-
text(height?: SkeletonProps['height']): SkeletonText;
|
|
14
|
-
};
|
|
15
|
-
export default Skeleton;
|
|
16
|
-
declare const _SkeletonBlock__Brand: unique symbol;
|
|
17
|
-
/** The `<Skeleton height={X}/>` element returned by `Skeleton.block(X)` */
|
|
18
|
-
export declare type SkeletonBlock = ReactElement & {
|
|
19
|
-
[_SkeletonBlock__Brand]: true;
|
|
20
|
-
};
|
|
21
|
-
declare const _SkeletonText__Brand: unique symbol;
|
|
22
|
-
/** The `<Skeleton text height={X}/>` element returned by `Skeleton.text(X)` */
|
|
23
|
-
export declare type SkeletonText = ReactElement & {
|
|
24
|
-
[_SkeletonText__Brand]: true;
|
|
25
|
-
};
|
package/esm/Skeleton.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import range from '@hugsmidjan/qj/range';
|
|
3
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
4
|
-
const makeRenderSkeleton = (props) => (key) => (React.createElement("span", { key: key, className: getBemClass('Skeleton', [
|
|
5
|
-
props.text && 'text',
|
|
6
|
-
props.height && 'height--' + props.height,
|
|
7
|
-
props.gap && 'gap--' + props.gap,
|
|
8
|
-
]) }));
|
|
9
|
-
const minmax = (num = 0, max = 100, min = 1) => {
|
|
10
|
-
num = Math.min(Math.max(Math.round(num), min), max);
|
|
11
|
-
return num > min ? num : undefined;
|
|
12
|
-
};
|
|
13
|
-
const Skeleton = (props) => {
|
|
14
|
-
const height = minmax(props.height, 40);
|
|
15
|
-
const renderSkeleton = makeRenderSkeleton({
|
|
16
|
-
height,
|
|
17
|
-
text: props.text,
|
|
18
|
-
gap: minmax(props.gap, 5, 0),
|
|
19
|
-
});
|
|
20
|
-
const items = minmax(props.items, 20) || 1;
|
|
21
|
-
if (items > 1) {
|
|
22
|
-
return React.createElement(React.Fragment, null, range(1, items).map(renderSkeleton));
|
|
23
|
-
}
|
|
24
|
-
return renderSkeleton();
|
|
25
|
-
};
|
|
26
|
-
export default Skeleton;
|
|
27
|
-
/** Returns a single `<Skeleton height={X}/>` element of branded type `SkeletonBlock` */
|
|
28
|
-
Skeleton.block = (height) => (React.createElement(Skeleton, { height: height }));
|
|
29
|
-
/** Returns a single `<Skeleton text height={X}/>` element of branded type `SkeletonText` */
|
|
30
|
-
Skeleton.text = (height) => (React.createElement(Skeleton, { text: true, height: height }));
|
package/esm/SubHeading.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { SeenProp } from './utils/seenEffect';
|
|
3
|
-
import { ComponentLayoutProps } from './constants';
|
|
4
|
-
export declare type SubHeadingProps = {
|
|
5
|
-
Tag?: 'h2' | 'h3';
|
|
6
|
-
small?: boolean;
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
} & ComponentLayoutProps & SeenProp;
|
|
9
|
-
declare const SubHeading: (props: SubHeadingProps) => JSX.Element;
|
|
10
|
-
export default SubHeading;
|
package/esm/SubHeading.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
4
|
-
const SubHeading = (props) => {
|
|
5
|
-
const { small, Tag = 'h2', children, align, wide, startSeen } = props;
|
|
6
|
-
const [ref] = useSeenEffect(startSeen);
|
|
7
|
-
return (React.createElement(Tag, { className: getBemClass('SubHeading', [
|
|
8
|
-
small && 'small',
|
|
9
|
-
align === 'right' && 'align--' + align,
|
|
10
|
-
!align && wide && 'wide',
|
|
11
|
-
]), ref: ref }, children));
|
|
12
|
-
};
|
|
13
|
-
export default SubHeading;
|
package/esm/Tabs.d.ts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { SSRSupport } from '@hugsmidjan/react/hooks';
|
|
2
|
-
import { SeenProp } from './utils/seenEffect';
|
|
3
|
-
export declare type TabItemProps = {
|
|
4
|
-
label: string;
|
|
5
|
-
badge?: string | number;
|
|
6
|
-
longLabel?: string;
|
|
7
|
-
type?: 'button' | 'submit';
|
|
8
|
-
id?: string;
|
|
9
|
-
href?: string;
|
|
10
|
-
'aria-controls'?: string;
|
|
11
|
-
onActivated?: () => void | false;
|
|
12
|
-
};
|
|
13
|
-
/** @deprecated Use `TabItemProps` instead (Will be removed in v0.11) */
|
|
14
|
-
export declare type TabProps = TabItemProps;
|
|
15
|
-
declare type BaseTabsProps<T extends TabItemProps = TabItemProps> = {
|
|
16
|
-
id?: string;
|
|
17
|
-
'aria-label'?: string;
|
|
18
|
-
'aria-labelledby'?: string;
|
|
19
|
-
tabs: Array<T>;
|
|
20
|
-
activeIdx?: number;
|
|
21
|
-
onSetActive?: (idx: number, tab: T) => void;
|
|
22
|
-
role?: 'tablist' | 'toc';
|
|
23
|
-
'aria-controls'?: string;
|
|
24
|
-
activateOnFocus?: boolean;
|
|
25
|
-
ssr?: SSRSupport;
|
|
26
|
-
};
|
|
27
|
-
export declare type TabsProps<T extends TabItemProps = TabItemProps> = BaseTabsProps<T> & {
|
|
28
|
-
vertical?: boolean;
|
|
29
|
-
/** Optional <Tabs/> block connected to the currently active tab */
|
|
30
|
-
subTabs?: BaseTabsProps;
|
|
31
|
-
} & SeenProp;
|
|
32
|
-
/** @deprecated Use `TabsProps` instead (Will be removed in v0.11) */
|
|
33
|
-
export declare type TablistProps<T extends TabItemProps = TabItemProps> = TabsProps<T>;
|
|
34
|
-
declare const Tabs: (props: TabsProps) => JSX.Element;
|
|
35
|
-
export default Tabs;
|
package/esm/Tabs.js
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { getFrag } from '@hugsmidjan/qj/frag';
|
|
3
|
-
import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
|
|
4
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
5
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
6
|
-
const navKeyEffects = {
|
|
7
|
-
ArrowUp: -1,
|
|
8
|
-
ArrowLeft: -1,
|
|
9
|
-
ArrowDown: 1,
|
|
10
|
-
ArrowRight: 1,
|
|
11
|
-
};
|
|
12
|
-
// eslint-disable-next-line complexity
|
|
13
|
-
const renderTab = (tabProps, index, listProps) => {
|
|
14
|
-
const { label, badge, href, type, longLabel } = tabProps;
|
|
15
|
-
const { activeIdx, activateTab, focusedIdx, setFocusedIdx, tabRole, listAriaControls, isBrowser, } = listProps;
|
|
16
|
-
const handleClick = isBrowser &&
|
|
17
|
-
((e) => {
|
|
18
|
-
e.preventDefault();
|
|
19
|
-
activateTab(index);
|
|
20
|
-
e.currentTarget.focus();
|
|
21
|
-
});
|
|
22
|
-
const handleFocus = isBrowser && (() => setFocusedIdx(index));
|
|
23
|
-
const isActive = activeIdx === index || undefined;
|
|
24
|
-
const Tag = href && !tabRole ? 'a' : 'button';
|
|
25
|
-
const tagProps = Tag === 'button'
|
|
26
|
-
? {
|
|
27
|
-
role: tabRole,
|
|
28
|
-
type: type || 'button',
|
|
29
|
-
// 'aria-selected': tabRole && isActive,
|
|
30
|
-
tabIndex: tabRole ? (focusedIdx === index ? 0 : -1) : undefined,
|
|
31
|
-
'aria-controls': tabProps['aria-controls'] || (tabRole && getFrag(href)) || listAriaControls,
|
|
32
|
-
}
|
|
33
|
-
: { href };
|
|
34
|
-
return [
|
|
35
|
-
React.createElement(Tag, Object.assign({ key: index, className: "Tabs__tab", "data-active": isActive }, tagProps, { onClick: handleClick, onFocus: handleFocus, "aria-label": longLabel, title: longLabel }),
|
|
36
|
-
label,
|
|
37
|
-
" ",
|
|
38
|
-
badge != null && React.createElement("small", { className: "Tabs__tab__badge" },
|
|
39
|
-
"(",
|
|
40
|
-
badge,
|
|
41
|
-
")")),
|
|
42
|
-
' ',
|
|
43
|
-
];
|
|
44
|
-
};
|
|
45
|
-
// NOTE: This isBrowser tablist behavior is based on
|
|
46
|
-
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
|
|
47
|
-
const Tabs = (props) => {
|
|
48
|
-
var _a, _b;
|
|
49
|
-
const { tabs, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-controls': listAriaControls, id, activeIdx, onSetActive, activateOnFocus, ssr, startSeen, vertical, subTabs, } = props;
|
|
50
|
-
const isBrowser = useIsBrowserSide(ssr);
|
|
51
|
-
const [focusedIdx, setFocusedIdx] = useState(activeIdx || 0);
|
|
52
|
-
const tabRole = isBrowser && role === 'tablist' ? 'tab' : undefined;
|
|
53
|
-
const activateTab = (index) => {
|
|
54
|
-
const tab = tabs[index];
|
|
55
|
-
if (index === activeIdx || !tab) {
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
const ret = tab.onActivated && tab.onActivated.call(null);
|
|
59
|
-
if (onSetActive && ret !== false) {
|
|
60
|
-
onSetActive(index, tab);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const handleKeydown = tabRole &&
|
|
64
|
-
((e) => {
|
|
65
|
-
var _a;
|
|
66
|
-
const delta = navKeyEffects[e.key];
|
|
67
|
-
if (delta) {
|
|
68
|
-
// prevent scolling +
|
|
69
|
-
// prevent bubbling to parent Tabs container
|
|
70
|
-
e.stopPropagation();
|
|
71
|
-
let nextIdx = (focusedIdx || 0) + delta;
|
|
72
|
-
const maxIdx = tabs.length - 1;
|
|
73
|
-
nextIdx = nextIdx < 0 ? maxIdx : nextIdx > maxIdx ? 0 : nextIdx;
|
|
74
|
-
(_a = e.currentTarget.querySelectorAll('.Tabs__tab')[nextIdx]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
75
|
-
activateOnFocus && activateTab(nextIdx);
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
const [ref] = useSeenEffect(startSeen);
|
|
79
|
-
const listProps = {
|
|
80
|
-
activeIdx,
|
|
81
|
-
activateTab,
|
|
82
|
-
focusedIdx,
|
|
83
|
-
setFocusedIdx,
|
|
84
|
-
tabRole,
|
|
85
|
-
listAriaControls,
|
|
86
|
-
isBrowser,
|
|
87
|
-
};
|
|
88
|
-
return (React.createElement("div", { className: getBemClass('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
|
|
89
|
-
tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
|
|
90
|
-
subTabs && (React.createElement(Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, startSeen: true,
|
|
91
|
-
// just to be sure
|
|
92
|
-
vertical: undefined, subTabs: undefined })))));
|
|
93
|
-
};
|
|
94
|
-
export default Tabs;
|
package/esm/TagPill.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ButtonProps } from './_abstract/Button';
|
|
3
|
-
declare const colors: {
|
|
4
|
-
readonly normal: "";
|
|
5
|
-
readonly green: "color--green";
|
|
6
|
-
readonly yellow: "color--yellow";
|
|
7
|
-
readonly orange: "color--orange";
|
|
8
|
-
readonly red: "color--red";
|
|
9
|
-
};
|
|
10
|
-
export declare type TagPillColor = keyof typeof colors;
|
|
11
|
-
export declare type TagPillProps = ButtonProps & {
|
|
12
|
-
children?: ReactNode;
|
|
13
|
-
large?: boolean;
|
|
14
|
-
color?: TagPillColor;
|
|
15
|
-
} & ({
|
|
16
|
-
removable?: false;
|
|
17
|
-
onRemove?: never;
|
|
18
|
-
removeLabel?: never;
|
|
19
|
-
removeLabelLong?: never;
|
|
20
|
-
} | {
|
|
21
|
-
removable: true;
|
|
22
|
-
onRemove?: () => void;
|
|
23
|
-
removeLabel?: string;
|
|
24
|
-
removeLabelLong?: string;
|
|
25
|
-
});
|
|
26
|
-
declare const TagPill: (props: TagPillProps) => JSX.Element;
|
|
27
|
-
export default TagPill;
|
package/esm/TagPill.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
14
|
-
import Button from './_abstract/Button';
|
|
15
|
-
const colors = {
|
|
16
|
-
normal: '',
|
|
17
|
-
green: 'color--green',
|
|
18
|
-
yellow: 'color--yellow',
|
|
19
|
-
orange: 'color--orange',
|
|
20
|
-
red: 'color--red',
|
|
21
|
-
};
|
|
22
|
-
const TagPill = (props) => {
|
|
23
|
-
const { modifier, large, removable, onRemove, children, color = 'normal', label = children, removeLabel = 'x', removeLabelLong = removeLabel } = props, buttonProps = __rest(props, ["modifier", "large", "removable", "onRemove", "children", "color", "label", "removeLabel", "removeLabelLong"]);
|
|
24
|
-
const isStatic = !('href' in props || 'type' in props || props.onClick);
|
|
25
|
-
process.env.NODE_ENV !== 'production' &&
|
|
26
|
-
removable &&
|
|
27
|
-
isStatic &&
|
|
28
|
-
!onRemove &&
|
|
29
|
-
console.warn('static (non-button) `TagPill`s must not be removable');
|
|
30
|
-
const modifiers = [modifier, large && 'large', colors[color]];
|
|
31
|
-
const removeBtn = removable && (React.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
|
|
32
|
-
return isStatic ? (React.createElement("span", { className: getBemClass('TagPill', modifiers) },
|
|
33
|
-
label,
|
|
34
|
-
" ",
|
|
35
|
-
removeBtn)) : onRemove ? (React.createElement("span", { className: getBemClass('TagPill', modifiers) },
|
|
36
|
-
React.createElement(Button, Object.assign({ bem: "TagPill__button" }, buttonProps), label),
|
|
37
|
-
' ',
|
|
38
|
-
removeBtn)) : (React.createElement(Button, Object.assign({ bem: "TagPill" }, buttonProps, { modifier: modifiers }),
|
|
39
|
-
label,
|
|
40
|
-
' ',
|
|
41
|
-
removable && (React.createElement("span", { className: "TagPill__remove", "aria-label": removeLabelLong }, removeLabel))));
|
|
42
|
-
};
|
|
43
|
-
export default TagPill;
|
package/esm/TextBlock.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { SeenProp } from './utils/seenEffect';
|
|
3
|
-
import { ComponentLayoutProps } from './constants';
|
|
4
|
-
export declare type TextBlockProps = ComponentLayoutProps & {
|
|
5
|
-
/** Make H2 headings float to the left
|
|
6
|
-
*
|
|
7
|
-
* Overrides the `align` and `wide` prop and automatically sets `align` to `right`
|
|
8
|
-
*/
|
|
9
|
-
labelled?: boolean;
|
|
10
|
-
/** Sets a smaller text-size */
|
|
11
|
-
small?: boolean;
|
|
12
|
-
children: ReactNode;
|
|
13
|
-
} & SeenProp;
|
|
14
|
-
declare const TextBlock: (props: TextBlockProps) => JSX.Element;
|
|
15
|
-
export default TextBlock;
|
package/esm/TextBlock.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
import { useSeenEffect } from './utils/seenEffect';
|
|
4
|
-
const TextBlock = (props) => {
|
|
5
|
-
const { children, align, labelled, wide, small, startSeen } = props;
|
|
6
|
-
const rightAligned = align === 'right' || labelled;
|
|
7
|
-
const [ref] = useSeenEffect(startSeen);
|
|
8
|
-
return (React.createElement("div", { className: getBemClass('TextBlock', [
|
|
9
|
-
labelled && 'labelled',
|
|
10
|
-
rightAligned && 'align--right',
|
|
11
|
-
wide && !rightAligned && 'wide',
|
|
12
|
-
small && !labelled && 'small',
|
|
13
|
-
]), ref: ref }, children));
|
|
14
|
-
};
|
|
15
|
-
export default TextBlock;
|
package/esm/TextButton.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ButtonProps } from './_abstract/Button';
|
|
3
|
-
export declare type TextButtonProps = ButtonProps & {
|
|
4
|
-
disabled?: never;
|
|
5
|
-
};
|
|
6
|
-
declare const TextButton: (props: TextButtonProps & {
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
}) => JSX.Element;
|
|
9
|
-
export default TextButton;
|
package/esm/TextButton.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Button from './_abstract/Button';
|
|
3
|
-
const TextButton = (props) => {
|
|
4
|
-
if ('disabled' in props) {
|
|
5
|
-
props = Object.assign(Object.assign({}, props), { disabled: undefined });
|
|
6
|
-
}
|
|
7
|
-
return React.createElement(Button, Object.assign({ bem: "TextButton" }, props));
|
|
8
|
-
};
|
|
9
|
-
export default TextButton;
|
package/esm/TextInput.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
import { FormFieldWrappingProps } from './FormField';
|
|
3
|
-
declare type InputElmProps = JSX.IntrinsicElements['input'];
|
|
4
|
-
declare type TextareaElmProps = JSX.IntrinsicElements['textarea'];
|
|
5
|
-
export declare type TextInputProps = {
|
|
6
|
-
small?: boolean;
|
|
7
|
-
children?: undefined;
|
|
8
|
-
} & FormFieldWrappingProps & (({
|
|
9
|
-
type?: 'text' | 'email' | 'tel' | 'number' | 'date' | 'url' | 'password' | 'search';
|
|
10
|
-
inputRef?: RefObject<HTMLInputElement>;
|
|
11
|
-
} & InputElmProps) | ({
|
|
12
|
-
type: 'textarea';
|
|
13
|
-
inputRef?: RefObject<HTMLTextAreaElement>;
|
|
14
|
-
} & TextareaElmProps));
|
|
15
|
-
declare const TextInput: (props: TextInputProps) => JSX.Element;
|
|
16
|
-
export default TextInput;
|
package/esm/TextInput.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { useState } from 'react';
|
|
13
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
14
|
-
import FormField from './FormField';
|
|
15
|
-
const TextInput = (props) => {
|
|
16
|
-
var _a;
|
|
17
|
-
const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
|
|
18
|
-
const { value, defaultValue, placeholder } = inputElementProps;
|
|
19
|
-
const [hasValue, setHasValue] = useState(undefined);
|
|
20
|
-
const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
|
|
21
|
-
const empty = !filled && !placeholder;
|
|
22
|
-
const multiline = type === 'textarea';
|
|
23
|
-
const modifiers = [multiline && 'multiline'];
|
|
24
|
-
const _onChange = value != null
|
|
25
|
-
? onChange
|
|
26
|
-
: (e) => {
|
|
27
|
-
setHasValue(!!e.target.value);
|
|
28
|
-
onChange &&
|
|
29
|
-
onChange(
|
|
30
|
-
// TypeScript is silly sometimes.
|
|
31
|
-
e);
|
|
32
|
-
};
|
|
33
|
-
return (React.createElement(FormField, { className: getBemClass('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (React.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
|
|
34
|
-
};
|
|
35
|
-
export default TextInput;
|
package/esm/VSpacer.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
declare const sizes: {
|
|
3
|
-
readonly none: "none";
|
|
4
|
-
readonly small: "small";
|
|
5
|
-
readonly default: "";
|
|
6
|
-
readonly medium: "";
|
|
7
|
-
readonly large: "large";
|
|
8
|
-
readonly xlarge: "xlarge";
|
|
9
|
-
};
|
|
10
|
-
declare type VSpacerSize = keyof typeof sizes;
|
|
11
|
-
declare type VSpacerSizePos = Exclude<VSpacerSize, 'none'>;
|
|
12
|
-
export declare type VSpacerProps = {
|
|
13
|
-
children?: never;
|
|
14
|
-
size?: VSpacerSizePos;
|
|
15
|
-
top?: never;
|
|
16
|
-
bottom?: never;
|
|
17
|
-
} | {
|
|
18
|
-
children: ReactNode;
|
|
19
|
-
size?: VSpacerSizePos;
|
|
20
|
-
top?: VSpacerSize;
|
|
21
|
-
bottom?: VSpacerSize;
|
|
22
|
-
};
|
|
23
|
-
declare const VSpacer: (props: VSpacerProps) => JSX.Element;
|
|
24
|
-
export default VSpacer;
|
package/esm/VSpacer.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import getBemClass from '@hugsmidjan/react/utils/getBemClass';
|
|
3
|
-
const sizes = {
|
|
4
|
-
none: 'none',
|
|
5
|
-
small: 'small',
|
|
6
|
-
default: '',
|
|
7
|
-
medium: '',
|
|
8
|
-
large: 'large',
|
|
9
|
-
xlarge: 'xlarge',
|
|
10
|
-
};
|
|
11
|
-
const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
|
|
12
|
-
const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
|
|
13
|
-
const VSpacer = (props) => {
|
|
14
|
-
const { size, top, bottom, children } = props;
|
|
15
|
-
const isWrapper = hasChildren(children);
|
|
16
|
-
let topVal = normalizeProp(isWrapper && top);
|
|
17
|
-
let bottomVal = normalizeProp(isWrapper && bottom);
|
|
18
|
-
let sizeVal = !(topVal && bottomVal) && normalizeProp(size, 'none');
|
|
19
|
-
// collapse effectively-duplicate class modifiers
|
|
20
|
-
if (!sizeVal && topVal === bottomVal && topVal !== 'none') {
|
|
21
|
-
sizeVal = topVal;
|
|
22
|
-
topVal = bottomVal = undefined;
|
|
23
|
-
}
|
|
24
|
-
else if (sizeVal) {
|
|
25
|
-
if (sizeVal === topVal) {
|
|
26
|
-
sizeVal = topVal;
|
|
27
|
-
topVal = undefined;
|
|
28
|
-
}
|
|
29
|
-
if (sizeVal === bottomVal) {
|
|
30
|
-
sizeVal = bottomVal;
|
|
31
|
-
bottomVal = undefined;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
const className = getBemClass('VSpacer', [
|
|
35
|
-
sizeVal,
|
|
36
|
-
topVal && 'top--' + topVal,
|
|
37
|
-
bottomVal && 'bottom--' + bottomVal,
|
|
38
|
-
]);
|
|
39
|
-
return isWrapper ? (React.createElement("div", { className: className }, children)) : (React.createElement("hr", { className: className }));
|
|
40
|
-
};
|
|
41
|
-
export default VSpacer;
|
package/esm/VerticalTabsTOC.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { TabItemProps, TabsProps } from './Tabs';
|
|
2
|
-
export declare type VerticalTabsTOCItem = TabItemProps & {
|
|
3
|
-
items?: Array<VerticalTabsTOCSubItem>;
|
|
4
|
-
};
|
|
5
|
-
export declare type VerticalTabsTOCSubItem = TabItemProps & {
|
|
6
|
-
type?: never;
|
|
7
|
-
href: string;
|
|
8
|
-
};
|
|
9
|
-
export declare type VerticalTabsTOCProps = {
|
|
10
|
-
items: Array<VerticalTabsTOCItem>;
|
|
11
|
-
onItemSelect: (itemId: string) => void;
|
|
12
|
-
} & Pick<TabsProps, 'aria-label' | 'ssr' | 'activateOnFocus' | 'id' | 'startSeen'>;
|
|
13
|
-
declare const VerticalTabsTOC: (props: VerticalTabsTOCProps) => JSX.Element;
|
|
14
|
-
export default VerticalTabsTOC;
|