@uncinc/uncinc-react-kitchen-sink 2.3.6 → 2.4.0

package/dist/components/Webform/stories.select.js

@@ -1,32 +1,32 @@
 import React from 'react';
 import Immutable from 'immutable';
-import Webform from './';
+import Webform from '.';
 export default {
   title: 'Organisms/Webform/Mapper'
 };
 const entities = Immutable.fromJS({
-  "field_3": {
-    "#type": "select",
-    "#title": "Pick your poison",
-    '#description': "Please select your poison.",
-    "#options": {
-      "beer": "Beer",
-      "wine": "Wine",
-      "rum": "Rum",
-      "whisky": "Whisk(e)y"
+  'field_3': {
+    '#type': 'select',
+    '#title': 'Pick your poison',
+    '#description': 'Please select your poison.',
+    '#options': {
+      'beer': 'Beer',
+      'wine': 'Wine',
+      'rum': 'Rum',
+      'whisky': 'Whisk(e)y'
     },
-    "#webform": "test_conditionals",
-    "#webform_id": "test_conditionals--field_3",
-    "#webform_key": "field_3",
-    "#webform_parent_key": "",
-    "#webform_parent_flexbox": false,
-    "#webform_depth": 0,
-    "#webform_children": [],
-    "#webform_multiple": false,
-    "#webform_composite": false,
-    "#webform_parents": ["field_3"],
-    "#admin_title": "Pick your poison",
-    "#webform_plugin_id": "select"
+    '#webform': 'test_conditionals',
+    '#webform_id': 'test_conditionals--field_3',
+    '#webform_key': 'field_3',
+    '#webform_parent_key': '',
+    '#webform_parent_flexbox': false,
+    '#webform_depth': 0,
+    '#webform_children': [],
+    '#webform_multiple': false,
+    '#webform_composite': false,
+    '#webform_parents': ['field_3'],
+    '#admin_title': 'Pick your poison',
+    '#webform_plugin_id': 'select'
   }
 });
 export const Select = () => /*#__PURE__*/React.createElement(Webform, {

package/dist/components/Webform/stories.textarea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Immutable from 'immutable';
-import Webform from './';
+import Webform from '.';
 export default {
   title: 'Organisms/Webform/Mapper'
 };

package/dist/components/Webform/stories.textfield.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Immutable from 'immutable';
-import Webform from './';
+import Webform from '.';
 export default {
   title: 'Organisms/Webform/Mapper'
 };

package/dist/components/Webform/stories.wizard.js

@@ -1,133 +1,133 @@
 import React from 'react';
 import Immutable from 'immutable';
-import Webform from './';
+import Webform from '.';
 export default {
   title: 'Organisms/Webform/Mapper'
 };
 const entities = Immutable.fromJS({
-  "page_1": {
-    "#type": "webform_wizard_page",
-    "#title": "Page 1",
-    "number": {
-      "#type": "number",
-      "#title": "Number",
-      "#min": 1,
-      "#max": 100,
-      "#step": 1,
-      "#webform": "test",
-      "#webform_id": "test--number",
-      "#webform_key": "number",
-      "#webform_parent_key": "page_1",
-      "#webform_parent_flexbox": false,
-      "#webform_depth": 1,
+  'page_1': {
+    '#type': 'webform_wizard_page',
+    '#title': 'Page 1',
+    'number': {
+      '#type': 'number',
+      '#title': 'Number',
+      '#min': 1,
+      '#max': 100,
+      '#step': 1,
+      '#webform': 'test',
+      '#webform_id': 'test--number',
+      '#webform_key': 'number',
+      '#webform_parent_key': 'page_1',
+      '#webform_parent_flexbox': false,
+      '#webform_depth': 1,
       '#required': true,
-      "#webform_multiple": false,
-      "#webform_composite": false,
-      "#webform_parents": ["page_1", "number"],
-      "#admin_title": "Number",
-      "#webform_plugin_id": "number"
+      '#webform_multiple': false,
+      '#webform_composite': false,
+      '#webform_parents': ['page_1', 'number'],
+      '#admin_title': 'Number',
+      '#webform_plugin_id': 'number'
     },
-    "#webform": "test",
-    "#webform_id": "test--page_1",
-    "#webform_key": "page_1",
-    "#webform_parent_key": "",
-    "#webform_parent_flexbox": false,
-    "#webform_depth": 0,
-    "#webform_children": [],
-    "#webform_multiple": false,
-    "#webform_composite": false,
-    "#webform_parents": ["page_1"],
-    "#admin_title": "Page 1",
-    "#webform_plugin_id": "webform_wizard_page"
+    '#webform': 'test',
+    '#webform_id': 'test--page_1',
+    '#webform_key': 'page_1',
+    '#webform_parent_key': '',
+    '#webform_parent_flexbox': false,
+    '#webform_depth': 0,
+    '#webform_children': [],
+    '#webform_multiple': false,
+    '#webform_composite': false,
+    '#webform_parents': ['page_1'],
+    '#admin_title': 'Page 1',
+    '#webform_plugin_id': 'webform_wizard_page'
   },
-  "page_2": {
-    "#type": "webform_wizard_page",
-    "#title": "Page 2",
-    "radio": {
-      "#type": "radios",
-      "#title": "Radio",
-      "#options": {
-        "1": "Optie 1",
-        "2": "Optie 2"
+  'page_2': {
+    '#type': 'webform_wizard_page',
+    '#title': 'Page 2',
+    'radio': {
+      '#type': 'radios',
+      '#title': 'Radio',
+      '#options': {
+        '1': 'Optie 1',
+        '2': 'Optie 2'
       },
-      "#webform": "test",
-      "#webform_id": "test--radio",
-      "#webform_key": "radio",
-      "#webform_parent_key": "page_2",
-      "#webform_parent_flexbox": false,
-      "#webform_depth": 1,
-      "#webform_children": [],
-      "#webform_multiple": false,
-      "#webform_composite": false,
-      "#webform_parents": ["page_2", "radio"],
-      "#admin_title": "Radio",
-      "#webform_plugin_id": "radios"
+      '#webform': 'test',
+      '#webform_id': 'test--radio',
+      '#webform_key': 'radio',
+      '#webform_parent_key': 'page_2',
+      '#webform_parent_flexbox': false,
+      '#webform_depth': 1,
+      '#webform_children': [],
+      '#webform_multiple': false,
+      '#webform_composite': false,
+      '#webform_parents': ['page_2', 'radio'],
+      '#admin_title': 'Radio',
+      '#webform_plugin_id': 'radios'
     },
-    "#webform": "test",
-    "#webform_id": "test--page_2",
-    "#webform_key": "page_2",
-    "#webform_parent_key": "",
-    "#webform_parent_flexbox": false,
-    "#webform_depth": 0,
-    "#webform_children": [],
-    "#webform_multiple": false,
-    "#webform_composite": false,
-    "#webform_parents": ["page_2"],
-    "#admin_title": "Page 2",
-    "#webform_plugin_id": "webform_wizard_page"
+    '#webform': 'test',
+    '#webform_id': 'test--page_2',
+    '#webform_key': 'page_2',
+    '#webform_parent_key': '',
+    '#webform_parent_flexbox': false,
+    '#webform_depth': 0,
+    '#webform_children': [],
+    '#webform_multiple': false,
+    '#webform_composite': false,
+    '#webform_parents': ['page_2'],
+    '#admin_title': 'Page 2',
+    '#webform_plugin_id': 'webform_wizard_page'
   },
-  "page_3": {
-    "#type": "webform_wizard_page",
-    "#title": "Page 3",
-    "checkboxes": {
-      "#type": "checkboxes",
-      "#title": "Checkboxes",
-      "#options": {
-        "1": "1",
-        "2": "2"
+  'page_3': {
+    '#type': 'webform_wizard_page',
+    '#title': 'Page 3',
+    'checkboxes': {
+      '#type': 'checkboxes',
+      '#title': 'Checkboxes',
+      '#options': {
+        '1': '1',
+        '2': '2'
       },
-      "#webform": "test",
-      "#webform_id": "test--checkboxes",
-      "#webform_key": "checkboxes",
-      "#webform_parent_key": "page_3",
-      "#webform_parent_flexbox": false,
-      "#webform_depth": 1,
-      "#webform_children": [],
-      "#webform_multiple": true,
-      "#webform_composite": false,
-      "#webform_parents": ["page_3", "checkboxes"],
-      "#admin_title": "Checkboxes",
-      "#webform_plugin_id": "checkboxes"
+      '#webform': 'test',
+      '#webform_id': 'test--checkboxes',
+      '#webform_key': 'checkboxes',
+      '#webform_parent_key': 'page_3',
+      '#webform_parent_flexbox': false,
+      '#webform_depth': 1,
+      '#webform_children': [],
+      '#webform_multiple': true,
+      '#webform_composite': false,
+      '#webform_parents': ['page_3', 'checkboxes'],
+      '#admin_title': 'Checkboxes',
+      '#webform_plugin_id': 'checkboxes'
     },
-    "#webform": "test",
-    "#webform_id": "test--page_3",
-    "#webform_key": "page_3",
-    "#webform_parent_key": "",
-    "#webform_parent_flexbox": false,
-    "#webform_depth": 0,
-    "#webform_children": [],
-    "#webform_multiple": false,
-    "#webform_composite": false,
-    "#webform_parents": ["page_3"],
-    "#admin_title": "Page 3",
-    "#webform_plugin_id": "webform_wizard_page"
+    '#webform': 'test',
+    '#webform_id': 'test--page_3',
+    '#webform_key': 'page_3',
+    '#webform_parent_key': '',
+    '#webform_parent_flexbox': false,
+    '#webform_depth': 0,
+    '#webform_children': [],
+    '#webform_multiple': false,
+    '#webform_composite': false,
+    '#webform_parents': ['page_3'],
+    '#admin_title': 'Page 3',
+    '#webform_plugin_id': 'webform_wizard_page'
   },
-  "actions": {
-    "#type": "webform_actions",
-    "#title": "Submit button(s)",
-    "#submit__label": "Verstuur",
-    "#webform": "test",
-    "#webform_id": "test--actions",
-    "#webform_key": "actions",
-    "#webform_parent_key": "",
-    "#webform_parent_flexbox": false,
-    "#webform_depth": 0,
-    "#webform_children": [],
-    "#webform_multiple": false,
-    "#webform_composite": false,
-    "#webform_parents": ["actions"],
-    "#admin_title": "Submit button(s)",
-    "#webform_plugin_id": "webform_actions"
+  'actions': {
+    '#type': 'webform_actions',
+    '#title': 'Submit button(s)',
+    '#submit__label': 'Verstuur',
+    '#webform': 'test',
+    '#webform_id': 'test--actions',
+    '#webform_key': 'actions',
+    '#webform_parent_key': '',
+    '#webform_parent_flexbox': false,
+    '#webform_depth': 0,
+    '#webform_children': [],
+    '#webform_multiple': false,
+    '#webform_composite': false,
+    '#webform_parents': ['actions'],
+    '#admin_title': 'Submit button(s)',
+    '#webform_plugin_id': 'webform_actions'
   }
 });
 export const Wizard = () => /*#__PURE__*/React.createElement(Webform, {

package/dist/components/WysiwygField/index.js

@@ -47,7 +47,6 @@ WysiwygField.propTypes = {
   customElementHandler: PropTypes.func
 };
 WysiwygField.defaultProps = {
-  html: '',
   customElementHandler: () => {}
 };
 export default WysiwygField;

package/dist/components/WysiwygField/stories.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import WysiwygField from './';
+import WysiwygField from '.';
 import AbbreviationAnnotation from '../AbbreviationAnnotation';
 export default {
   title: 'Atoms/WysiwygField'
 };
-const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>HTML</a>.</p>";
+const html = '<p>This is <em>some</em> example <a href=\'https://www.uncinc.nl\'>HTML</a>.</p>';
 export const Primary = () => /*#__PURE__*/React.createElement(WysiwygField, {
   html: html
 });

package/dist/config/i18next/locales/en.json

@@ -1,4 +1,8 @@
 {
+  "general": {
+    "open": "Open",
+    "close": "Close"
+  },
   "dateselect": {
     "months": {
       "jan": "January",

package/dist/config/i18next/locales/nl.json

@@ -1,4 +1,8 @@
 {
+  "general": {
+    "open": "Openen",
+    "close": "Sluiten"
+  },
   "dateselect" : {
     "months": {
       "jan": "Januari",
@@ -18,5 +22,8 @@
   "form": {
     "required": "vereist",
     "optional": "optioneel"
+  },
+  "searchkit": {
+    "reset_search": "Zoeken opnieuw instellen"
   }
 }

package/dist/helpers/date.js

@@ -0,0 +1,8 @@
+export const parseDateWithTimezoneOffset = date => {
+  const offset = date.getTimezoneOffset();
+  const dateWithTimezoneOffset = new Date(date.getTime() - offset * 60 * 1000);
+  return dateWithTimezoneOffset.toISOString();
+};
+export const isValidDate = date => {
+  return date instanceof Date && !Number.isNaN(date);
+};

package/dist/hooks/useBoolean.ts

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+
+export default function useBoolean(defaultValue: boolean = false) {
+  const [value, setValue] = useState(defaultValue);
+
+  const toggle = useCallback(() => {
+    setValue((current) => !current);
+  }, [setValue]);
+
+  const setTrue = useCallback(() => { setValue(true); }, []);
+  const setFalse = useCallback(() => { setValue(false); }, []);
+
+  return {
+    value,
+    setValue,
+    setTrue,
+    setFalse,
+    toggle,
+  } as const;
+}

package/dist/hooks/useClickOutside.ts

@@ -0,0 +1,38 @@
+import { MutableRefObject, useEffect } from 'react';
+
+interface UseClickOutsideOptions {
+  refs: MutableRefObject<HTMLElement>[] | MutableRefObject<HTMLElement>;
+  unless?: boolean | ((e: globalThis.MouseEvent) => boolean);
+  onClick: (e: globalThis.MouseEvent) => void;
+}
+
+export default function useClickOutside({
+  refs,
+  unless = false,
+  onClick,
+}: UseClickOutsideOptions) {
+  const refsAsArray = Array.isArray(refs) ? refs : [refs];
+
+  useEffect(() => {
+    function handleOutsideClick(e: globalThis.MouseEvent) {
+      const allRefsHaveCurrent = refsAsArray.every((ref) => !!ref.current);
+      const shouldNotExecute = typeof unless === 'function' ? unless(e) : unless;
+
+      if (!allRefsHaveCurrent || shouldNotExecute) {
+        return;
+      }
+
+      const isOutsideClick = refsAsArray.every((ref) => !ref.current.contains(e.target as Node));
+
+      if (isOutsideClick) {
+        onClick(e);
+      }
+    }
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [unless, onClick, refs]);
+}

package/dist/hooks/useDialog.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Dialog from '../components/Dialog';
+import useBoolean from './useBoolean';
+
+export default function useDialog() {
+  const {
+    value: dialogIsOpen,
+    setTrue: openDialog,
+    setFalse: closeDialog,
+  } = useBoolean();
+
+  const DialogComponent = ({ children, ...props }) => React.createElement(
+    Dialog,
+    {
+      ...props,
+      isOpen: dialogIsOpen,
+      closeFunction: closeDialog,
+    },
+    children,
+  );
+
+  return {
+    dialogIsOpen,
+    openDialog,
+    closeDialog,
+    DialogComponent,
+  } as const;
+}

package/dist/hooks/useDialogHelpers.ts

@@ -0,0 +1,95 @@
+import { useEffect, MutableRefObject } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import useClickOutside from './useClickOutside';
+import useEscape from './useEscape';
+import useTrapFocus from './useTrapFocus';
+
+export interface UseDialogHelpersOptions<T extends HTMLElement> {
+  id?: string;
+  wrapperElement: MutableRefObject<T>;
+  closeFunction: () => void;
+  isOpen: boolean;
+}
+
+/**
+ * Hook to allow you to implement your own Dialog component.
+ * This takes care of focus, and closing the Dialog by
+ * click outside it, or hitting Escape.
+ */
+export default function useDialogHelpers<T extends HTMLElement>(
+  options: UseDialogHelpersOptions<T>,
+) {
+  const {
+    id = uuidv4(),
+    wrapperElement,
+    closeFunction,
+    isOpen,
+  } = options;
+
+  /**
+   * Close the Dialog by pressing Escape.
+   */
+  useClickOutside({
+    refs: [wrapperElement],
+    onClick: closeFunction,
+  });
+
+  /**
+   * Close the Dialog by pressing Escape.
+   */
+  useEscape({
+    onPress: closeFunction,
+  });
+
+  /**
+   * Make sure focus does not leave the Dialog while it's open.
+   */
+  useTrapFocus({
+    ref: wrapperElement,
+    isActive: isOpen,
+  });
+
+  /**
+   * Sets focus on the popup so that screen readers announce
+   * that the user is currently on a dialog.
+   */
+  useEffect(() => {
+    if (isOpen && wrapperElement.current) {
+      wrapperElement.current.setAttribute('tabindex', '-1');
+      wrapperElement.current.focus();
+    }
+
+    function removeFocusProperties() {
+      if (wrapperElement.current) {
+        wrapperElement.current.removeAttribute('tabindex');
+      }
+    }
+
+    if (wrapperElement.current) {
+      wrapperElement.current.addEventListener('blur', removeFocusProperties);
+    }
+
+    return () => {
+      if (wrapperElement.current) {
+        wrapperElement.current.removeEventListener('blur', removeFocusProperties);
+      }
+    };
+  }, [isOpen]);
+
+  /**
+   * Create a labelId for A11Y
+   */
+  const labelId = `${id}-label`;
+
+  const dialogHelpersProps = {
+    'aria-role': 'dialog',
+    'aria-labelledby': labelId,
+  };
+
+  return {
+    id,
+    labelId,
+    dialogHelpersProps,
+  } as const;
+}

package/dist/hooks/useEscape.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+interface UseEscapeOption {
+  unless?: boolean | ((e: KeyboardEvent) => boolean);
+  onPress: (e: KeyboardEvent) => void;
+}
+
+export default function useEscape({ unless, onPress }: UseEscapeOption) {
+  useEffect(() => {
+    function handleOnPress(e: KeyboardEvent) {
+      const shouldNotExecute = typeof unless === 'function' ? unless(e) : unless;
+
+      if (shouldNotExecute || e.key !== 'Escape') {
+        return;
+      }
+
+      onPress(e);
+    }
+
+    document.addEventListener('keyup', handleOnPress);
+
+    return () => {
+      document.removeEventListener('keyup', handleOnPress);
+    };
+  }, [unless]);
+}

package/dist/hooks/usePrevious.js

@@ -11,5 +11,4 @@ export default function usePrevious(value) {
 
   // Return previous value (happens before update in useEffect above)
   return ref.current;
-}
-;
+}