@dnb/eufemia/cjs/shared/component-helper.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DetectOutsideClickClass = void 0;
Object.defineProperty(exports, "InteractionInvalidation", {
  enumerable: true,
  get: function () {
    return _InteractionInvalidation.InteractionInvalidation;
  }
});
Object.defineProperty(exports, "assignPropsWithContext", {
  enumerable: true,
  get: function () {
    return _assignPropsWithContext.assignPropsWithContext;
  }
});
exports.checkIfHasScrollbar = void 0;
exports.combineDescribedBy = combineDescribedBy;
exports.combineDetails = combineDetails;
exports.combineLabelledBy = combineLabelledBy;
exports.convertJsxToString = void 0;
exports.convertStatusToStateOnly = convertStatusToStateOnly;
exports.defineNavigator = defineNavigator;
exports.dispatchCustomElementEvent = exports.detectOutsideClick = void 0;
exports.escapeRegexChars = escapeRegexChars;
exports.extendDeep = extendDeep;
exports.extendGracefully = void 0;
Object.defineProperty(exports, "extendPropsWithContext", {
  enumerable: true,
  get: function () {
    return _extendPropsWithContext.extendPropsWithContext;
  }
});
Object.defineProperty(exports, "extendPropsWithContextInClassComponent", {
  enumerable: true,
  get: function () {
    return _extendPropsWithContext.extendPropsWithContextInClassComponent;
  }
});
Object.defineProperty(exports, "filterProps", {
  enumerable: true,
  get: function () {
    return _filterProps.filterProps;
  }
});
exports.findElementInChildren = findElementInChildren;
exports.getClosestScrollViewElement = void 0;
Object.defineProperty(exports, "getPreviousSibling", {
  enumerable: true,
  get: function () {
    return _getPreviousSibling.getPreviousSibling;
  }
});
exports.getStatusState = getStatusState;
exports.isChildOfElement = void 0;
exports.isObject = isObject;
exports.isTouchDevice = isTouchDevice;
exports.isTrue = void 0;
Object.defineProperty(exports, "keycode", {
  enumerable: true,
  get: function () {
    return _keycode.default;
  }
});
exports.processChildren = exports.matchAll = exports.makeUniqueId = void 0;
exports.removeUndefinedProps = removeUndefinedProps;
exports.toCamelCase = exports.slugify = exports.roundToNearest = void 0;
exports.toCapitalized = toCapitalized;
exports.validateDOMAttributes = exports.toSnakeCase = exports.toPascalCase = exports.toKebabCase = void 0;
Object.defineProperty(exports, "warn", {
  enumerable: true,
  get: function () {
    return _helpers.warn;
  }
});
require("core-js/modules/es.string.replace.js");
require("core-js/modules/esnext.string.match-all.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _keycode = _interopRequireDefault(require("./keycode"));
var _whatInput = _interopRequireDefault(require("what-input"));
var _helpers = require("./helpers");
var _getPreviousSibling = require("./helpers/getPreviousSibling");
var _Eufemia = require("./Eufemia");
var _InteractionInvalidation = require("./helpers/InteractionInvalidation");
var _extendPropsWithContext = require("./helpers/extendPropsWithContext");
var _assignPropsWithContext = require("./helpers/assignPropsWithContext");
var _filterProps = require("./helpers/filterProps");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
(0, _Eufemia.init)();
_whatInput.default.specificKeys([9]);
defineNavigator();
function isTouchDevice() {
  if (typeof document !== 'undefined') {
    let intent = false;
    try {
      intent = document.documentElement.getAttribute('data-whatintent');
    } catch (e) {}
    return intent === 'touch';
  }
  return false;
}
function defineNavigator() {
  const handleNavigator = () => {
    if (typeof document === 'undefined' || typeof window === 'undefined' || typeof navigator === 'undefined') {
      return;
    }
    try {
      if (!(typeof window !== 'undefined' && window.IS_TEST)) {
        if (navigator.platform.match(new RegExp(_helpers.PLATFORM_MAC)) !== null) {
          document.documentElement.setAttribute('data-os', 'mac');
        } else if (navigator.platform.match(new RegExp(_helpers.PLATFORM_WIN)) !== null) {
          document.documentElement.setAttribute('data-os', 'win');
        } else if (navigator.platform.match(new RegExp(_helpers.PLATFORM_LINUX)) !== null) {
          document.documentElement.setAttribute('data-os', 'linux');
        }
      } else {
        document.documentElement.setAttribute('data-os', 'other');
      }
    } catch (e) {
      (0, _helpers.warn)(e);
    }
    document.removeEventListener('DOMContentLoaded', handleNavigator);
  };
  if (typeof document !== 'undefined' && document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', handleNavigator);
  } else {
    handleNavigator();
  }
}
const validateDOMAttributes = (props, params) => {
  if (props && props.attributes) {
    let attr = props.attributes;
    if (attr) {
      if (attr[0] === '{') {
        attr = JSON.parse(attr);
      }
      if (attr && typeof attr === 'object') {
        Object.entries(attr).forEach(_ref => {
          let [key, value] = _ref;
          Object.assign(params, {
            [key]: value
          });
        });
      }
      delete params.attributes;
    }
  }
  if (params.disabled === null || params.disabled === 'false') {
    delete params.disabled;
  }
  if (typeof params.space !== 'undefined') {
    delete params.space;
  }
  if (typeof params.top !== 'undefined') {
    delete params.top;
  }
  if (typeof params.right !== 'undefined') {
    delete params.right;
  }
  if (typeof params.bottom !== 'undefined') {
    delete params.bottom;
  }
  if (typeof params.left !== 'undefined') {
    delete params.left;
  }
  if (typeof params.no_collapse !== 'undefined') {
    delete params.no_collapse;
  }
  if (typeof params.innerSpace !== 'undefined') {
    delete params.innerSpace;
  } else if (params.disabled === 'true') {
    params.disabled = true;
  }
  if (params.disabled === true) {
    params['aria-disabled'] = true;
  }
  if (props && props.tabindex) {
    let tabIndex = props.tabindex;
    if (tabIndex === 'off') {
      tabIndex = '-1';
    }
    params['tabIndex'] = tabIndex;
  }
  if (params && typeof params === 'object') {
    for (const i in params) {
      if (typeof params[i] === 'function' && !/(^[a-z]{1,}[A-Z]{1})/.test(i)) {
        delete params[i];
      } else if (params[i] === null || /[^a-z-]/i.test(i)) {
        delete params[i];
      }
    }
  }
  return params;
};
exports.validateDOMAttributes = validateDOMAttributes;
const processChildren = props => {
  if (!props) {
    return null;
  }
  if (typeof global !== 'undefined' && Array.isArray(global.registeredElements) && global.registeredElements.length > 0) {
    let cache = null;
    Object.entries(props).reverse().map(_ref2 => {
      let [key, cb] = _ref2;
      if (key.includes('render_') && /^render_/.test(key)) {
        if (typeof cb === 'function') {
          if (cache) {
            if (Object.isFrozen(props)) {
              props = _objectSpread({}, props);
            }
            props.children = cache;
          }
          return cache = _react.default.createElement(_react.default.Fragment, {
            key: key
          }, cb(props));
        }
      }
      return null;
    }).filter(Boolean);
    if (cache) {
      return cache;
    }
  }
  const res = typeof props.children === 'function' ? props.children(props) : props.children;
  if (Array.isArray(res)) {
    const onlyTexts = res.reduce((pV, cV) => {
      if (typeof cV === 'string' || typeof cV === 'number') {
        pV.push(cV);
      }
      return pV;
    }, []);
    if (onlyTexts.length === res.length && onlyTexts.length > 0) {
      return onlyTexts.join('');
    }
  }
  return res;
};
exports.processChildren = processChildren;
const extendGracefully = function () {
  let first = {};
  for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
    objects[_key] = arguments[_key];
  }
  const keepRef = objects[0];
  if (keepRef === true || keepRef === false) {
    objects.shift();
    if (keepRef) {
      first = objects.shift();
    }
  }
  return objects.reduce((acc1, object) => {
    if (object) {
      acc1 = Object.assign(acc1, Object.entries(object).reduce((acc2, _ref3) => {
        let [key, value] = _ref3;
        if (value !== null) {
          if (typeof value === 'object') {
            value = extendGracefully(acc1[key] || {}, value);
            if (Object.keys(value).length > 0) {
              acc2[key] = value;
            }
          } else {
            acc2[key] = value;
          }
        }
        return acc2;
      }, {}));
    }
    return acc1;
  }, first);
};
exports.extendGracefully = extendGracefully;
function isObject(item) {
  return item && typeof item === 'object' && !Array.isArray(item);
}
function extendDeep() {
  let target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
    sources[_key2 - 1] = arguments[_key2];
  }
  for (const source of sources) {
    if (isObject(source)) {
      for (const key in source) {
        if (key === '__proto__' || key === 'constructor') continue;
        if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
        if (!isObject(target)) continue;
        if (isObject(source[key])) {
          if (!isObject(target[key])) {
            target[key] = {};
          }
          extendDeep(target[key], source[key]);
        } else {
          target[key] = source[key];
        }
      }
    }
  }
  return target;
}
const isTrue = value => {
  if (value !== null && typeof value !== 'undefined' && (String(value) === 'true' || String(value) === '1')) {
    return true;
  }
  return false;
};
exports.isTrue = isTrue;
const dispatchCustomElementEvent = (src, eventName, eventObjectOrig) => {
  let ret = undefined;
  const eventObject = _objectSpread(_objectSpread({}, eventObjectOrig && eventObjectOrig.event || {}), eventObjectOrig);
  if (eventObject && eventObject.attributes && eventObject.event) {
    const currentTarget = eventObject.event.currentTarget;
    if (currentTarget) {
      try {
        const dataset = _objectSpread({}, currentTarget.dataset || {});
        const attributes = _objectSpread({}, eventObject.attributes);
        for (const i in attributes) {
          if (/^data-/.test(i)) {
            dataset[String(i).replace(/^data-/, '')] = attributes[i];
          }
        }
        for (const i in dataset) {
          if (eventObject.event.currentTarget.dataset) {
            eventObject.event.currentTarget.dataset[i] = dataset[i];
          }
          if (eventObject.event.target && eventObject.event.target.dataset) {
            eventObject.event.target.dataset[i] = dataset[i];
          }
        }
      } catch (e) {
        (0, _helpers.warn)('Error on handling dataset:', e);
      }
    }
  }
  const props = src && src.props || src;
  if (eventName.includes('_')) {
    if (typeof props[eventName] === 'function') {
      const r = props[eventName].apply(src, [eventObject]);
      if (typeof r !== 'undefined') {
        ret = r;
      }
    }
    eventName = toCamelCase(eventName);
    if (typeof props[eventName] === 'function') {
      const r = props[eventName].apply(src, [eventObject]);
      if (typeof r !== 'undefined') {
        ret = r;
      }
    }
  } else {
    if (typeof props[eventName] === 'function') {
      const r = props[eventName].apply(src, [eventObject]);
      if (typeof r !== 'undefined') {
        ret = r;
      }
    }
    eventName = toSnakeCase(eventName);
    if (typeof props[eventName] === 'function') {
      const r = props[eventName].apply(src, [eventObject]);
      if (typeof r !== 'undefined') {
        ret = r;
      }
    }
  }
  return ret;
};
exports.dispatchCustomElementEvent = dispatchCustomElementEvent;
const toCamelCase = s => s.split(/_/g).reduce((acc, cur, i) => acc + (i === 0 ? cur : cur.replace(/(\w)(\w*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase())), '');
exports.toCamelCase = toCamelCase;
const toPascalCase = s => s.split(/_/g).reduce((acc, cur) => acc + cur.replace(/(\w)(\w*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase()), '');
exports.toPascalCase = toPascalCase;
const toSnakeCase = str => str.replace(/\B[A-Z]/g, letter => `_${letter}`).toLowerCase();
exports.toSnakeCase = toSnakeCase;
const toKebabCase = str => str.replace(/\B[A-Z]/g, letter => `-${letter}`).toLowerCase();
exports.toKebabCase = toKebabCase;
function toCapitalized(str) {
  return typeof str === 'string' ? str.toLowerCase().split('').map((char, index, arr) => index === 0 || arr[index - 1] === ' ' || arr[index - 1] === '-' ? char.toUpperCase() : char).join('') : str;
}
const detectOutsideClick = (ignoreElements, onSuccess, options) => new DetectOutsideClickClass(ignoreElements, onSuccess, options);
exports.detectOutsideClick = detectOutsideClick;
class DetectOutsideClickClass {
  constructor(_ignoreElements, _onSuccess) {
    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
    _defineProperty(this, "checkOutsideClick", function (_ref4) {
      let {
        event,
        ignoreElements
      } = _ref4;
      let onSuccess = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
      try {
        const currentElement = event.target;
        if ((currentElement === null || currentElement === void 0 ? void 0 : currentElement.tagName) === 'HTML' && (event.pageX > document.documentElement.clientWidth - 40 || event.pageY > document.documentElement.clientHeight - 40)) {
          return;
        }
        if (checkIfHasScrollbar(currentElement)) {
          return;
        }
        for (let i = 0, elem, l = ignoreElements.length; i < l; ++i) {
          const ignoreElement = ignoreElements[i] && 'current' in ignoreElements[i] ? ignoreElements[i].current : ignoreElements[i];
          elem = currentElement;
          if (!ignoreElements[i]) {
            continue;
          }
          do {
            if (elem === ignoreElement) {
              return;
            }
            elem = elem && elem.parentNode;
          } while (elem);
        }
        if (typeof onSuccess === 'function') {
          onSuccess();
        }
      } catch (e) {
        (0, _helpers.warn)(e);
      }
    });
    if (!this.handleClickOutside && typeof document !== 'undefined' && typeof window !== 'undefined') {
      if (!Array.isArray(_ignoreElements)) {
        _ignoreElements = [_ignoreElements];
      }
      this.handleClickOutside = event => {
        this.checkOutsideClick({
          event,
          ignoreElements: _ignoreElements
        }, () => typeof _onSuccess === 'function' && _onSuccess({
          event
        }));
      };
      document.addEventListener('mousedown', this.handleClickOutside);
      this.keydownCallback = event => {
        const keyCode = (0, _keycode.default)(event);
        if (keyCode === 'esc') {
          window.removeEventListener('keydown', this.keydownCallback);
          if (typeof _onSuccess === 'function') {
            _onSuccess({
              event
            });
          }
        }
      };
      window.addEventListener('keydown', this.keydownCallback);
      if (options.includedKeys) {
        this.keyupCallback = event => {
          const keyCode = (0, _keycode.default)(event);
          if (options.includedKeys.includes(keyCode) && typeof this.handleClickOutside === 'function') {
            this.handleClickOutside(event, () => {
              if (this.keyupCallback) window.removeEventListener('keyup', this.keyupCallback);
            });
          }
        };
        window.addEventListener('keyup', this.keyupCallback);
      }
    }
  }
  remove() {
    if (this.handleClickOutside && typeof document !== 'undefined') {
      document.removeEventListener('mousedown', this.handleClickOutside);
      this.handleClickOutside = null;
    }
    if (this.keydownCallback && typeof window !== 'undefined') {
      window.removeEventListener('keydown', this.keydownCallback);
      this.keydownCallback = null;
    }
    if (this.keyupCallback && typeof window !== 'undefined') {
      window.removeEventListener('keyup', this.keyupCallback);
      this.keyupCallback = null;
    }
  }
}
exports.DetectOutsideClickClass = DetectOutsideClickClass;
const checkIfHasScrollbar = elem => {
  return elem && (elem.scrollHeight > elem.offsetHeight || elem.scrollWidth > elem.offsetWidth) && overflowIsScrollable(elem);
};
exports.checkIfHasScrollbar = checkIfHasScrollbar;
const overflowIsScrollable = elem => {
  const style = typeof window !== 'undefined' ? window.getComputedStyle(elem) : {};
  return /scroll|auto/i.test((style.overflow || '') + (style.overflowX || '') + (style.overflowY || ''));
};
const makeUniqueId = function () {
  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id-';
  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
  return prefix + String(Math.random().toString(36).substr(2, length) + idIncrement++).slice(-length);
};
exports.makeUniqueId = makeUniqueId;
let idIncrement = 0;
const slugify = s => String(s).toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
exports.slugify = slugify;
const matchAll = (string, regex) => {
  if (typeof string.matchAll === 'function') {
    return Array.from(string.matchAll(regex));
  }
  const matches = [];
  let match;
  while (match = regex.exec(string)) {
    matches.push(match);
  }
  return matches;
};
exports.matchAll = matchAll;
const isChildOfElement = function (element, target) {
  let callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  try {
    const contains = element => {
      if (callback) {
        const res = callback(element);
        if (res) {
          return element;
        }
      }
      return element && element === target;
    };
    if (contains(element)) {
      return element;
    }
    while ((element = element && element.parentElement) && !contains(element));
  } catch (e) {}
  return element;
};
exports.isChildOfElement = isChildOfElement;
const roundToNearest = (num, target) => {
  const diff = num % target;
  return diff > target / 2 ? num - diff + target : num - diff;
};
exports.roundToNearest = roundToNearest;
const getClosestScrollViewElement = currentElement => {
  return (0, _getPreviousSibling.getPreviousSibling)('.dnb-scroll-view', currentElement);
};
exports.getClosestScrollViewElement = getClosestScrollViewElement;
const convertJsxToString = function (elements) {
  let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
  let transformWord = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
  if (!Array.isArray(elements)) {
    elements = [elements];
  }
  const process = word => {
    if (_react.default.isValidElement(word)) {
      if (transformWord) {
        word = transformWord(word);
      }
      if (typeof word.props.children === 'string') {
        word = word.props.children.trim();
      } else if (Array.isArray(word.props.children)) {
        word = word.props.children.reduce((acc, word) => {
          if (typeof word !== 'string') {
            word = process(word, separator, transformWord);
          }
          if (typeof word === 'string') {
            acc = (acc + (separator || '') + word).trim();
          }
          return acc;
        }, '');
      } else {
        return null;
      }
    }
    return word;
  };
  return elements.map(word => process(word)).filter(Boolean).join(separator).trim();
};
exports.convertJsxToString = convertJsxToString;
function convertStatusToStateOnly(status, state) {
  return status ? state : null;
}
function getStatusState(status) {
  return status && status !== 'error' && status !== 'warn' && status !== 'info';
}
function combineLabelledBy() {
  for (var _len3 = arguments.length, params = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
    params[_key3] = arguments[_key3];
  }
  return combineAriaBy('aria-labelledby', params);
}
function combineDescribedBy() {
  for (var _len4 = arguments.length, params = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
    params[_key4] = arguments[_key4];
  }
  return combineAriaBy('aria-describedby', params);
}
function combineDetails() {
  for (var _len5 = arguments.length, params = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
    params[_key5] = arguments[_key5];
  }
  return combineAriaBy('aria-details', params);
}
function combineAriaBy(type, params) {
  params = params.map(cur => {
    if (Array.isArray(cur)) {
      return cur.join(' ');
    }
    if (cur && params.includes(cur[type])) {
      return null;
    }
    if (cur && typeof cur[type] !== 'undefined') {
      cur = cur[type];
    }
    if (typeof cur !== 'string') {
      cur = null;
    }
    return cur;
  });
  params = params.filter(Boolean).join(' ');
  if (params === '') {
    params = undefined;
  }
  return params;
}
function findElementInChildren(children, find) {
  if (!Array.isArray(children)) {
    children = [children];
  }
  let result = null;
  children.some(cur => {
    if (cur && cur.props && cur.props.children) {
      const res = findElementInChildren(cur.props.children, find);
      if (res) {
        return result = res;
      }
    }
    if (_react.default.isValidElement(cur) && find(cur)) {
      return result = cur;
    }
    return null;
  });
  return result;
}
function escapeRegexChars(str) {
  return str.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
}
function removeUndefinedProps(object) {
  Object.keys(object || {}).forEach(key => {
    if (object[key] === undefined) {
      delete object[key];
    }
  });
  return object;
}
//# sourceMappingURL=component-helper.js.map