@reykjavik/hanna-react 0.10.59 → 0.10.62
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.js +2 -4
- package/Alert.js +7 -32
- package/ArticleCards.js +2 -4
- package/ArticleCarousel/_ArticleCarouselCard.js +4 -6
- package/ArticleCarousel.js +3 -5
- package/ArticleMeta.js +3 -28
- package/Attention.js +3 -5
- package/BasicTable.js +5 -7
- package/BgBox.js +3 -5
- package/Bling.js +3 -5
- package/BlockBreak.js +2 -4
- package/BlockQuote.js +2 -4
- package/BreadCrumbs.js +2 -4
- package/ButtonBack.js +3 -5
- package/ButtonBar.js +3 -5
- package/ButtonPrimary.js +3 -5
- package/ButtonSecondary.js +3 -5
- package/ButtonTertiary.js +3 -5
- package/CHANGELOG.md +24 -0
- package/Carousel.js +3 -5
- package/CarouselStepper.js +3 -5
- package/CenterColumn.js +3 -5
- package/Checkbox.js +3 -5
- package/CheckboxButtonsGroup.js +4 -6
- package/CheckboxGroup.js +4 -6
- package/CityBlock.js +3 -5
- package/ContactBubble.js +4 -29
- package/ContentArticle.js +8 -10
- package/ContentImage.js +3 -5
- package/Datepicker.js +6 -31
- package/ExtraLinks.js +4 -17
- package/FeatureList.js +3 -5
- package/FieldGroup.js +3 -5
- package/FileInput.d.ts +16 -1
- package/FileInput.js +24 -61
- package/Foonote.js +2 -4
- package/FooterBadges.js +2 -4
- package/FooterInfo.js +3 -5
- package/Footnote.js +2 -4
- package/Form.js +3 -5
- package/FormField.js +3 -28
- package/Gallery/_GalleryItem.js +6 -42
- package/Gallery/_GalleryModal.js +6 -31
- package/Gallery/_GalleryModalContext.js +2 -4
- package/Gallery/_GalleryModalItem.js +4 -17
- package/Gallery.js +6 -31
- package/GridBlocks.js +5 -7
- package/Heading.js +3 -5
- package/HeroBlock.js +5 -7
- package/IframeBlock.d.ts +5 -1
- package/IframeBlock.js +6 -8
- package/Illustration.js +3 -5
- package/ImageCards.js +4 -17
- package/InfoBlock.js +2 -4
- package/InfoHero.js +7 -9
- package/IslandBlock.js +3 -5
- package/IslandPageBlock.js +3 -5
- package/LabeledTextBlock.js +4 -6
- package/Layout.js +4 -6
- package/MainMenu/_Auxiliary.js +2 -4
- package/MainMenu/_PrimaryPanel.js +3 -5
- package/MainMenu.js +5 -30
- package/MiniMetrics.js +4 -6
- package/Modal.js +3 -5
- package/NameCard.js +5 -7
- package/NameCards.js +3 -5
- package/NewsHero.js +6 -8
- package/PageFilter.js +4 -6
- package/PageHeading.js +3 -5
- package/Picture.js +4 -6
- package/ProcessOverview.js +3 -5
- package/PullQuote.js +2 -4
- package/RadioButtonsGroup.js +4 -6
- package/RadioGroup.js +4 -6
- package/RelatedLinks.js +2 -4
- package/RowBlock.js +3 -5
- package/RowBlockColumn.js +3 -5
- package/SearchInput.js +5 -41
- package/SearchResults/_SearchResultsItem.js +3 -5
- package/SearchResults.js +7 -32
- package/SeenEffect.js +3 -16
- package/Selectbox.js +6 -42
- package/ShareButtons.js +2 -24
- 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.js +5 -18
- package/TextBlock.js +3 -5
- package/TextButton.js +3 -5
- package/TextInput.js +5 -41
- package/VSpacer.js +3 -5
- package/VerticalTabsTOC.js +3 -28
- package/WizardLayout.js +3 -5
- package/WizardLayoutClose.js +3 -5
- package/WizardStepper.js +3 -5
- package/_abstract/_AbstractCarousel.js +45 -95
- package/_abstract/_Blings.js +3 -5
- package/_abstract/_Block.js +5 -7
- package/_abstract/_Button.js +4 -17
- package/_abstract/_CardList.js +4 -6
- package/_abstract/_Image.js +3 -5
- package/_abstract/_Link.js +2 -4
- package/_abstract/_Quote.js +2 -4
- package/_abstract/_TogglerGroup.js +8 -8
- package/_abstract/_TogglerGroupField.js +6 -19
- package/_abstract/_TogglerInput.js +4 -17
- package/_abstract/breakOnNL.js +2 -4
- package/assets.d.ts +1 -1
- package/package.json +4 -378
- package/utils/env.js +2 -4
- package/utils/seenEffect.d.ts +3 -4
- package/utils/seenEffect.js +20 -19
- package/utils/useScrollbarWidthCSSVar.js +2 -4
- package/utils.js +3 -16
- 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/ArticleCards.d.ts +0 -6
- package/esm/ArticleCards.js +0 -4
- 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 -10
- package/esm/ArticleMeta.js +0 -19
- 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/BgBox.d.ts +0 -8
- package/esm/BgBox.js +0 -9
- 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.d.ts +0 -7
- 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/Picture.d.ts +0 -7
- package/esm/Picture.js +0 -8
- 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/_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/_Button.d.ts +0 -40
- package/esm/_abstract/_Button.js +0 -47
- package/esm/_abstract/_CardList.d.ts +0 -30
- package/esm/_abstract/_CardList.js +0 -38
- package/esm/_abstract/_Image.d.ts +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/_Quote.d.ts +0 -9
- package/esm/_abstract/_Quote.js +0 -8
- package/esm/_abstract/_TogglerGroup.d.ts +0 -31
- package/esm/_abstract/_TogglerGroup.js +0 -29
- package/esm/_abstract/_TogglerGroupField.d.ts +0 -17
- 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/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" | "multiple" | "alt" | "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;
|