@equinor/eds-core-react 0.17.0 → 0.18.0

package/dist/esm/components/Dialog/CustomContent.js

@@ -1,46 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { Divider } from '../Divider/Divider.js';
-
-const StyledCustomContent = styled.div.withConfig({
-  displayName: "CustomContent__StyledCustomContent",
-  componentId: "sc-17fsw6x-0"
-})(({
-  theme,
-  scrollable
-}) => {
-  return css(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.content.spacings.bottom, spacingsTemplate(theme.entities.children.spacings), scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
-});
-const StyledDivider = styled(Divider).withConfig({
-  displayName: "CustomContent__StyledDivider",
-  componentId: "sc-17fsw6x-1"
-})(({
-  theme
-}) => {
-  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
-});
-const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
-  children,
-  scrollable = false,
-  ...rest
-}, ref) {
-  const props = {
-    scrollable,
-    ref,
-    ...rest
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledCustomContent, {
-      id: "eds-dialog-customcontent",
-      ...props,
-      children: children
-    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
-      color: "medium",
-      variant: "small"
-    })]
-  });
-});
-
-export { CustomContent };

package/dist/esm/components/Dialog/Title.js

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-
-const StyledTitle = styled.div.withConfig({
-  displayName: "Title__StyledTitle",
-  componentId: "sc-i4qfl5-0"
-})(({
-  theme,
-  children
-}) => {
-  return css(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
-});
-const StyledDivider = styled(Divider).withConfig({
-  displayName: "Title__StyledDivider",
-  componentId: "sc-i4qfl5-1"
-})(({
-  theme
-}) => {
-  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
-});
-const Title = /*#__PURE__*/forwardRef(function Title({
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledTitle, {
-      id: "eds-dialog-title",
-      ref: ref,
-      ...rest,
-      children: children
-    }), children && /*#__PURE__*/jsx(StyledDivider, {
-      color: "medium",
-      variant: "small"
-    })]
-  });
-});
-
-export { Title };

package/dist/esm/hooks/useAutoResize.js

@@ -1,39 +0,0 @@
-import { useEffect } from 'react';
-
-const useAutoResize = (targetEl, maxHeight) => {
-  useEffect(() => {
-    const handleResize = () => {
-      targetEl.style.height = 'auto';
-      const {
-        scrollHeight,
-        clientHeight
-      } = targetEl;
-      let newHeight = clientHeight;
-
-      if (maxHeight > newHeight) {
-        newHeight = Math.min(maxHeight, Math.max(scrollHeight, newHeight));
-
-        if (scrollHeight > maxHeight) {
-          targetEl.style.overflow = 'auto';
-        } else {
-          targetEl.style.overflow = 'hidden';
-        }
-
-        if (newHeight > clientHeight) {
-          targetEl.style.height = "".concat(newHeight, "px");
-        }
-      }
-    };
-
-    if (targetEl && maxHeight) {
-      handleResize();
-      targetEl.addEventListener('keyup', handleResize, true);
-    }
-
-    return () => {
-      targetEl === null || targetEl === void 0 ? void 0 : targetEl.removeEventListener('keyup', handleResize, true);
-    };
-  }, [targetEl, maxHeight]);
-};
-
-export { useAutoResize };

package/dist/esm/hooks/useCombinedRefs.js

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-
-/** Returns a memoized function that calls passed refs sequentially with passed element */
-const useCombinedRefs = (...refs) => {
-  return useCallback(element => refs.forEach(ref => {
-    if (typeof ref === 'function') {
-      ref(element);
-    } else if (ref && typeof ref === 'object') {
-      ref.current = element;
-    }
-  }), [refs]);
-};
-
-export { useCombinedRefs };

package/dist/esm/hooks/useGlobalKeyPress.js

@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-
-var KEY;
-
-(function (KEY) {
-  KEY["Escape"] = "Escape";
-  KEY["Enter"] = "Enter";
-  KEY["Tab"] = "Tab";
-  KEY["ArrowDown"] = "ArrowDown";
-  KEY["ArrowUp"] = "ArrowUp";
-})(KEY || (KEY = {}));
-
-const useGlobalKeyPress = (targetKey, callback) => {
-  useEffect(() => {
-    const handleGlobalKeyPress = e => {
-      const {
-        key
-      } = e;
-
-      switch (key) {
-        case targetKey:
-          callback(e);
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handleGlobalKeyPress, true);
-    return () => {
-      document.removeEventListener('keydown', handleGlobalKeyPress, true);
-    };
-  }, [targetKey, callback]);
-};
-
-export { useGlobalKeyPress };

package/dist/esm/hooks/useHideBodyScroll.js

@@ -1,20 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-const useHideBodyScroll = active => {
-  const overflowState = useRef(document.body.style.overflow);
-  useEffect(() => {
-    const originalState = overflowState.current;
-
-    if (active) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = originalState;
-    }
-
-    return () => {
-      document.body.style.overflow = originalState;
-    };
-  }, [active]);
-};
-
-export { useHideBodyScroll };

package/dist/esm/hooks/useId.js

@@ -1,14 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useId = (idOverride, type) => {
-  const [defaultId, setDefaultId] = useState(idOverride);
-  const id = idOverride || defaultId;
-  useEffect(() => {
-    if (defaultId == null) {
-      setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
-    }
-  }, [defaultId, type]);
-  return id;
-};
-
-export { useId };

package/dist/esm/hooks/useMountedRef.js

@@ -1,12 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState(null);
-  useEffect(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-  return isMounted;
-};
-
-export { useIsMounted };

package/dist/esm/hooks/useOutsideClick.js

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-
-const useOutsideClick = (el, callback) => {
-  useEffect(() => {
-    const handleClick = e => {
-      if (el && !el.contains(e.target)) {
-        callback(e);
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [el, callback]);
-};
-
-export { useOutsideClick };

package/dist/esm/hooks/usePopper.js

@@ -1,31 +0,0 @@
-import { usePopper as usePopper$1 } from 'react-popper';
-
-const usePopper = (anchorEl, popperEl, arrowRef, placement, offset = 10) => {
-  if (placement === undefined) {
-    placement = 'auto';
-  }
-
-  const {
-    styles,
-    attributes
-  } = usePopper$1(anchorEl, popperEl, {
-    placement,
-    modifiers: [{
-      name: 'arrow',
-      options: {
-        element: arrowRef
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, offset]
-      }
-    }]
-  });
-  return {
-    styles,
-    attributes
-  };
-};
-
-export { usePopper };

package/dist/esm/hooks/useToken.js

@@ -1,16 +0,0 @@
-import { useCallback } from 'react';
-import mergeDeepRight_1 from '../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
-
-const useToken = (options, token) => useCallback(() => {
-  const {
-    density
-  } = options;
-
-  if (density === 'compact') {
-    return mergeDeepRight_1(token, token.modes.compact);
-  }
-
-  return token;
-}, [options, token]);
-
-export { useToken };

package/dist/esm/utils/joinHandlers.js

@@ -1,10 +0,0 @@
-const joinHandlers = (handler1, handler2) => {
-  const callback = event => {
-    handler1 && handler1(event);
-    handler2 && handler2(event);
-  };
-
-  return callback;
-};
-
-export { joinHandlers };

package/dist/esm/utils/setReactInputValue.js

@@ -1,18 +0,0 @@
-// Workaround
-// React ignores 'dispathEvent' on input/textarea, see https://github.com/facebook/react/issues/10135
-const setReactInputValue = (input, value) => {
-  const previousValue = input.value;
-  input.value = value;
-  const tracker = input._valueTracker;
-
-  if (typeof tracker !== 'undefined') {
-    tracker.setValue(previousValue);
-  } //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
-
-
-  input.dispatchEvent(new Event('change', {
-    bubbles: true
-  }));
-};
-
-export { setReactInputValue };

package/dist/esm/utils/templates/borders.js

@@ -1,35 +0,0 @@
-import { css } from 'styled-components';
-import { shorthand } from './common.js';
-
-const bordersTemplate = border => {
-  var _border$left, _border$left2, _border$right, _border$right2;
-
-  if (!border) {
-    return css({});
-  }
-
-  switch (border.type) {
-    case 'border':
-      return css({
-        border: shorthand(border),
-        borderRadius: border.radius
-      });
-
-    case 'bordergroup':
-      return css({
-        borderBottom: shorthand(border.bottom),
-        borderTop: shorthand(border.top),
-        borderLeft: shorthand(border.left),
-        borderRight: shorthand(border.right),
-        borderBottomLeftRadius: border === null || border === void 0 ? void 0 : (_border$left = border.left) === null || _border$left === void 0 ? void 0 : _border$left.radius,
-        borderTopLeftRadius: border === null || border === void 0 ? void 0 : (_border$left2 = border.left) === null || _border$left2 === void 0 ? void 0 : _border$left2.radius,
-        borderBottomRightRadius: border === null || border === void 0 ? void 0 : (_border$right = border.right) === null || _border$right === void 0 ? void 0 : _border$right.radius,
-        borderTopRightRadius: border === null || border === void 0 ? void 0 : (_border$right2 = border.right) === null || _border$right2 === void 0 ? void 0 : _border$right2.radius
-      });
-
-    default:
-      return css({});
-  }
-};
-
-export { bordersTemplate };

package/dist/esm/utils/templates/common.js

@@ -1,19 +0,0 @@
-const shorthand = token => {
-  if (!token) {
-    return undefined;
-  }
-
-  const {
-    width = '',
-    style = '',
-    color = ''
-  } = token;
-
-  if (!width) {
-    return null;
-  }
-
-  return "".concat(width, " ").concat(style, " ").concat(color);
-};
-
-export { shorthand };

package/dist/esm/utils/templates/focus.js

@@ -1,35 +0,0 @@
-import { css } from 'styled-components';
-import { tokens } from '@equinor/eds-tokens';
-import { shorthand } from './common.js';
-
-const {
-  colors: {
-    interactive: {
-      focus: {
-        rgba: focusColor
-      }
-    }
-  }
-} = tokens;
-const outlineTemplate = outline => {
-  const {
-    color = focusColor,
-    style = 'dashed',
-    width = '1px',
-    offset = '0px',
-    type
-  } = outline;
-  const outline_ = {
-    color,
-    style,
-    width,
-    offset,
-    type
-  };
-  return css({
-    outline: shorthand(outline_),
-    outlineOffset: outline_.offset
-  });
-};
-
-export { outlineTemplate };

package/dist/esm/utils/templates/index.js

@@ -1,52 +0,0 @@
-import { css } from 'styled-components';
-
-const typographyTemplate = (typography, link) => {
-  if (!typography) {
-    return '';
-  }
-
-  let base = "\n  margin: 0;\n  color: ".concat(typography.color, ";\n  font-family: ").concat(typography.fontFamily, ";\n  font-size: ").concat(typography.fontSize, ";\n  font-weight: ").concat(typography.fontWeight, ";\n  line-height: ").concat(typography.lineHeight, ";\n  ");
-
-  if (typography.fontStyle) {
-    base += "\nfont-style: ".concat(typography.fontStyle, ";");
-  }
-
-  if (typography.letterSpacing) {
-    base += "\nletter-spacing: ".concat(typography.letterSpacing, ";");
-  }
-
-  if (typography.textTransform) {
-    base += "\ntext-transform: ".concat(typography.textTransform, ";");
-  }
-
-  if (typography.textDecoration) {
-    base += "\ntext-decoration: ".concat(typography.textDecoration, ";");
-  }
-
-  if (typography.textAlign) {
-    base += "\ntext-align: ".concat(typography.textAlign, ";");
-  }
-
-  if (typography.fontFeature) {
-    base += "\nfont-feature-settings: ".concat(typography.fontFeature, ";");
-  }
-
-  if (link) {
-    base += "\ncursor: pointer;";
-  }
-
-  return base;
-};
-const spacingsTemplate = ({
-  left,
-  right,
-  top,
-  bottom
-}) => css({
-  paddingLeft: left,
-  paddingTop: top,
-  paddingRight: right,
-  paddingBottom: bottom
-});
-
-export { spacingsTemplate, typographyTemplate };

package/dist/types/components/Combobox/Combobox.d.ts

@@ -1,55 +0,0 @@
-import { SelectHTMLAttributes } from 'react';
-export declare type ComboboxChanges = {
-    selectedItems: string[];
-    inputValue: string;
-};
-export declare type ComboboxProps = {
-    /** List of options to choose from */
-    items: string[];
-    /** Label for the select element */
-    label: string;
-    /** Array of initial selected items */
-    initialSelectedItems?: string[];
-    /** Meta text, for instance unit */
-    meta?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Read Only */
-    readOnly?: boolean;
-    /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
-     * The items that should be selected. */
-    selectedOptions?: string[];
-    /** Callback for the selected item change
-     * changes.selectedItem gives the selected item
-     */
-    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
-    /** Enable multiselect */
-    multiple?: boolean;
-} & SelectHTMLAttributes<HTMLSelectElement>;
-export declare const Combobox: import("react").ForwardRefExoticComponent<{
-    /** List of options to choose from */
-    items: string[];
-    /** Label for the select element */
-    label: string;
-    /** Array of initial selected items */
-    initialSelectedItems?: string[];
-    /** Meta text, for instance unit */
-    meta?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Read Only */
-    readOnly?: boolean;
-    /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
-     * The items that should be selected. */
-    selectedOptions?: string[];
-    /** Callback for the selected item change
-     * changes.selectedItem gives the selected item
-     */
-    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
-    /** Enable multiselect */
-    multiple?: boolean;
-} & SelectHTMLAttributes<HTMLSelectElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Combobox/Combobox.tokens.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentToken } from '@equinor/eds-tokens';
-export declare const selectTokens: ComponentToken;
-export declare const multiSelect: ComponentToken;

package/dist/types/components/Combobox/index.d.ts

@@ -1 +0,0 @@
-export * from './Combobox';

package/dist/types/components/Dialog/Actions.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare type DialogActionsProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Actions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Dialog/Title.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare type DialogTitleProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Title: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/hooks/index.d.ts

@@ -1,9 +0,0 @@
-export { useOutsideClick } from './useOutsideClick';
-export { useCombinedRefs } from './useCombinedRefs';
-export * from './usePopper';
-export { useGlobalKeyPress } from './useGlobalKeyPress';
-export { useId } from './useId';
-export { useIsMounted } from './useMountedRef';
-export { useAutoResize } from './useAutoResize';
-export * from './useToken';
-export { useHideBodyScroll } from './useHideBodyScroll';

package/dist/types/hooks/useAutoResize.d.ts

@@ -1 +0,0 @@
-export declare const useAutoResize: (targetEl: HTMLElement, maxHeight?: number) => void;

package/dist/types/hooks/useCombinedRefs.d.ts

@@ -1,3 +0,0 @@
-import type { RefCallback, Ref } from 'react';
-/** Returns a memoized function that calls passed refs sequentially with passed element */
-export declare const useCombinedRefs: <T extends HTMLElement>(...refs: Ref<T>[]) => (instance: T) => void;

package/dist/types/hooks/useGlobalKeyPress.d.ts

@@ -1,10 +0,0 @@
-declare enum KEY {
-    Escape = "Escape",
-    Enter = "Enter",
-    Tab = "Tab",
-    ArrowDown = "ArrowDown",
-    ArrowUp = "ArrowUp"
-}
-declare type KEYTYPES = keyof typeof KEY;
-export declare const useGlobalKeyPress: (targetKey: KEYTYPES, callback: (e: KeyboardEvent) => void) => void;
-export {};

package/dist/types/hooks/useHideBodyScroll.d.ts

@@ -1 +0,0 @@
-export declare const useHideBodyScroll: (active: boolean) => void;

package/dist/types/hooks/useId.d.ts

@@ -1 +0,0 @@
-export declare const useId: (idOverride: string, type?: string) => string;

package/dist/types/hooks/useMountedRef.d.ts

@@ -1 +0,0 @@
-export declare const useIsMounted: () => boolean;

package/dist/types/hooks/useOutsideClick.d.ts

@@ -1 +0,0 @@
-export declare const useOutsideClick: (el: HTMLElement, callback: (e: MouseEvent) => void) => void;

package/dist/types/hooks/usePopper.d.ts

@@ -1,12 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export declare const usePopper: (anchorEl: HTMLElement, popperEl: HTMLElement, arrowRef?: HTMLElement | string, placement?: Placement, offset?: number) => {
-    styles: {
-        [key: string]: CSSProperties;
-    };
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        };
-    };
-};

package/dist/types/hooks/useToken.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentToken } from '@equinor/eds-tokens';
-import type { Density } from '../components/EdsProvider';
-declare type UseToken = (options: {
-    density: Density;
-}, token: ComponentToken) => () => ComponentToken;
-export declare const useToken: UseToken;
-export {};

package/dist/types/utils/index.d.ts

@@ -1,4 +0,0 @@
-export * from './templates';
-export { joinHandlers } from './joinHandlers';
-export { setReactInputValue } from './setReactInputValue';
-export declare const trimSpaces: (text: string) => string;

package/dist/types/utils/joinHandlers.d.ts

@@ -1,3 +0,0 @@
-declare type Callback<T> = (e: T) => void;
-export declare const joinHandlers: <T>(handler1?: Callback<T>, handler2?: Callback<T>) => Callback<T>;
-export {};

package/dist/types/utils/setReactInputValue.d.ts

@@ -1,7 +0,0 @@
-declare type ReactInternalHack = {
-    _valueTracker?: {
-        setValue: (a: string) => void;
-    };
-};
-export declare const setReactInputValue: (input: HTMLInputElement & ReactInternalHack, value: string) => void;
-export {};

package/dist/types/utils/templates/borders.d.ts

@@ -1,2 +0,0 @@
-import type { Borders } from '@equinor/eds-tokens';
-export declare const bordersTemplate: (border: Borders) => import("styled-components").FlattenSimpleInterpolation;

package/dist/types/utils/templates/common.d.ts

@@ -1,9 +0,0 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare type StyledCSS = FlattenSimpleInterpolation;
-declare type Shorthand = (token: {
-    width?: string | number;
-    style?: string;
-    color?: string;
-}) => string;
-export declare const shorthand: Shorthand;
-export {};

package/dist/types/utils/templates/focus.d.ts

@@ -1,2 +0,0 @@
-import { Outline } from '@equinor/eds-tokens';
-export declare const outlineTemplate: (outline: Outline) => import("styled-components").FlattenSimpleInterpolation;