@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/utils/classesUtils.js

@@ -0,0 +1,38 @@
+/**
+ * @deprecated use mergeMultipleClassNames instead
+ */
+export const mergeClasses = (themeClasses, classNames) => {
+  if (!classNames) return themeClasses;
+  const classes = {};
+  const allClassNames = [...Object.keys(classNames), ...Object.keys(themeClasses)];
+  allClassNames.forEach(name => {
+    classes[name] = "".concat(themeClasses[name] || '', " ").concat(classNames[name] || '').trim();
+  });
+  return classes;
+};
+export const mergeMultipleClassNames = function () {
+  for (var _len = arguments.length, classSources = new Array(_len), _key = 0; _key < _len; _key++) {
+    classSources[_key] = arguments[_key];
+  }
+  const classes = {};
+  const allKeysClassNames = new Set();
+  classSources.forEach(source => {
+    if (source) Object.keys(source).forEach(key => allKeysClassNames.add(key));
+  });
+  allKeysClassNames.forEach(key => {
+    const mergedClass = classSources.map(source => (source === null || source === void 0 ? void 0 : source[key]) || '').join(' ').trim();
+    if (mergedClass) classes[key] = mergedClass;
+  });
+  return classes;
+};
+export const withImportant = style => style && "".concat(style, " !important");
+export const resolveCssValue = value => {
+  if (typeof value === 'string' && value.startsWith('var(')) {
+    const variableName = value.slice(4, -1).trim();
+    if (typeof window !== 'undefined' && window.getComputedStyle) {
+      const computedValue = window.getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+      return computedValue || value;
+    }
+  }
+  return value;
+};

package/dist/esm/utils/colorUtils.js

@@ -0,0 +1,12 @@
+export const getColorValue = function (varName) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  if (typeof window === 'undefined' || typeof document === 'undefined') return fallback;
+  try {
+    var _window$getComputedSt, _window, _window$getComputedSt2;
+    const root = document.documentElement;
+    const cssValue = (_window$getComputedSt = (_window = window).getComputedStyle) === null || _window$getComputedSt === void 0 || (_window$getComputedSt = _window$getComputedSt.call(_window, root)) === null || _window$getComputedSt === void 0 || (_window$getComputedSt2 = _window$getComputedSt.getPropertyValue) === null || _window$getComputedSt2 === void 0 || (_window$getComputedSt2 = _window$getComputedSt2.call(_window$getComputedSt, varName)) === null || _window$getComputedSt2 === void 0 ? void 0 : _window$getComputedSt2.trim();
+    return cssValue || fallback;
+  } catch {
+    return fallback;
+  }
+};

package/dist/esm/utils/componentUtils.js

@@ -0,0 +1,22 @@
+import { COLOR_SHADES, COLOR_THEMES } from '../constants/Palette';
+const A_CHAR_CODE = 65;
+const Z_CHAR_CODE = 90;
+export const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+const getAvatarColors = (userName, colors) => {
+  const hashIndex = (userName === null || userName === void 0 ? void 0 : userName.split('').reduce((acum, _letter, index) => {
+    const letterCode = userName.toUpperCase().charCodeAt(index);
+    return letterCode >= A_CHAR_CODE && letterCode <= Z_CHAR_CODE ? acum + letterCode - A_CHAR_CODE + 1 : acum;
+  }, 0)) || 0;
+  return colors[hashIndex % colors.length];
+};
+const getFirstLetter = userName => (userName === null || userName === void 0 ? void 0 : userName.trim().slice(0, 1).toUpperCase()) || 'A';
+export const isUTIcon = icon => typeof icon === 'string';
+export const isUTLabel = label => typeof label === 'string' || typeof label === 'number';
+export const getDefaultColorShade = colorTheme => colorTheme === COLOR_THEMES.gray ? COLOR_SHADES.shade04 : colorTheme === COLOR_THEMES.light ? COLOR_SHADES.shade01 : COLOR_SHADES.shade05;
+export const valueExists = value => value !== undefined && value !== null && value !== '';
+export default {
+  capitalize,
+  getAvatarColors,
+  getFirstLetter,
+  isUTIcon
+};

package/dist/esm/utils/helperFunctions.js

@@ -0,0 +1,30 @@
+export const throttle = (func, limit) => {
+  let inThrottle;
+  return function throttled() {
+    const context = this;
+    if (!inThrottle) {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+};
+export const base64ToFile = (base64, filename) => {
+  var _arr$0$match;
+  const arr = base64.split(',');
+  const mime = ((_arr$0$match = arr[0].match(/:(.*?);/)) === null || _arr$0$match === void 0 ? void 0 : _arr$0$match[1]) || 'image/png';
+  const bstr = atob(arr[1]);
+  const n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  for (let i = 0; i < n; i += 1) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  return new File([u8arr], filename, {
+    type: mime
+  });
+};

package/dist/esm/utils/hooks/use-scroll-based-menu.js

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+/**
+ * Custom hook for managing menu visibility based on scroll position
+ * Automatically closes menu when anchor element scrolls out of view
+ * and reopens it when it comes back into view (if it was previously open)
+ *
+ * @param {Object} options - Configuration options
+ * @param {number} options.threshold - Intersection observer threshold (default: 0.1)
+ * @param {string} options.rootMargin - Intersection observer root margin (default: '-10px')
+ *
+ * @returns {Object} Hook return value
+ * @returns {Function} openMenu - Function to open the menu (call with event)
+ * @returns {Function} closeMenu - Function to close the menu
+ * @returns {HTMLElement|null} anchor - Current anchor element for the menu
+ * @returns {Function} ref - Ref to attach to the element you want to track
+ * @returns {boolean} inView - Whether the tracked element is in view
+ */
+const useScrollBasedMenu = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [anchor, setAnchor] = useState(null);
+  const [savedAnchorElement, setSavedAnchorElement] = useState(null);
+  const [wasMenuOpenBeforeHiding, setWasMenuOpenBeforeHiding] = useState(false);
+  const {
+    rootMargin = '-10px',
+    // Add some margin to prevent flickering
+    threshold = 0.1 // Require at least 10% of the element to be visible
+  } = options;
+  const {
+    ref,
+    inView
+  } = useInView({
+    rootMargin,
+    threshold
+  });
+  const openMenu = event => {
+    const anchorElement = event.currentTarget;
+    setAnchor(anchorElement);
+    setSavedAnchorElement(anchorElement);
+  };
+  const closeMenu = () => setAnchor(null);
+  useEffect(() => {
+    if (!inView && anchor) {
+      // Element went out of view and menu is open - remember this and close menu
+      setWasMenuOpenBeforeHiding(true);
+      closeMenu();
+    } else if (inView && wasMenuOpenBeforeHiding && !anchor && savedAnchorElement) {
+      // Element came back into view and menu was previously open - reopen it using saved anchor
+      setAnchor(savedAnchorElement);
+      setWasMenuOpenBeforeHiding(false);
+    }
+  }, [anchor, inView, savedAnchorElement, wasMenuOpenBeforeHiding]);
+  return {
+    anchor,
+    closeMenu,
+    inView,
+    openMenu,
+    ref
+  };
+};
+export default useScrollBasedMenu;

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -0,0 +1,275 @@
+export const baseTokens = {
+  base: {
+    'size-full': '100%',
+    'size-0': '0rem',
+    'size-1': '0.125rem',
+    'size-2': '0.25rem',
+    'size-3': '0.5rem',
+    'size-4': '0.75rem',
+    'size-5': '1rem',
+    'size-6': '1.25rem',
+    'size-7': '1.5rem',
+    'size-8': '2rem',
+    'size-9': '2.5rem',
+    'size-10': '3rem',
+    'size-11': '3.5rem',
+    'size-12': '4rem',
+    'size-13': '6rem',
+    'size-14': '8rem',
+    'size-15': '10rem',
+    'size-16': '12rem',
+    'size-17': '14rem',
+    'size-18': '16rem',
+    'size-19': '20rem',
+    'spacing-0': '0rem',
+    'spacing-1': '0.125rem',
+    'spacing-2': '0.25rem',
+    'spacing-3': '0.5rem',
+    'spacing-4': '0.75rem',
+    'spacing-5': '1rem',
+    'spacing-6': '1.25rem',
+    'spacing-7': '1.5rem',
+    'spacing-8': '2rem',
+    'spacing-9': '2.5rem',
+    'spacing-10': '3rem',
+    'spacing-11': '3.5rem',
+    'spacing-12': '4rem',
+    'spacing-13': '6rem',
+    'spacing-14': '8rem',
+    'font-family': 'Inter',
+    'font-size-100': '0.625rem',
+    'font-size-200': '0.75rem',
+    'font-size-300': '0.875rem',
+    'font-size-400': '1rem',
+    'font-size-500': '1.125rem',
+    'font-size-600': '1.25rem',
+    'font-size-650': '1.375rem',
+    'font-size-700': '1.5rem',
+    'font-size-800': '1.875rem',
+    'font-size-900': '2.5rem',
+    'font-size-1000': '3rem',
+    'font-size-1100': '4rem',
+    'font-weight-100': '100',
+    'font-weight-200': '200',
+    'font-weight-300': '300',
+    'font-weight-400': '400',
+    'font-weight-500': '500',
+    'font-weight-600': '600',
+    'font-weight-700': '700',
+    'font-weight-800': '800',
+    'font-weight-900': '900',
+    'font-lh-100': '1.0rem',
+    'font-lh-120': '1.2rem',
+    'font-lh-140': '1.4rem',
+    'font-lh-150': '1.5rem',
+    'font-lh-170': '1.7rem',
+    'legacy-font-lh-full': '100%',
+    'legacy-font-lh-100': '1.125rem',
+    'legacy-font-lh-120': '1.25rem',
+    'legacy-font-lh-140': '1.375rem',
+    'radius-100': '4px',
+    'radius-200': '8px',
+    'radius-300': '12px',
+    'radius-400': '16px',
+    'radius-500': '24px',
+    'radius-full': '9999px'
+  },
+  semantic: {
+    'padding-3xs': 'spacing-1',
+    'padding-2xs': 'spacing-2',
+    'padding-xs': 'spacing-3',
+    'padding-sm': 'spacing-4',
+    'padding-md': 'spacing-5',
+    'padding-lg': 'spacing-7',
+    'padding-xl': 'spacing-8',
+    'padding-2xl': 'spacing-9',
+    'gap-2xs': 'spacing-1',
+    'gap-xs': 'spacing-2',
+    'gap-sm': 'spacing-3',
+    'gap-md': 'spacing-4',
+    'gap-lg': 'spacing-5',
+    'gap-xl': 'spacing-7',
+    'gap-2xl': 'spacing-8',
+    'gap-3xl': 'spacing-9',
+    'font-heading-size-1': 'font-size-700',
+    'font-heading-size-2': 'font-size-650',
+    'font-heading-size-3': 'font-size-600',
+    'font-heading-size-4': 'font-size-500',
+    'font-heading-size-5': 'font-size-400',
+    'font-heading-size-6': 'font-size-500',
+    'font-body-size-xs': 'font-size-100',
+    'font-body-size-sm': 'font-size-200',
+    'font-body-size-md': 'font-size-300',
+    'font-body-size-lg': 'font-size-400',
+    'font-metric-size-sm': 'font-size-300',
+    'font-metric-size-md': 'font-size-400',
+    'font-metric-size-lg': 'font-size-500',
+    'font-action-size-sm': 'font-size-200',
+    'font-action-size-md': 'font-size-300',
+    'font-label-size-sm': 'font-size-200',
+    'font-label-size-md': 'font-size-300',
+    'font-weight-thin': 'font-weight-100',
+    'font-weight-extralight': 'font-weight-200',
+    'font-weight-light': 'font-weight-300',
+    'font-weight-regular': 'font-weight-400',
+    'font-weight-medium': 'font-weight-500',
+    'font-weight-semibold': 'font-weight-600',
+    'font-weight-bold': 'font-weight-700',
+    'font-weight-extrabold': 'font-weight-800',
+    'font-weight-black': 'font-weight-900',
+    'font-lh-reset': 'font-lh-100',
+    'font-lh-heading': 'legacy-font-lh-full',
+    'font-lh-body': 'legacy-font-lh-140',
+    'font-lh-caption': 'font-lh-170',
+    'legacy-font-lh-small': 'legacy-font-lh-120',
+    'legacy-font-lh-xsmall': 'legacy-font-lh-100',
+    'size-control-2xs': 'size-5',
+    'size-control-xs': 'size-7',
+    'size-control-sm': 'size-8',
+    'size-control-md': 'size-9',
+    'size-control-lg': 'size-10',
+    'size-control-xl': 'size-11',
+    'size-control-2xl': 'size-12',
+    'size-control-3xl': 'size-13',
+    'size-icon-3xs': 'size-4',
+    'size-icon-2xs': 'size-5',
+    'size-icon-xs': 'size-6',
+    'size-icon-md': 'size-7',
+    'size-icon-lg': 'size-8',
+    'size-icon-xl': 'size-10',
+    'size-layout-3xs': 'size-11',
+    'size-layout-2xs': 'size-12',
+    'size-layout-sm': 'size-15',
+    'size-layout-md': 'size-18',
+    'size-layout-lg': 'size-19',
+    'size-overlay-sm': 'size-14',
+    'size-overlay-md': 'size-16',
+    'size-overlay-lg': 'size-18',
+    'size-overlay-xl': 'size-19',
+    'size-overlay-2xl': 'size-21',
+    'size-overlay-3xl': 'size-23',
+    'size-overlay-full': 'size-full',
+    'size-input-height-sm': 'size-9',
+    'size-input-height-md': 'size-10',
+    'size-input-padding-y': 'spacing-3',
+    'size-input-padding-x': 'spacing-5',
+    'size-input-gap': 'spacing-5',
+    'size-input-radius': 'radius-100',
+    'font-input-size': 'font-size-400',
+    'size-input-icon': 'size-6',
+    'radius-sm': 'radius-100',
+    'radius-md': 'radius-200',
+    'radius-lg': 'radius-300',
+    'radius-xl': 'radius-500'
+  },
+  component: {
+    'UT-button-height-sm': 'size-control-sm',
+    'UT-button-height-md': 'size-control-md',
+    'UT-button-height-lg': 'size-control-lg',
+    'UT-button-padding-xs': 'padding-2xs',
+    'UT-button-padding-sm': 'padding-xs',
+    'UT-button-padding-md': 'padding-sm',
+    'UT-button-padding-lg': 'padding-md',
+    'UT-button-gap-sm': 'gap-xs',
+    'UT-button-gap-md': 'gap-sm',
+    'UT-button-label-size': 'font-label-size-md',
+    'UT-button-label-weight': 'font-weight-600',
+    'UT-button-label-lh': 'font-lh-reset',
+    'UT-button-radius': 'radius-sm',
+    'UT-button-icon-size-sm': 'size-icon-xs',
+    'UT-button-icon-size-md': 'size-icon-md',
+    'UT-buttonGroup-padding': 'padding-2xs',
+    'UT-buttonGroup-radius': 'radius-md',
+    'UT-label-size-title-1': 'font-heading-size-1',
+    'UT-label-size-title-2': 'font-heading-size-2',
+    'UT-label-size-title-3': 'font-heading-size-3',
+    'UT-label-size-subtitle-1': 'font-heading-size-4',
+    'UT-label-size-subtitle-2': 'font-heading-size-5',
+    'UT-label-size-body': 'font-body-size-lg',
+    'UT-label-size-small': 'font-body-size-md',
+    'UT-label-size-xsmall': 'font-body-size-sm',
+    'UT-label-lh-heading': 'font-lh-heading',
+    'UT-label-lh-body': 'font-lh-body',
+    'UT-label-lh-small': 'legacy-font-lh-small',
+    'UT-label-lh-xsmall': 'legacy-font-lh-xsmall',
+    'UT-label-weight-thin': 'font-weight-thin',
+    'UT-label-weight-extralight': 'font-weight-extralight',
+    'UT-label-weight-light': 'font-weight-light',
+    'UT-label-weight-regular': 'font-weight-regular',
+    'UT-label-weight-medium': 'font-weight-medium',
+    'UT-label-weight-semibold': 'font-weight-semibold',
+    'UT-label-weight-bold': 'font-weight-bold',
+    'UT-label-weight-extrabold': 'font-weight-extrabold',
+    'UT-label-weight-black': 'font-weight-black',
+    'UT-label-markdown-margin-sm': 'padding-xs',
+    'UT-label-markdown-margin-md': 'padding-sm',
+    'UT-label-markdown-margin-lg': 'padding-md',
+    'UT-label-markdown-margin-xl': 'padding-lg',
+    'UT-label-markdown-padding-sm': 'padding-xs',
+    'UT-label-markdown-padding-md': 'padding-sm',
+    'UT-label-markdown-padding-lg': 'padding-md',
+    'UT-label-markdown-padding-xl': 'padding-lg',
+    'UT-shortcutPanel-width': 'size-layout-md',
+    'UT-shortcutPanel-width-collapsed': 'size-layout-3xs',
+    'UT-shortcutPanel-padding': 'padding-md',
+    'UT-shortcutPanel-header-height': 'size-layout-2xs',
+    'UT-shortcutPanel-header-gap': 'gap-sm',
+    'UT-shortcutPanel-header-label-size': 'font-heading-size-5',
+    'UT-shortcutPanel-category-height': 'size-control-md',
+    'UT-shortcutPanel-category-padding': 'padding-xs',
+    'UT-shortcutPanel-category-gap': 'gap-lg',
+    'UT-shortcutPanel-category-label-size': 'font-body-size-sm',
+    'UT-shortcutPanel-category-icon-size': 'size-icon-md',
+    'UT-shortcutPanel-item-height': 'size-control-md',
+    'UT-shortcutPanel-item-padding': 'padding-xs',
+    'UT-shortcutPanel-item-gap': 'gap-sm',
+    'UT-shortcutPanel-item-label-size': 'font-body-size-md',
+    'UT-shortcutPanel-item-icon-size': 'size-icon-xs',
+    'UT-dataElement-padding-md': 'padding-md',
+    'UT-dataElement-padding-sm': 'padding-xs',
+    'UT-dataElement-gap-md': 'gap-lg',
+    'UT-dataElement-gap-sm': 'gap-sm',
+    'UT-dataElement-content-gap-x': 'gap-sm',
+    'UT-dataElement-content-gap-y': 'gap-sm',
+    'UT-dataElement-icon-size': 'size-icon-md',
+    'UT-dataElement-title-size': 'font-body-size-md',
+    'UT-dataElement-title-weight': 'font-weight-medium',
+    'UT-dataElement-prefix-size': 'font-body-size-md',
+    'UT-dataElement-prefix-weight': 'font-weight-medium',
+    'UT-dataCategory-padding': 'padding-md',
+    'UT-dataCategory-gap': 'gap-lg',
+    'UT-dataCategory-title-gap': 'gap-sm',
+    'UT-dataCategory-title-size': 'font-body-size-sm',
+    'UT-dataCategory-title-weight': 'font-weight-medium',
+    'UT-dataCategory-icon-size': 'size-icon-xs',
+    'UT-status-gap-large': 'gap-sm',
+    'UT-status-gap-medium': 'gap-sm',
+    'UT-status-gap-small': 'gap-xs',
+    'UT-status-gap-xlarge': 'gap-sm',
+    'UT-status-gap-xsmall': 'gap-xs',
+    'UT-status-padding-y-large': 'padding-2xs',
+    'UT-status-padding-x-large': 'padding-xs',
+    'UT-status-padding-y-medium': 'padding-2xs',
+    'UT-status-padding-x-medium': 'padding-xs',
+    'UT-status-padding-y-small': 'padding-2xs',
+    'UT-status-padding-x-small': 'padding-xs',
+    'UT-status-padding-y-xlarge': 'padding-xs',
+    'UT-status-padding-x-xlarge': 'padding-sm',
+    'UT-status-padding-y-xsmall': 'padding-3xs',
+    'UT-status-padding-x-xsmall': 'padding-2xs',
+    'UT-status-radius': 'radius-sm',
+    'UT-status-radius-rounded': 'radius-full',
+    'UT-status-icon-size-3xs': 'size-icon-3xs',
+    'UT-status-icon-size-2xs': 'size-icon-2xs',
+    'UT-status-icon-size-xs': 'size-icon-xs',
+    'UT-status-icon-size-md': 'size-icon-md',
+    'UT-datepicker-root-gap': 'gap-sm',
+    'UT-datepicker-adornments-gap': 'gap-xs',
+    'UT-datepicker-day-padding-y': 'padding-xs',
+    'UT-datepicker-day-padding-x': 'padding-sm',
+    'UT-datepicker-calendar-gap': 'gap-lg',
+    'UT-datepicker-calendar-padding': 'padding-md',
+    'UT-datepicker-input-padding-x': 'padding-sm',
+    'UT-datepicker-input-height': 'size-control-sm'
+  }
+};

package/dist/esm/utils/hooks/useCSSVariables/index.js

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import merge from 'lodash/mergeWith';
+import { baseTokens } from './constants';
+import { mapTokens } from './utils';
+
+/**
+ * Hook that injects CSS variables into the html element
+ * The variables will be available for all elements in the document
+ *
+ * @param {Object} cssVariables - Object with key-value pairs of CSS variables
+ * @param {string} tagId - ID for the style tag (default: 'wdrgy-css-variables')
+ * @param {string} prefix - Prefix for the variables (default: '')
+ * @param {Object} designTokens - Object with {base, semantic, component} tokens
+ *
+ * @example
+ * useCSSVariables({
+ *   primaryColor: '#007bff',
+ *   fontSize: '14px',
+ *   spacing: '8px'
+ * });
+ * // Generates:
+ * // html {
+ * //   --primaryColor: #007bff;
+ * //   --fontSize: 14px;
+ * //   --spacing: 8px;
+ * // }
+ */
+
+const useCSSVariables = function (cssVariables) {
+  let tagId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'wdrgy-css-variables';
+  let prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  useEffect(() => {
+    // Validate and build CSS variables safely
+    const formattedVariables = Object.entries(mapTokens(merge(baseTokens, cssVariables))).filter(cssVar => typeof cssVar[1] === 'string' || typeof cssVar[1] === 'number').map(_ref => {
+      let [key, value] = _ref;
+      const variableName = prefix ? "--".concat(prefix, "-").concat(key) : "--".concat(key);
+      return "".concat(variableName, ": ").concat(value, ";");
+    }).join('\n  ');
+
+    // Remove previous style tag if it exists
+    const existingStyle = document.getElementById(tagId);
+    if (existingStyle) existingStyle.remove();
+
+    // Create the style tag content
+    const styleContent = "html {\n  ".concat(formattedVariables, "\n}");
+
+    // Create and insert the style tag
+    const styleTag = document.createElement('style');
+    styleTag.id = tagId;
+    styleTag.textContent = styleContent;
+    document.head.appendChild(styleTag);
+
+    // Cleanup: remove the style tag on unmount
+    return () => {
+      const style = document.getElementById(tagId);
+      if (style) style.remove();
+    };
+  }, [cssVariables, prefix, tagId]);
+};
+export default useCSSVariables;

package/dist/esm/utils/hooks/useCSSVariables/utils.js

@@ -0,0 +1,17 @@
+export const mapTokens = tokens => {
+  const {
+    base = {},
+    semantic = {},
+    component = {},
+    ...other
+  } = tokens || {};
+  const allTokens = {
+    ...base,
+    ...other
+  };
+  Object.entries(semantic).concat(Object.entries(component)).forEach(_ref => {
+    let [key, value] = _ref;
+    allTokens[key] = allTokens[value];
+  });
+  return allTokens;
+};

package/dist/esm/utils/keyboardUtils.js

@@ -0,0 +1,95 @@
+import isEmpty from 'lodash/isEmpty';
+import { HANDLER_IDENTIFIER, KEYBOARD_ALLOWED_TYPES, NO_FORM } from '../constants/keyboardConstants';
+export const preventPointerDown = e => e.preventDefault();
+export const identifyField = function () {
+  let eventTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let forms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    dataset: {
+      keyboard: inputName
+    }
+  } = eventTarget;
+  const fieldName = inputName.includes('-') ? inputName.split('-')[1] : inputName;
+  const fieldPrefix = inputName.includes('-') ? inputName.split('-')[0] : null;
+  const formsArray = Object.entries(forms);
+  const [formName] = formsArray.find(_ref => {
+    let [_, {
+      registeredFields
+    }] = _ref;
+    return registeredFields ? Object.keys(registeredFields).includes(fieldName) : false;
+  }) || [NO_FORM];
+  const eventHandlersKey = Object.keys(eventTarget).find(key => key.includes(HANDLER_IDENTIFIER));
+  const {
+    onChange
+  } = eventTarget[eventHandlersKey] || {};
+  return {
+    fieldName,
+    fieldPrefix,
+    formName,
+    onChange
+  };
+};
+export const getFieldValue = (currentIdentifiers, fieldSelector, state) => {
+  var _fieldSelector, _fieldSelector2, _fieldSelector3;
+  if (!isEmpty(currentIdentifiers)) {
+    const {
+      fieldName,
+      fieldPrefix,
+      formName
+    } = currentIdentifiers || {};
+    switch (fieldPrefix) {
+      case 'areaCode':
+      case 'prefix':
+        return (_fieldSelector = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector === void 0 ? void 0 : _fieldSelector.split('-')[0];
+      case 'phoneNumber':
+      case 'document':
+        return (_fieldSelector2 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector2 === void 0 ? void 0 : _fieldSelector2.split('-')[1];
+      case 'verificationCode':
+        return (_fieldSelector3 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector3 === void 0 ? void 0 : _fieldSelector3.split('-')[2];
+      default:
+        return fieldSelector(formName || '')(state, fieldName);
+    }
+  }
+};
+export const getIsKeyboard = eventTarget => {
+  const {
+    dataset: {
+      skbtn,
+      skinstance
+    },
+    classList
+  } = eventTarget;
+  return skbtn || skinstance || [...classList].some(cssClass => cssClass.includes('hg-'));
+};
+export const getIsInputForKeyboard = (nodeName, type) => nodeName === 'INPUT' && KEYBOARD_ALLOWED_TYPES.includes(type) || nodeName === 'TEXTAREA';
+export const clickForKeyboard = (formList, setFieldIdentifiers, setShowKeyboard, showKeyboard) => _ref2 => {
+  let {
+    target: eventTarget
+  } = _ref2;
+  const {
+    nodeName,
+    type
+  } = eventTarget;
+  const isKeyboard = getIsKeyboard(eventTarget);
+  const isInputForKeyboard = getIsInputForKeyboard(nodeName, type);
+  if (isInputForKeyboard) {
+    const identifiers = identifyField(eventTarget, formList);
+    if (identifiers.fieldPrefix === 'autocomplete') {
+      window.addEventListener('pointerdown', preventPointerDown);
+    }
+    setFieldIdentifiers(identifiers);
+    if (!showKeyboard) {
+      setShowKeyboard(true);
+    }
+  } else if (!isInputForKeyboard && !isKeyboard) {
+    setShowKeyboard(false);
+    window.removeEventListener('pointerdown', preventPointerDown);
+  }
+};
+export default {
+  identifyField,
+  getFieldValue,
+  getIsKeyboard,
+  getIsInputForKeyboard,
+  clickForKeyboard
+};

package/dist/esm/utils/shadowUtils.js

@@ -0,0 +1,35 @@
+const defaultOrientation = 'bottom';
+const defaultLevel = 1;
+const levels = {
+  1: 6,
+  2: 12,
+  3: 24
+};
+const orientations = {
+  bottom: {
+    1: 3,
+    2: 6,
+    3: 24
+  },
+  center: {
+    1: 0,
+    2: 0,
+    3: 0
+  },
+  top: {
+    1: -3,
+    2: -6,
+    3: -24
+  }
+};
+export const getShadow = _ref => {
+  let {
+    color,
+    level,
+    orientation
+  } = _ref;
+  const shadowLevel = levels[level] || levels[defaultLevel];
+  const shadowOrientation = orientations[orientation] || orientations[defaultOrientation];
+  const shadowOrientationLevel = shadowOrientation[level] || shadowOrientation[defaultLevel];
+  return "0 ".concat(shadowOrientationLevel, "px ").concat(shadowLevel, "px 0 ").concat(color);
+};