@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.
Files changed (359) hide show
  1. package/AccordionList.js +3 -28
  2. package/ActionCards.js +2 -4
  3. package/Alert.js +7 -32
  4. package/ArticleCards.js +2 -4
  5. package/ArticleCarousel/_ArticleCarouselCard.js +4 -6
  6. package/ArticleCarousel.js +3 -5
  7. package/ArticleMeta.js +3 -28
  8. package/Attention.js +3 -5
  9. package/BasicTable.js +5 -7
  10. package/BgBox.js +3 -5
  11. package/Bling.js +3 -5
  12. package/BlockBreak.js +2 -4
  13. package/BlockQuote.js +2 -4
  14. package/BreadCrumbs.js +2 -4
  15. package/ButtonBack.js +3 -5
  16. package/ButtonBar.js +3 -5
  17. package/ButtonPrimary.js +3 -5
  18. package/ButtonSecondary.js +3 -5
  19. package/ButtonTertiary.js +3 -5
  20. package/CHANGELOG.md +24 -0
  21. package/Carousel.js +3 -5
  22. package/CarouselStepper.js +3 -5
  23. package/CenterColumn.js +3 -5
  24. package/Checkbox.js +3 -5
  25. package/CheckboxButtonsGroup.js +4 -6
  26. package/CheckboxGroup.js +4 -6
  27. package/CityBlock.js +3 -5
  28. package/ContactBubble.js +4 -29
  29. package/ContentArticle.js +8 -10
  30. package/ContentImage.js +3 -5
  31. package/Datepicker.js +6 -31
  32. package/ExtraLinks.js +4 -17
  33. package/FeatureList.js +3 -5
  34. package/FieldGroup.js +3 -5
  35. package/FileInput.d.ts +16 -1
  36. package/FileInput.js +24 -61
  37. package/Foonote.js +2 -4
  38. package/FooterBadges.js +2 -4
  39. package/FooterInfo.js +3 -5
  40. package/Footnote.js +2 -4
  41. package/Form.js +3 -5
  42. package/FormField.js +3 -28
  43. package/Gallery/_GalleryItem.js +6 -42
  44. package/Gallery/_GalleryModal.js +6 -31
  45. package/Gallery/_GalleryModalContext.js +2 -4
  46. package/Gallery/_GalleryModalItem.js +4 -17
  47. package/Gallery.js +6 -31
  48. package/GridBlocks.js +5 -7
  49. package/Heading.js +3 -5
  50. package/HeroBlock.js +5 -7
  51. package/IframeBlock.d.ts +5 -1
  52. package/IframeBlock.js +6 -8
  53. package/Illustration.js +3 -5
  54. package/ImageCards.js +4 -17
  55. package/InfoBlock.js +2 -4
  56. package/InfoHero.js +7 -9
  57. package/IslandBlock.js +3 -5
  58. package/IslandPageBlock.js +3 -5
  59. package/LabeledTextBlock.js +4 -6
  60. package/Layout.js +4 -6
  61. package/MainMenu/_Auxiliary.js +2 -4
  62. package/MainMenu/_PrimaryPanel.js +3 -5
  63. package/MainMenu.js +5 -30
  64. package/MiniMetrics.js +4 -6
  65. package/Modal.js +3 -5
  66. package/NameCard.js +5 -7
  67. package/NameCards.js +3 -5
  68. package/NewsHero.js +6 -8
  69. package/PageFilter.js +4 -6
  70. package/PageHeading.js +3 -5
  71. package/Picture.js +4 -6
  72. package/ProcessOverview.js +3 -5
  73. package/PullQuote.js +2 -4
  74. package/RadioButtonsGroup.js +4 -6
  75. package/RadioGroup.js +4 -6
  76. package/RelatedLinks.js +2 -4
  77. package/RowBlock.js +3 -5
  78. package/RowBlockColumn.js +3 -5
  79. package/SearchInput.js +5 -41
  80. package/SearchResults/_SearchResultsItem.js +3 -5
  81. package/SearchResults.js +7 -32
  82. package/SeenEffect.js +3 -16
  83. package/Selectbox.js +6 -42
  84. package/ShareButtons.js +2 -24
  85. package/Sharpie.js +3 -5
  86. package/SiteSearchAutocomplete.js +5 -41
  87. package/SiteSearchCurtain.js +3 -28
  88. package/SiteSearchInput.d.ts +1 -1
  89. package/SiteSearchInput.js +4 -40
  90. package/Skeleton.js +4 -6
  91. package/SubHeading.js +3 -5
  92. package/Tabs.js +3 -28
  93. package/TagPill.js +5 -18
  94. package/TextBlock.js +3 -5
  95. package/TextButton.js +3 -5
  96. package/TextInput.js +5 -41
  97. package/VSpacer.js +3 -5
  98. package/VerticalTabsTOC.js +3 -28
  99. package/WizardLayout.js +3 -5
  100. package/WizardLayoutClose.js +3 -5
  101. package/WizardStepper.js +3 -5
  102. package/_abstract/_AbstractCarousel.js +45 -95
  103. package/_abstract/_Blings.js +3 -5
  104. package/_abstract/_Block.js +5 -7
  105. package/_abstract/_Button.js +4 -17
  106. package/_abstract/_CardList.js +4 -6
  107. package/_abstract/_Image.js +3 -5
  108. package/_abstract/_Link.js +2 -4
  109. package/_abstract/_Quote.js +2 -4
  110. package/_abstract/_TogglerGroup.js +8 -8
  111. package/_abstract/_TogglerGroupField.js +6 -19
  112. package/_abstract/_TogglerInput.js +4 -17
  113. package/_abstract/breakOnNL.js +2 -4
  114. package/assets.d.ts +1 -1
  115. package/package.json +4 -378
  116. package/utils/env.js +2 -4
  117. package/utils/seenEffect.d.ts +3 -4
  118. package/utils/seenEffect.js +20 -19
  119. package/utils/useScrollbarWidthCSSVar.js +2 -4
  120. package/utils.js +3 -16
  121. package/esm/AccordionList.d.ts +0 -17
  122. package/esm/AccordionList.js +0 -24
  123. package/esm/ActionCards.d.ts +0 -5
  124. package/esm/ActionCards.js +0 -9
  125. package/esm/Alert.d.ts +0 -49
  126. package/esm/Alert.js +0 -92
  127. package/esm/ArticleCards.d.ts +0 -6
  128. package/esm/ArticleCards.js +0 -4
  129. package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts +0 -27
  130. package/esm/ArticleCarousel/_ArticleCarouselCard.js +0 -24
  131. package/esm/ArticleCarousel.d.ts +0 -12
  132. package/esm/ArticleCarousel.js +0 -8
  133. package/esm/ArticleMeta.d.ts +0 -10
  134. package/esm/ArticleMeta.js +0 -19
  135. package/esm/Attention.d.ts +0 -7
  136. package/esm/Attention.js +0 -4
  137. package/esm/BasicTable.d.ts +0 -12
  138. package/esm/BasicTable.js +0 -29
  139. package/esm/BgBox.d.ts +0 -8
  140. package/esm/BgBox.js +0 -9
  141. package/esm/Bling.d.ts +0 -81
  142. package/esm/Bling.js +0 -44
  143. package/esm/BlockBreak.d.ts +0 -2
  144. package/esm/BlockBreak.js +0 -6
  145. package/esm/BlockQuote.d.ts +0 -4
  146. package/esm/BlockQuote.js +0 -4
  147. package/esm/BreadCrumbs.d.ts +0 -11
  148. package/esm/BreadCrumbs.js +0 -28
  149. package/esm/ButtonBack.d.ts +0 -7
  150. package/esm/ButtonBack.js +0 -4
  151. package/esm/ButtonBar.d.ts +0 -16
  152. package/esm/ButtonBar.js +0 -14
  153. package/esm/ButtonPrimary.d.ts +0 -7
  154. package/esm/ButtonPrimary.js +0 -4
  155. package/esm/ButtonSecondary.d.ts +0 -7
  156. package/esm/ButtonSecondary.js +0 -4
  157. package/esm/ButtonTertiary.d.ts +0 -12
  158. package/esm/ButtonTertiary.js +0 -15
  159. package/esm/Carousel.d.ts +0 -4
  160. package/esm/Carousel.js +0 -4
  161. package/esm/CarouselStepper.d.ts +0 -4
  162. package/esm/CarouselStepper.js +0 -4
  163. package/esm/CenterColumn.d.ts +0 -7
  164. package/esm/CenterColumn.js +0 -7
  165. package/esm/Checkbox.d.ts +0 -4
  166. package/esm/Checkbox.js +0 -4
  167. package/esm/CheckboxButtonsGroup.d.ts +0 -11
  168. package/esm/CheckboxButtonsGroup.js +0 -14
  169. package/esm/CheckboxGroup.d.ts +0 -9
  170. package/esm/CheckboxGroup.js +0 -7
  171. package/esm/CityBlock.d.ts +0 -23
  172. package/esm/CityBlock.js +0 -18
  173. package/esm/ContactBubble.d.ts +0 -58
  174. package/esm/ContactBubble.js +0 -148
  175. package/esm/ContentArticle.d.ts +0 -15
  176. package/esm/ContentArticle.js +0 -21
  177. package/esm/ContentImage.d.ts +0 -8
  178. package/esm/ContentImage.js +0 -18
  179. package/esm/Datepicker.d.ts +0 -39
  180. package/esm/Datepicker.js +0 -63
  181. package/esm/ExtraLinks.d.ts +0 -18
  182. package/esm/ExtraLinks.js +0 -34
  183. package/esm/FeatureList.d.ts +0 -12
  184. package/esm/FeatureList.js +0 -16
  185. package/esm/FieldGroup.d.ts +0 -9
  186. package/esm/FieldGroup.js +0 -9
  187. package/esm/FileInput.d.ts +0 -17
  188. package/esm/FileInput.js +0 -154
  189. package/esm/Foonote.d.ts +0 -12
  190. package/esm/Foonote.js +0 -7
  191. package/esm/FooterBadges.d.ts +0 -9
  192. package/esm/FooterBadges.js +0 -12
  193. package/esm/FooterInfo.d.ts +0 -18
  194. package/esm/FooterInfo.js +0 -9
  195. package/esm/Footnote.d.ts +0 -6
  196. package/esm/Footnote.js +0 -3
  197. package/esm/Form.d.ts +0 -7
  198. package/esm/Form.js +0 -10
  199. package/esm/FormField.d.ts +0 -65
  200. package/esm/FormField.js +0 -91
  201. package/esm/Gallery/_GalleryItem.d.ts +0 -8
  202. package/esm/Gallery/_GalleryItem.js +0 -30
  203. package/esm/Gallery/_GalleryModal.d.ts +0 -6
  204. package/esm/Gallery/_GalleryModal.js +0 -54
  205. package/esm/Gallery/_GalleryModalContext.d.ts +0 -9
  206. package/esm/Gallery/_GalleryModalContext.js +0 -3
  207. package/esm/Gallery/_GalleryModalItem.d.ts +0 -3
  208. package/esm/Gallery/_GalleryModalItem.js +0 -22
  209. package/esm/Gallery.d.ts +0 -17
  210. package/esm/Gallery.js +0 -27
  211. package/esm/GridBlocks.d.ts +0 -26
  212. package/esm/GridBlocks.js +0 -24
  213. package/esm/Heading.d.ts +0 -16
  214. package/esm/Heading.js +0 -17
  215. package/esm/HeroBlock.d.ts +0 -19
  216. package/esm/HeroBlock.js +0 -21
  217. package/esm/IframeBlock.d.ts +0 -23
  218. package/esm/IframeBlock.js +0 -26
  219. package/esm/Illustration.d.ts +0 -13
  220. package/esm/Illustration.js +0 -8
  221. package/esm/ImageCards.d.ts +0 -8
  222. package/esm/ImageCards.js +0 -22
  223. package/esm/InfoBlock.d.ts +0 -17
  224. package/esm/InfoBlock.js +0 -13
  225. package/esm/InfoHero.d.ts +0 -17
  226. package/esm/InfoHero.js +0 -82
  227. package/esm/IslandBlock.d.ts +0 -25
  228. package/esm/IslandBlock.js +0 -16
  229. package/esm/IslandPageBlock.d.ts +0 -24
  230. package/esm/IslandPageBlock.js +0 -16
  231. package/esm/LabeledTextBlock.d.ts +0 -11
  232. package/esm/LabeledTextBlock.js +0 -14
  233. package/esm/Layout.d.ts +0 -33
  234. package/esm/Layout.js +0 -52
  235. package/esm/MainMenu/_Auxiliary.d.ts +0 -6
  236. package/esm/MainMenu/_Auxiliary.js +0 -13
  237. package/esm/MainMenu/_PrimaryPanel.d.ts +0 -13
  238. package/esm/MainMenu/_PrimaryPanel.js +0 -22
  239. package/esm/MainMenu.d.ts +0 -48
  240. package/esm/MainMenu.js +0 -136
  241. package/esm/MiniMetrics.d.ts +0 -8
  242. package/esm/MiniMetrics.js +0 -12
  243. package/esm/Modal.d.ts +0 -10
  244. package/esm/Modal.js +0 -14
  245. package/esm/NameCard.d.ts +0 -64
  246. package/esm/NameCard.js +0 -82
  247. package/esm/NameCards.d.ts +0 -6
  248. package/esm/NameCards.js +0 -7
  249. package/esm/NewsHero.d.ts +0 -14
  250. package/esm/NewsHero.js +0 -86
  251. package/esm/PageFilter.d.ts +0 -17
  252. package/esm/PageFilter.js +0 -15
  253. package/esm/PageHeading.d.ts +0 -10
  254. package/esm/PageHeading.js +0 -12
  255. package/esm/Picture.d.ts +0 -7
  256. package/esm/Picture.js +0 -8
  257. package/esm/ProcessOverview.d.ts +0 -13
  258. package/esm/ProcessOverview.js +0 -17
  259. package/esm/PullQuote.d.ts +0 -4
  260. package/esm/PullQuote.js +0 -4
  261. package/esm/RadioButtonsGroup.d.ts +0 -11
  262. package/esm/RadioButtonsGroup.js +0 -14
  263. package/esm/RadioGroup.d.ts +0 -13
  264. package/esm/RadioGroup.js +0 -7
  265. package/esm/RelatedLinks.d.ts +0 -20
  266. package/esm/RelatedLinks.js +0 -26
  267. package/esm/RowBlock.d.ts +0 -12
  268. package/esm/RowBlock.js +0 -9
  269. package/esm/RowBlockColumn.d.ts +0 -8
  270. package/esm/RowBlockColumn.js +0 -11
  271. package/esm/SearchInput.d.ts +0 -18
  272. package/esm/SearchInput.js +0 -33
  273. package/esm/SearchResults/_SearchResultsItem.d.ts +0 -18
  274. package/esm/SearchResults/_SearchResultsItem.js +0 -15
  275. package/esm/SearchResults.d.ts +0 -33
  276. package/esm/SearchResults.js +0 -109
  277. package/esm/SeenEffect.d.ts +0 -4
  278. package/esm/SeenEffect.js +0 -19
  279. package/esm/Selectbox.d.ts +0 -8
  280. package/esm/Selectbox.js +0 -46
  281. package/esm/ShareButtons.d.ts +0 -9
  282. package/esm/ShareButtons.js +0 -51
  283. package/esm/Sharpie.d.ts +0 -23
  284. package/esm/Sharpie.js +0 -22
  285. package/esm/SiteSearchAutocomplete.d.ts +0 -40
  286. package/esm/SiteSearchAutocomplete.js +0 -58
  287. package/esm/SiteSearchCurtain.d.ts +0 -6
  288. package/esm/SiteSearchCurtain.js +0 -33
  289. package/esm/SiteSearchInput.d.ts +0 -24
  290. package/esm/SiteSearchInput.js +0 -40
  291. package/esm/Skeleton.d.ts +0 -25
  292. package/esm/Skeleton.js +0 -30
  293. package/esm/SubHeading.d.ts +0 -10
  294. package/esm/SubHeading.js +0 -13
  295. package/esm/Tabs.d.ts +0 -35
  296. package/esm/Tabs.js +0 -94
  297. package/esm/TagPill.d.ts +0 -27
  298. package/esm/TagPill.js +0 -43
  299. package/esm/TextBlock.d.ts +0 -15
  300. package/esm/TextBlock.js +0 -15
  301. package/esm/TextButton.d.ts +0 -9
  302. package/esm/TextButton.js +0 -9
  303. package/esm/TextInput.d.ts +0 -16
  304. package/esm/TextInput.js +0 -35
  305. package/esm/VSpacer.d.ts +0 -24
  306. package/esm/VSpacer.js +0 -41
  307. package/esm/VerticalTabsTOC.d.ts +0 -14
  308. package/esm/VerticalTabsTOC.js +0 -68
  309. package/esm/WizardLayout.d.ts +0 -15
  310. package/esm/WizardLayout.js +0 -30
  311. package/esm/WizardLayoutClose.d.ts +0 -3
  312. package/esm/WizardLayoutClose.js +0 -4
  313. package/esm/WizardStepper.d.ts +0 -36
  314. package/esm/WizardStepper.js +0 -25
  315. package/esm/_abstract/_AbstractCarousel.d.ts +0 -25
  316. package/esm/_abstract/_AbstractCarousel.js +0 -130
  317. package/esm/_abstract/_Blings.d.ts +0 -11
  318. package/esm/_abstract/_Blings.js +0 -12
  319. package/esm/_abstract/_Block.d.ts +0 -22
  320. package/esm/_abstract/_Block.js +0 -24
  321. package/esm/_abstract/_Button.d.ts +0 -40
  322. package/esm/_abstract/_Button.js +0 -47
  323. package/esm/_abstract/_CardList.d.ts +0 -30
  324. package/esm/_abstract/_CardList.js +0 -38
  325. package/esm/_abstract/_Image.d.ts +0 -36
  326. package/esm/_abstract/_Image.js +0 -27
  327. package/esm/_abstract/_Link.d.ts +0 -27
  328. package/esm/_abstract/_Link.js +0 -24
  329. package/esm/_abstract/_Quote.d.ts +0 -9
  330. package/esm/_abstract/_Quote.js +0 -8
  331. package/esm/_abstract/_TogglerGroup.d.ts +0 -31
  332. package/esm/_abstract/_TogglerGroup.js +0 -29
  333. package/esm/_abstract/_TogglerGroupField.d.ts +0 -17
  334. package/esm/_abstract/_TogglerGroupField.js +0 -22
  335. package/esm/_abstract/_TogglerInput.d.ts +0 -22
  336. package/esm/_abstract/_TogglerInput.js +0 -33
  337. package/esm/_abstract/breakOnNL.d.ts +0 -2
  338. package/esm/_abstract/breakOnNL.js +0 -8
  339. package/esm/assets.d.ts +0 -42
  340. package/esm/assets.js +0 -56
  341. package/esm/constants.d.ts +0 -39
  342. package/esm/constants.js +0 -22
  343. package/esm/focus-visible.d.ts +0 -1
  344. package/esm/focus-visible.js +0 -1
  345. package/esm/package.json +0 -1
  346. package/esm/utils/env.d.ts +0 -1
  347. package/esm/utils/env.js +0 -8
  348. package/esm/utils/seenEffect.d.ts +0 -28
  349. package/esm/utils/seenEffect.js +0 -73
  350. package/esm/utils/useFormatMonitor.d.ts +0 -38
  351. package/esm/utils/useFormatMonitor.js +0 -41
  352. package/esm/utils/useGetSVGtext.d.ts +0 -6
  353. package/esm/utils/useGetSVGtext.js +0 -19
  354. package/esm/utils/useMenuToggling.d.ts +0 -8
  355. package/esm/utils/useMenuToggling.js +0 -62
  356. package/esm/utils/useScrollbarWidthCSSVar.d.ts +0 -1
  357. package/esm/utils/useScrollbarWidthCSSVar.js +0 -3
  358. package/esm/utils.d.ts +0 -2
  359. package/esm/utils.js +0 -2
@@ -1,6 +0,0 @@
1
- import { ReactNode } from 'react';
2
- export declare type SiteSearchCurtain = {
3
- children: ReactNode;
4
- };
5
- declare const SiteSearchCurtain: (props: SiteSearchCurtain) => JSX.Element;
6
- export default SiteSearchCurtain;
@@ -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;
@@ -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;
@@ -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 }));
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;