@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

package/dist/esm/components/Accordion/Accordion.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { accordion } from './Accordion.tokens.js';
@@ -5,36 +7,39 @@ import { useId, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
-  let {
-    headerLevel = 'h2',
-    chevronPosition = 'left',
-    children,
-    id,
-    ...props
-  } = _ref;
-  const accordionId = useId(id, 'accordion');
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var _excluded = ["headerLevel", "chevronPosition", "children", "id"];
+var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
+  var _ref$headerLevel = _ref.headerLevel,
+      headerLevel = _ref$headerLevel === void 0 ? 'h2' : _ref$headerLevel,
+      _ref$chevronPosition = _ref.chevronPosition,
+      chevronPosition = _ref$chevronPosition === void 0 ? 'left' : _ref$chevronPosition,
+      children = _ref.children,
+      id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var accordionId = useId(id, 'accordion');
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, accordion);
-  const AccordionItems = Children.map(children, (child, index) => {
+  var AccordionItems = Children.map(children, function (child, index) {
     if (!child) return null;
     return /*#__PURE__*/cloneElement(child, {
-      accordionId,
-      index,
-      headerLevel,
-      chevronPosition
+      accordionId: accordionId,
+      index: index,
+      headerLevel: headerLevel,
+      chevronPosition: chevronPosition
     });
   });
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx("div", { ...props,
+    children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       children: AccordionItems
-    })
+    }))
   });
 }); // Accordion.displayName = 'Accordion'
 

package/dist/esm/components/Accordion/Accordion.tokens.js

@@ -1,60 +1,22 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  typography: {
-    ui: {
-      accordion_header: typography
-    }
-  },
-  colors: {
-    ui: {
-      background__default: {
-        rgba: backgroundDefault
-      },
-      background__medium: {
-        rgba: borderColor
-      },
-      background__light: {
-        rgba: backgroundHover
-      }
-    },
-    interactive: {
-      primary__resting: {
-        rgba: activatedColor
-      },
-      disabled__fill: {
-        rgba: disabledIconColor
-      },
-      disabled__text: {
-        rgba: disabledColor
-      },
-      focus: {
-        rgba: focusOutlineColor
-      }
-    },
-    text: {
-      static_icons__default: {
-        rgba: defaultIconColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium: mediumSpacing
-    }
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  },
-  typography: {
-    input: {
-      text
-    }
-  }
-} = tokens;
-const accordion = {
+var typography = tokens.typography.ui.accordion_header,
+    _tokens$colors = tokens.colors,
+    _tokens$colors$ui = _tokens$colors.ui,
+    backgroundDefault = _tokens$colors$ui.background__default.rgba,
+    borderColor = _tokens$colors$ui.background__medium.rgba,
+    backgroundHover = _tokens$colors$ui.background__light.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    activatedColor = _tokens$colors$intera.primary__resting.rgba,
+    disabledIconColor = _tokens$colors$intera.disabled__fill.rgba,
+    disabledColor = _tokens$colors$intera.disabled__text.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    defaultIconColor = _tokens$colors.text.static_icons__default.rgba,
+    mediumSpacing = tokens.spacings.comfortable.medium,
+    focusOutlineWidth = tokens.interactions.focused.width,
+    text = tokens.typography.input.text;
+var accordion = {
   border: {
     type: 'border',
     color: borderColor,
@@ -73,7 +35,7 @@ const accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography,
+      typography: typography,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -89,14 +51,14 @@ const accordion = {
           }
         },
         disabled: {
-          typography: { ...typography,
+          typography: _objectSpread(_objectSpread({}, typography), {}, {
             color: disabledColor
-          }
+          })
         },
         active: {
-          typography: { ...typography,
+          typography: _objectSpread(_objectSpread({}, typography), {}, {
             color: activatedColor
-          }
+          })
         },
         hover: {
           background: backgroundHover
@@ -110,8 +72,7 @@ const accordion = {
         right: mediumSpacing,
         top: mediumSpacing
       },
-      typography: { ...text
-      }
+      typography: _objectSpread({}, text)
     },
     icon: {
       typography: {

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import { chevron_up, chevron_down } from '@equinor/eds-icons';
@@ -8,26 +10,17 @@ import { accordion } from './Accordion.tokens.js';
 import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const {
-  entities: {
-    chevron: chevronToken
-  }
-} = accordion;
-const StyledAccordionHeader = styled.div.withConfig({
+var _excluded = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
+var chevronToken = accordion.entities.chevron;
+var StyledAccordionHeader = styled.div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(_ref => {
-  let {
-    theme,
-    disabled,
-    parentIndex
-  } = _ref;
-  const {
-    entities: {
-      header
-    },
-    border
-  } = theme;
+})(function (_ref) {
+  var theme = _ref.theme,
+      disabled = _ref.disabled,
+      parentIndex = _ref.parentIndex;
+  var header = theme.entities.header,
+      border = theme.border;
   return css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
@@ -41,33 +34,26 @@ const StyledAccordionHeader = styled.div.withConfig({
     }
   }));
 });
-const StyledAccordionHeaderButton = styled.button.attrs(_ref2 => {
-  let {
-    panelId,
-    isExpanded,
-    disabled
-  } = _ref2;
+var StyledAccordionHeaderButton = styled.button.attrs(function (_ref2) {
+  var panelId = _ref2.panelId,
+      isExpanded = _ref2.isExpanded,
+      disabled = _ref2.disabled;
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
     'aria-disabled': isExpanded && disabled,
     tabIndex: disabled ? -1 : 0,
-    disabled
+    disabled: disabled
   };
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeaderButton",
   componentId: "sc-cu2e95-1"
-})(_ref3 => {
-  let {
-    theme,
-    disabled
-  } = _ref3;
-  const {
-    entities: {
-      header,
-      icon: iconToken
-    }
-  } = theme;
+})(function (_ref3) {
+  var theme = _ref3.theme,
+      disabled = _ref3.disabled;
+  var _theme$entities = theme.entities,
+      header = _theme$entities.header,
+      iconToken = _theme$entities.icon;
   return css(["", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border:0;background-color:transparent;margin:0;display:flex;align-items:center;flex-grow:1;", " > svg{color:", ";}"], typographyTemplate(header.typography), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
@@ -76,36 +62,33 @@ const StyledAccordionHeaderButton = styled.button.attrs(_ref2 => {
     cursor: 'pointer'
   }), iconToken.typography.color);
 });
-const StyledIcon = styled(Icon).withConfig({
+var StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
-})(_ref4 => {
-  let {
-    chevronPosition
-  } = _ref4;
-  return chevronPosition === 'left' ? {
+})(function (_ref4) {
+  var chevronPosition = _ref4.chevronPosition;
+  return css(["flex-shrink:0;", ""], chevronPosition === 'left' ? css({
     marginRight: '32px'
-  } : {
+  }) : css({
     marginLeft: '16px'
-  };
+  }));
 });
-const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, ref) {
-  let {
-    parentIndex,
-    headerLevel,
-    chevronPosition,
-    panelId,
-    id,
-    isExpanded = false,
-    children,
-    toggleExpanded,
-    disabled,
-    className,
-    style,
-    ...props
-  } = _ref5;
+var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, ref) {
+  var parentIndex = _ref5.parentIndex,
+      headerLevel = _ref5.headerLevel,
+      chevronPosition = _ref5.chevronPosition,
+      panelId = _ref5.panelId,
+      id = _ref5.id,
+      _ref5$isExpanded = _ref5.isExpanded,
+      isExpanded = _ref5$isExpanded === void 0 ? false : _ref5$isExpanded,
+      children = _ref5.children,
+      toggleExpanded = _ref5.toggleExpanded,
+      disabled = _ref5.disabled,
+      className = _ref5.className,
+      style = _ref5.style,
+      props = _objectWithoutProperties(_ref5, _excluded);
 
-  const handleClick = () => {
+  var handleClick = function handleClick() {
     if (!disabled) {
       toggleExpanded();
 
@@ -115,10 +98,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     }
   };
 
-  const handleKeyDown = event => {
-    const {
-      key
-    } = event;
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.key;
 
     if (key === 'Enter' || key === ' ') {
       toggleExpanded();
@@ -131,14 +112,14 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     }
   };
 
-  const chevron = /*#__PURE__*/jsx(StyledIcon, {
+  var chevron = /*#__PURE__*/jsx(StyledIcon, {
     data: isExpanded ? chevron_up : chevron_down,
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, `${id}-icon`);
+  }, "".concat(id, "-icon"));
 
-  const headerChildren = Children.map(children, child => {
+  var headerChildren = Children.map(children, function (child) {
     if (typeof child === 'string') {
       return /*#__PURE__*/jsx(AccordionHeaderTitle, {
         isExpanded: isExpanded,
@@ -149,8 +130,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
 
     if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderTitle) {
       return /*#__PURE__*/cloneElement(child, {
-        isExpanded,
-        disabled
+        isExpanded: isExpanded,
+        disabled: disabled
       });
     }
 
@@ -160,31 +141,31 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
 
     return child;
   });
-  const headerActions = Children.map(children, child => {
+  var headerActions = Children.map(children, function (child) {
     if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
       return /*#__PURE__*/cloneElement(child, {
-        isExpanded,
-        disabled
+        isExpanded: isExpanded,
+        disabled: disabled
       });
     }
   });
-  const newChildren = [chevron, headerChildren];
+  var newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsxs(StyledAccordionHeader, {
     disabled: disabled,
     parentIndex: parentIndex,
     as: headerLevel,
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, {
+    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, _objectSpread(_objectSpread({
       isExpanded: isExpanded,
       disabled: disabled,
       panelId: panelId,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      ref: ref,
-      ...props,
+      ref: ref
+    }, props), {}, {
       children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
-    }), headerActions && headerActions]
+    })), headerActions && headerActions]
   });
 });
 

package/dist/esm/components/Accordion/AccordionHeaderActions.js

@@ -1,23 +1,20 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledAccordionHeaderActions = styled.span.withConfig({
+var _excluded = ["isExpanded", "disabled", "children"];
+var StyledAccordionHeaderActions = styled.span.withConfig({
   displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
   componentId: "sc-klu9el-0"
-})(_ref => {
+})(function (_ref) {
   var _header$states$active;
 
-  let {
-    theme,
-    isExpanded,
-    disabled
-  } = _ref;
-  const {
-    entities: {
-      header
-    }
-  } = theme;
+  var theme = _ref.theme,
+      isExpanded = _ref.isExpanded,
+      disabled = _ref.disabled;
+  var header = theme.entities.header;
   return css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
@@ -26,20 +23,19 @@ const StyledAccordionHeaderActions = styled.span.withConfig({
     cursor: 'pointer'
   }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
-const AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions(_ref2, ref) {
-  let {
-    isExpanded,
-    disabled,
-    children,
-    ...rest
-  } = _ref2;
-  return /*#__PURE__*/jsx(StyledAccordionHeaderActions, {
+var AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions(_ref2, ref) {
+  var isExpanded = _ref2.isExpanded,
+      disabled = _ref2.disabled,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsx(StyledAccordionHeaderActions, _objectSpread(_objectSpread({
     ref: ref,
     isExpanded: isExpanded,
-    disabled: disabled,
-    ...rest,
+    disabled: disabled
+  }, rest), {}, {
     children: children
-  });
+  }));
 });
 
 export { AccordionHeaderActions };

package/dist/esm/components/Accordion/AccordionHeaderTitle.js

@@ -1,39 +1,35 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledAccordionHeaderTitle = styled.span.withConfig({
+var _excluded = ["isExpanded", "disabled", "children"];
+var StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
-})(_ref => {
+})(function (_ref) {
   var _header$states$active;
 
-  let {
-    theme,
-    isExpanded,
-    disabled
-  } = _ref;
-  const {
-    entities: {
-      header
-    }
-  } = theme;
+  var theme = _ref.theme,
+      isExpanded = _ref.isExpanded,
+      disabled = _ref.disabled;
+  var header = theme.entities.header;
   return css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
-const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
-  let {
-    isExpanded,
-    disabled,
-    children,
-    ...rest
-  } = _ref2;
-  return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
+var AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
+  var isExpanded = _ref2.isExpanded,
+      disabled = _ref2.disabled,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, _objectSpread(_objectSpread({
     ref: ref,
     isExpanded: isExpanded,
-    disabled: disabled,
-    ...rest,
+    disabled: disabled
+  }, rest), {}, {
     children: children
-  });
+  }));
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
 
 export { AccordionHeaderTitle };

package/dist/esm/components/Accordion/AccordionItem.js

@@ -1,48 +1,55 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
-  let {
-    headerLevel,
-    chevronPosition,
-    index = 0,
-    accordionId,
-    isExpanded,
-    children,
-    disabled,
-    ...props
-  } = _ref;
-  const [expanded, setExpanded] = useState(isExpanded);
+var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
+  var headerLevel = _ref.headerLevel,
+      chevronPosition = _ref.chevronPosition,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      accordionId = _ref.accordionId,
+      isExpanded = _ref.isExpanded,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  const toggleExpanded = () => {
+  var _useState = useState(isExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var toggleExpanded = function toggleExpanded() {
     setExpanded(!expanded);
   };
 
-  const Children$1 = Children.map(children, (child, childIndex) => {
-    const headerId = `${accordionId}-header-${index + 1}`;
-    const panelId = `${accordionId}-panel-${index + 1}`;
+  var Children$1 = Children.map(children, function (child, childIndex) {
+    var headerId = "".concat(accordionId, "-header-").concat(index + 1);
+    var panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       isExpanded: expanded,
-      toggleExpanded,
+      toggleExpanded: toggleExpanded,
       id: headerId,
-      panelId,
-      headerLevel,
-      chevronPosition,
+      panelId: panelId,
+      headerLevel: headerLevel,
+      chevronPosition: chevronPosition,
       parentIndex: index,
-      disabled
+      disabled: disabled
     }) : /*#__PURE__*/cloneElement(child, {
       hidden: !expanded,
       id: panelId,
-      headerId
+      headerId: headerId
     });
   });
-  useEffect(() => {
+  useEffect(function () {
     setExpanded(isExpanded);
   }, [isExpanded]);
-  return /*#__PURE__*/jsx("div", { ...props,
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: Children$1
-  });
+  }));
 }); // AccordionItem.displayName = 'AccordionItem'
 
 export { AccordionItem };