loon-bulma-react 2021.1.32 → 2022.0.0

package/README.md

@@ -23,11 +23,13 @@
   - [Footer](#component-footer)
   - [Icons (FontAwesome)](#component-icons)
   - [Link & LinkButon](#component-linkbutton)
+  - [Menu](#component-menu)
   - [Messages & Notificaties](#component-messages)
   - [Modal](#component-modal)
   - [ProgressBars](#component-progressbar)
   - [Table](#component-table)
   - [Tabs](#component-tabs)
+  - [Tag](#component-tags)
   - [Titles & Subtitles](#component-titles)
   - [Form & Inputs](#form)
     - [Input Types](#form-input)
@@ -98,13 +100,13 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 in `index.tsx`
 
 ```tsx
-import "loon-bulma-react/styles/_all.scss";
+import 'loon-bulma-react/styles/_all.scss';
 ```
 
 in een eigen component, bijvoorbeeld de Columns:
 
 ```tsx
-import { Columns, Column } from "loon-bulma-react";
+import { Columns, Column } from 'loon-bulma-react';
 
 function MyComponent(props) {
   return (
@@ -142,14 +144,14 @@ import { NotifierProvider } from  'loon-react-bulma';
 
 ```tsx
 // MyComponent.tsx
-import { useNotifier } from "loon-react-bulma";
+import { useNotifier } from 'loon-react-bulma';
 // ...
 const { notify } = useNotifier();
 const addNotification = () => {
   notify({
-    type: "i",
-    content: "Dit is een notification",
-    onClick: () => console.log("notification clicked!"),
+    type: 'i',
+    content: 'Dit is een notification',
+    onClick: () => console.log('notification clicked!'),
     dismissAfter: 2500, // dismiss na 2500 ms
   });
 };
@@ -178,7 +180,7 @@ De `useNotifier()`-hook is een custom hook voor het gebruik van de notifier. Dez
 Alleen de functions importeren die je nodig hebt is genoeg
 
 ```ts
-import { useNotifier } from "loon-react-bulma";
+import { useNotifier } from 'loon-react-bulma';
 const { notify, remove, clear } = useNotifier();
 ```
 
@@ -317,19 +319,19 @@ Een hero bevat een optionele array van top-items:
 ```ts
 const headItems = [
   {
-    txt: "Bulma",
-    action: (e: any) => console.log("Bulma", e),
-    tooltip: "Bulma website",
+    txt: 'Bulma',
+    action: (e: any) => console.log('Bulma', e),
+    tooltip: 'Bulma website',
   },
   {
-    txt: "React",
-    action: (e: any) => console.log("React", e),
-    tooltip: "React website",
+    txt: 'React',
+    action: (e: any) => console.log('React', e),
+    tooltip: 'React website',
   },
   {
-    txt: "NodeJS",
-    action: (e: any) => console.log("NodeJS", e),
-    tooltip: "NodeJS website",
+    txt: 'NodeJS',
+    action: (e: any) => console.log('NodeJS', e),
+    tooltip: 'NodeJS website',
   },
 ];
 ```
@@ -357,12 +359,7 @@ De hero wordt dan zo gebruikt:
 
 ```tsx
 <div>
-  <Hero
-    title="Hero title"
-    subtitle="Hero subtitle"
-    headItems={headitems}
-    navItems={navItems}
-  />
+  <Hero title="Hero title" subtitle="Hero subtitle" headItems={headitems} navItems={navItems} />
 </div>
 ```
 
@@ -372,28 +369,9 @@ Een afbeelding met een vastgestelde aspect-ratio. Een ratio 'square' kan een gro
 
 ```tsx
 <div>
-  <Image
-    figCaption="16x16"
-    src=".../16x16.png"
-    alt="x"
-    ratio="square"
-    size="16"
-  />
-  <Image
-    figCaption="16x16"
-    isRounded={true}
-    src=".../16x16.png"
-    alt="x"
-    ratio="square"
-    size="16"
-  />
-  <Image
-    ratio="5by4"
-    size="250px"
-    src=".../600x480.png"
-    alt="x"
-    figCaption="x"
-  />
+  <Image figCaption="16x16" src=".../16x16.png" alt="x" ratio="square" size="16" />
+  <Image figCaption="16x16" isRounded={true} src=".../16x16.png" alt="x" ratio="square" size="16" />
+  <Image ratio="5by4" size="250px" src=".../600x480.png" alt="x" figCaption="x" />
 </div>
 ```
 
@@ -419,25 +397,13 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 #### Horizontaal:
 
 ```tsx
-<ScrollArea.Horizontal gap={{ row: "1em", col: 16 }} wrap={true} align="c">
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
-  <div>
-    Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen
-  </div>
+<ScrollArea.Horizontal gap={{ row: '1em', col: 16 }} wrap={true} alignment="c">
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
+  <div>Deze items worden naast elkaar getoont, en je kan naar link/rechts scrollen</div>
 </ScrollArea.Horizontal>
 ```
 
@@ -445,39 +411,20 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 
 ```tsx
 <ScrollArea.Vertical maxHeight={600}>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
-  <div>
-    Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px"
-    dan kan je scrollen
-  </div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
+  <div>Deze items worden onder elkaar weergegeven, en als dat hoger is dan "600px" dan kan je scrollen</div>
 </ScrollArea.Vertical>
 ```
 
-
 ### Button & ButtonGroup <a id="component-button"></a>
 
-Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 4 beschikbaar: _Primary_, _Danger_, _Success_, _Link_
+Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_
 
-- **Bttn**: een default button (primary color)
+- **Bttn**: een default button (met instelbare `color`-props)
 - **Button**: default bulma button style
 - **LightButton**: light bulma button style
 - **LightOutlinedButton** light & outlined combi button style.
@@ -494,21 +441,18 @@ Door geen tekst toe te voegen aan de children-prop in de Button, kan een button
 De `ButtonGroup`-component kan gebruikt worden om buttons te grouperen en de grootte voor buttons in te stellen.
 
 ```tsx
-import {
-  ButtonGroup,
-  Button,
-  Bttn,
-  LightButton,
-  InvertedButton,
-  OutlinedButton,
-} from "loon-bulma-react";
+import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton } from 'loon-bulma-react';
 
 <ButtonGroup>
   <Bttn>click me</Bttn>
+  <Bttn color="p">click me</Bttn>
+  <Bttn color="s">click me</Bttn>
+
   <Button.Primary>click me</Button.Primary>
+  <Button.Warning>click me</Button.Warning>
   <LightButton.Success>click me</LightButton.Success>
   <LightOutlinedButton.Link>click me</LightOutlinedButton.Link>
-  <OutlinedButton.Link>click me</OutlinedButton.Link>
+  <OutlinedButton.Info>click me</OutlinedButton.Info>
   <InvertedButton.Danger>click me</InvertedButton.Danger>
 </ButtonGroup>;
 ```
@@ -534,35 +478,35 @@ Om eigen classes toe te voegen aan rows en aan columns zijn er methodes:
 
 ```tsx
 /** AppDataTable.tsx */
-import { tableData } from "../MOCK_DATA";
-import { DataTable } from "loon-bulma-react";
-import "./datatable.styles.css";
+import { tableData } from '../MOCK_DATA';
+import { DataTable } from 'loon-bulma-react';
+import './datatable.styles.css';
 
 const nameSortFn = (a: any, b: any) => {
-  const aNaam = a.first_name + " " + a.last_name;
-  const bNaam = b.first_name + " " + b.last_name;
+  const aNaam = a.first_name + ' ' + a.last_name;
+  const bNaam = b.first_name + ' ' + b.last_name;
   if (aNaam < bNaam) return -1;
   if (aNaam > bNaam) return 1;
   return 0;
 };
 
 const dataTableHeaders = [
-  { sort: true, value: "id" },
+  { sort: true, value: 'id' },
   {
-    header: "Naam",
+    header: 'Naam',
     sort: nameSortFn,
     value: (v: any) => `${v.first_name} ${v.last_name}`,
   },
-  { header: "Voornaam", sort: true, value: "first_name" },
-  { header: "Achternaam", sort: true, value: "last_name" },
+  { header: 'Voornaam', sort: true, value: 'first_name' },
+  { header: 'Achternaam', sort: true, value: 'last_name' },
   {
-    value: "email",
-    columnClasses: (usr) => (usr.email.includes(".com") ? "is-marked" : ""),
+    value: 'email',
+    columnClasses: (usr) => (usr.email.includes('.com') ? 'is-marked' : ''),
   },
-  { header: "Geslacht", sort: true, value: "gender" },
-  { header: "Taal", sort: true, value: "language" },
+  { header: 'Geslacht', sort: true, value: 'gender' },
+  { header: 'Taal', sort: true, value: 'language' },
   {
-    header: "",
+    header: '',
     sort: false,
     value: () => <InvertedButton.Danger>DEL</InvertedButton.Danger>,
   },
@@ -575,7 +519,7 @@ export function DataTableTab() {
 
   const handleRowClick = (item: IPersoon, rowEl: HTMLTableRowElement) => {
     console.log(item, rowEl);
-    rowEl.classList.toggle("is-selected");
+    rowEl.classList.toggle('is-selected');
   };
 
   return (
@@ -583,9 +527,7 @@ export function DataTableTab() {
       data={data}
       columns={columns}
       onRowSelected={(i, r) => handleRowClick(i, r)}
-      rowClasses={(item: IUser) =>
-        item.first_name.startsWith("C") ? "is-dangerous" : ""
-      }
+      rowClasses={(item: IUser) => (item.first_name.startsWith('C') ? 'is-dangerous' : '')}
       searchTxt="Zoek een persoon ..."
       rowIdentifier="id"
       striped={true}
@@ -652,23 +594,104 @@ Link en LinkButton zijn bedoelt om links (`<a>`) en buttons (`<button>`) er, bij
 ```tsx
 <div>
   <Footer>
-    Dit is een <Link href="http://www.kanikeenkortebroekaan.nl">Link</Link>. En
-    dit is een{" "}
-    <LinkButton onClick={(e: any) => console.log(e)}>button</LinkButton> die er
-    uit ziet als een link.
+    Dit is een <Link href="http://www.kanikeenkortebroekaan.nl">Link</Link>. En dit is een{' '}
+    <LinkButton onClick={(e: any) => console.log(e)}>button</LinkButton> die er uit ziet als een link.
   </Footer>
 </div>
 ```
 
+### Menu <a id="component-menu"></a>
+
+Een menu is een verticale lijst van 'blokjes' met een optioneel label, en een array van items. Deze items kunnen ook weer een lijst van sub-items bevatten.
+De `<Menu />`-tag heeft een `onMenuItemChanged(id: nuymber|string)` function voor als het geselecteerde menu wijzigt.
+
+De menu-items hebben een optioneel id, net als de sub-menu-items. Als er geen ID is opgegeven, maakt het menu zelf id's aan op basis van de globale menu-index. Dit is dan ook het nummer dat doorgegeven wordt met `onMenuItemChanged(id: nuymber|string)`.
+
+##### Deze ID's zijn gegenereerd door de component
+
+```tsx
+<Menu
+  onMenuItemChanged={(id: string | number) => console.log(`menu item ${id} selected`)}
+  blocks={[
+    {
+      label: 'General',
+      items: [
+        { itemTxt: 'Dashboard' }, // id 0
+        { itemTxt: 'Customers' }, // id 1
+      ],
+    },
+    {
+      label: 'Administration',
+      items: [
+        { itemTxt: 'Team Settings' }, // id 2
+        {
+          itemTxt: 'Manage Your Team',
+          itemList: [
+            // id 3
+            { txt: 'Members' }, // id 4
+            { txt: 'Add a member' }, // id 5
+          ],
+        },
+        { itemTxt: 'Invitations' }, // id 6
+      ],
+    },
+    {
+      label: 'Transactions',
+      items: [
+        { itemTxt: 'Payments' }, // id 7
+        { itemTxt: 'Transfers' }, // id 8
+      ],
+    },
+  ]}
+/>
+```
+
+##### ID's kan je ook zelf opgeven
+
+```tsx
+<Menu
+  onMenuItemChanged={(id: string | number) => console.log(`menu item ${id} selected`)}
+  blocks={[
+    {
+      label: 'General',
+      items: [
+        { itemTxt: 'Dashboard', id: 1 },
+        { itemTxt: 'Customers', id: 2 },
+      ],
+    },
+    {
+      label: 'Administration',
+      items: [
+        { itemTxt: 'Team Settings', id: '3' },
+        {
+          itemTxt: 'Manage Your Team',
+          id: '4',
+          itemList: [
+            { txt: 'Members', id: '4a' },
+            { txt: 'Add a member', id: '4b' },
+          ],
+        },
+        { itemTxt: 'Invitations', id: 5 },
+      ],
+    },
+    {
+      label: 'Transactions',
+      items: [
+        { itemTxt: 'Payments', id: 6 },
+        { itemTxt: 'Transfers', id: 7 },
+      ],
+    },
+  ]}
+/>
+```
+
 ### Messages & Notifications <a id="component-messages"></a>
 
 Een message of een notifcatie bevatten een tekst. Messages hebben ook een optionele titel. Er zjn 4 soorten: _Warning_, _Info_, _Success_, _Danger_.
 
 ```tsx
 <div>
-  <Message.Info title="Message Header">
-    Info message met een header
-  </Message.Info>
+  <Message.Info title="Message Header">Info message met een header</Message.Info>
   <Message.Success>Success message zonder header</Message.Success>
 </div>
 ```
@@ -677,15 +700,11 @@ Een notificatie bevat ook een tekst, maar heeft ook een dimsiss-button. Deze met
 
 ```tsx
 <div>
-  <Notification.Info
-    onDismiss={(e: any) => console.info("dismissed info notification", e)}
-  >
+  <Notification.Info onDismiss={(e: any) => console.info('dismissed info notification', e)}>
     Dit is een info-notification
   </Notification.Info>
 
-  <Notification.Danger
-    onDismiss={(e: any) => console.error("dismissed danger notification", e)}
-  >
+  <Notification.Danger onDismiss={(e: any) => console.error('dismissed danger notification', e)}>
     Dit is een dangerous notification
   </Notification.Danger>
 </div>
@@ -744,10 +763,10 @@ return (
     <Table
       data={data}
       columns={[
-        { name: "ID", key: "id" },
-        { name: "Voornaam", key: "first_name" },
-        { name: "Achternaam", key: "last_name" },
-        { key: "email" },
+        { name: 'ID', key: 'id' },
+        { name: 'Voornaam', key: 'first_name' },
+        { name: 'Achternaam', key: 'last_name' },
+        { key: 'email' },
       ]}
       uniqueKey="id"
       fullWidth={true}
@@ -770,12 +789,7 @@ export default function App() {
   return (
     <>
       <Tabs
-        items={[
-          "DataTables",
-          "Notifications & Messsages",
-          "Titles, Forms & Buttons",
-          "Images & Aspect Ratios",
-        ]}
+        items={['DataTables', 'Notifications & Messsages', 'Titles, Forms & Buttons', 'Images & Aspect Ratios']}
         activeTab={activePage}
         onTabChange={(i: number) => setActiveTab(i)}
       />
@@ -791,6 +805,41 @@ export default function App() {
 }
 ```
 
+### Tag & Tags <a id="component-tags"></a>
+
+Een `<Tag>` is een klein inline elementje om overal te kunnen stoppen. Tags kunnen een optionele sluit-knop bevatten
+De `<Tags>` component kan gebruikt worden om meerdere tags te groeperen. Dan kunnen ze samengeplakt worden, de grootte van alle tags of de alignment kan dan ingesteld worden.
+
+```tsx
+<Tags alignment="l" size="s">
+  <Tag color="p">primary</Tag>
+  <Tag color="w">warning</Tag>
+  <Tag color="i">info</Tag>
+  <Tag color="l">link</Tag>
+  <Tag color="d">danger</Tag>
+  <Tag color="s">success</Tag>
+  <Tag color="light">light</Tag>
+  <Tag color="dark">dark</Tag>
+</Tags>
+```
+
+Met de `onDismiss`-function van de `<Tag>` kan je een sluit-button op een tag toevoegen. Dan moet er **wel** een function opgegevens zijn om iets mee te doen
+
+```tsx
+<Tag color="dark" onDismiss={(e) => handleTagDismiss(e)}>
+  FlexBox
+</Tag>
+```
+
+Om twee tags als 1 tag te laten zien, kan je de `merged` prop op de `<Tags>`-component gebruiken
+
+```tsx
+<Tags merged={true}>
+  <Tag color="dark">build</Tag>
+  <Tag color="s">success</Tag>
+</Tags>
+```
+
 ### Titles & Subtitles <a id="component-titles"></a>
 
 Een verzameling van h1...h6 tags. Er zijn drie verschillende componenten om [Bulma Titles](https://bulma.io/documentation/elements/title/) te gebruiken.
@@ -818,10 +867,7 @@ Allemaal hebben ze 2 waarden die isntelbaar zijn voor Sizes: _headingSize_ en _b
     headingSize={2}
     bulmaSize={2}
   ></TitleWithSubtitle>
-  <TitleWithSubtitle
-    titleTxt="title is-3 (default)"
-    subtitleTxt="subtitle is-6 (default)"
-  ></TitleWithSubtitle>
+  <TitleWithSubtitle titleTxt="title is-3 (default)" subtitleTxt="subtitle is-6 (default)"></TitleWithSubtitle>
 </div>
 ```
 
@@ -856,7 +902,7 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types.
   - **TextInput:** invoeren van tekst, urls, etc.
   - **EmailInput:** invoeren van een emailadres. Valideert het emailadres met een regex (overschrijfbaar mbv validatie-object).
   - **PasswordInput:** invoeren van een wachtwoord.
-  - **TextAreaInput:** een textarea
+  - **TextAreaInput:** een textarea, werkt in tegenstelling tot de `<textarea></textarea>`-tag _niet_ met children. De waarde kan gezet worden met de `value`-attribuut.
 - Getallen:
   - **NumberInput:** invoer van een nummer
   - **Range:** invoer van een nummer, maar dan met een [range](#form-ranges)
@@ -890,17 +936,14 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types.
 ```
 
 ### CheckBox <a id="form-checkbox"></a>
+
 > Was voorheen Checkbox (lowercase B), maar hebben we nu CheckBox van gemaakt
 
 Een checkbox werkt zoals je verwacht:
+
 ```tsx
 <div>
-  <CheckBox
-    name="CheckboxInput"
-    id="checkboxinput"
-    label="Dit is een checkbox"
-    validatie={{ required: true }}
-  />
+  <CheckBox name="CheckboxInput" id="checkboxinput" label="Dit is een checkbox" validatie={{ required: true }} />
 </div>
 ```
 
@@ -912,18 +955,8 @@ Als er in het validatie geen minimale of maximale waarde te vinden is, worden st
 
 ```tsx
 <div>
-  <RangeInput
-    value={20}
-    name="RangeInput"
-    id="rangeinput"
-    validatie={{ required: true, min: 0, max: 100 }}
-  />
-  <MultiRangeInput
-    name="MultiRangeInput"
-    id="multirangeinput"
-    value={[25, 75]}
-    validatie={{ minDiff: 10 }}
-  />
+  <RangeInput value={20} name="RangeInput" id="rangeinput" validatie={{ required: true, min: 0, max: 100 }} />
+  <MultiRangeInput name="MultiRangeInput" id="multirangeinput" value={[25, 75]} validatie={{ minDiff: 10 }} />
 </div>
 ```
 
@@ -956,13 +989,13 @@ Een select is een lijstje met opties waaruit je er een kan selecteren. De opties
 
 {/* Een select met value-label-options in optiongroups. Als geen label, wordt de value gebruikt*/}
 <Select name="SelectInput3" label="Select options met SelectOptionGroupTypes"id="selectinput3" options={[
-  { name: 'OptGroup 1',
+  { label: 'OptGroup 1',
     selectOptions: [
       { value: 'Een select' },
       { value: 'werkt ook met ' }
     ]
   },
-  { name: 'OptGroup 2',
+  { label: 'OptGroup 2',
     selectOptions: [
       { value: 'Objects: {value: xxx, disabled?: false}' },
       { value: 'Die kunnen disabled zijn', disabled: true },
@@ -990,7 +1023,7 @@ Een Multiselect werkt bijna hetzelfde als een select. Dezelfde type options word
     name="SelectInput"
     label="Select options met een array"
     id="selectinput"
-    options={["Dit zijn", "De options", "Met een", "string array"]}
+    options={['Dit zijn', 'De options', 'Met een', 'string array']}
   />
 
   {/* Een mulit-select met value-label-options. ALs er geen label is, wordt de value daarvoor gebruikt */}
@@ -999,13 +1032,13 @@ Een Multiselect werkt bijna hetzelfde als een select. Dezelfde type options word
     label="Select options met SelectOptionTypes"
     id="selectinput2"
     options={[
-      { value: "1", label: "Een select" },
-      { value: "2", label: "werkt ook met " },
-      { value: "3", label: "Objects: {value: xxx, disabled?: false}" },
-      { value: "4", label: "Die kunnen disabled zijn", disabled: true },
+      { value: '1', label: 'Een select' },
+      { value: '2', label: 'werkt ook met ' },
+      { value: '3', label: 'Objects: {value: xxx, disabled?: false}' },
+      { value: '4', label: 'Die kunnen disabled zijn', disabled: true },
       {
-        value: "5",
-        label: "Met objects kunnen er ook optgroups gemaakt worden!",
+        value: '5',
+        label: 'Met objects kunnen er ook optgroups gemaakt worden!',
       },
     ]}
     validatie={{ required: true, min: 2 }}
@@ -1018,20 +1051,20 @@ Een Multiselect werkt bijna hetzelfde als een select. Dezelfde type options word
     id="selectinput3"
     options={[
       {
-        label: "OptGroup 1",
+        label: 'OptGroup 1',
         selectOptions: [
-          { value: "4", label: "Een select" },
-          { value: "5", label: "werkt ook met " },
+          { value: '4', label: 'Een select' },
+          { value: '5', label: 'werkt ook met ' },
         ],
       },
       {
-        label: "OptGroup 2",
+        label: 'OptGroup 2',
         selectOptions: [
-          { value: "1", label: "Objects: {value: xxx, disabled?: false}" },
-          { value: "2", label: "Die kunnen disabled zijn", disabled: true },
+          { value: '1', label: 'Objects: {value: xxx, disabled?: false}' },
+          { value: '2', label: 'Die kunnen disabled zijn', disabled: true },
           {
-            value: "3",
-            label: "Met objects kunnen er ook optgroups gemaakt worden!",
+            value: '3',
+            label: 'Met objects kunnen er ook optgroups gemaakt worden!',
           },
         ],
       },
@@ -1106,14 +1139,14 @@ Het resultaat van deze form komt via de `onSubmit()` methode naar buiten. Als de
 ```ts
 // post
 {
-  Token: "Bazinga!";
-  Email: "brad@wurst.com";
+  Token: 'Bazinga!';
+  Email: 'brad@wurst.com';
   Leeftijd: 31;
-  Naam: "Brad Wurst";
-  Wachtwoord: "123123";
+  Naam: 'Brad Wurst';
+  Wachtwoord: '123123';
 }
 // get
-("Token=Bazinga%21&Naam=Brad+Wurst&Email=brad%40wurst.com&Wachtwoord=123123&Leeftijd=31");
+('Token=Bazinga%21&Naam=Brad+Wurst&Email=brad%40wurst.com&Wachtwoord=123123&Leeftijd=31');
 ```
 
 ## Publiceren <a id="publiceren"></a>

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { SizeProp } from "../..";
-import { ButtonProps } from "./ButtonProps";
+import { ReactNode } from 'react';
+import { SizeProp } from '../..';
+import { ButtonProps } from './ButtonProps';
 /**
  * Een gewone, default button in de primary kleur
  * Gebruik {@link ButtonGroup} om meerdere buttons te grouperen.
@@ -48,7 +48,7 @@ export declare function Static(props: {
     loading?: boolean | undefined;
     children?: ReactNode;
     size?: SizeProp;
-    type?: "submit" | "button" | "reset" | undefined;
+    type?: 'submit' | 'button' | 'reset' | undefined;
     disabled?: boolean | undefined;
     tooltip?: string;
     icon?: string | any;