@equinor/eds-core-react 0.35.1 → 0.36.1

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

@@ -1,5 +1,3 @@
-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';
@@ -7,36 +5,36 @@ import { useId, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-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
+const Accordion = /*#__PURE__*/forwardRef(function Accordion({
+  headerLevel = 'h2',
+  chevronPosition = 'left',
+  children,
+  id,
+  ...props
+}, ref) {
+  const accordionId = useId(id, 'accordion');
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, accordion);
-  var AccordionItems = Children.map(children, function (child, index) {
+  const AccordionItems = Children.map(children, (child, index) => {
     if (!child) return null;
     return /*#__PURE__*/cloneElement(child, {
-      accordionId: accordionId,
-      index: index,
-      headerLevel: headerLevel,
-      chevronPosition: chevronPosition
+      accordionId,
+      index,
+      headerLevel,
+      chevronPosition
     });
   });
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx("div", {
+      ...props,
       ref: ref,
       children: AccordionItems
-    }))
+    })
   });
 });
 

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

@@ -1,22 +1,60 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-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 = {
+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 = {
   border: {
     type: 'border',
     color: borderColor,
@@ -35,7 +73,7 @@ var accordion = {
     header: {
       height: '48px',
       background: backgroundDefault,
-      typography: typography,
+      typography,
       spacings: {
         left: mediumSpacing,
         right: mediumSpacing
@@ -51,14 +89,16 @@ var accordion = {
           }
         },
         disabled: {
-          typography: _objectSpread(_objectSpread({}, typography), {}, {
+          typography: {
+            ...typography,
             color: disabledColor
-          })
+          }
         },
         active: {
-          typography: _objectSpread(_objectSpread({}, typography), {}, {
+          typography: {
+            ...typography,
             color: activatedColor
-          })
+          }
         },
         hover: {
           background: backgroundHover
@@ -72,7 +112,9 @@ var accordion = {
         right: mediumSpacing,
         top: mediumSpacing
       },
-      typography: _objectSpread({}, text)
+      typography: {
+        ...text
+      }
     },
     icon: {
       typography: {

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

@@ -1,5 +1,3 @@
-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';
@@ -10,39 +8,50 @@ import { accordion } from './Accordion.tokens.js';
 import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["parentIndex", "headerLevel", "chevronPosition", "panelId", "id", "isExpanded", "children", "toggleExpanded", "disabled", "className", "style"];
-var chevronToken = accordion.entities.chevron;
-var StyledAccordionHeader = styled.div.withConfig({
+const {
+  entities: {
+    chevron: chevronToken
+  }
+} = accordion;
+const StyledAccordionHeader = styled.div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    disabled = _ref.disabled,
-    $parentIndex = _ref.$parentIndex;
-  var header = theme.entities.header,
-    border = theme.border;
+})(({
+  theme,
+  disabled,
+  $parentIndex
+}) => {
+  const {
+    entities: {
+      header
+    },
+    border
+  } = theme;
   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:", ";cursor:not-allowed;"], header.states.disabled.typography.color) : css(["color:", ";cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], header.typography.color, header.states.hover.background));
 });
-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
-  };
-}).withConfig({
+const StyledAccordionHeaderButton = styled.button.attrs(({
+  $panelId,
+  $isExpanded,
+  disabled
+}) => ({
+  'aria-expanded': $isExpanded,
+  'aria-controls': $panelId,
+  'aria-disabled': $isExpanded && disabled,
+  tabIndex: disabled ? -1 : 0,
+  disabled
+})).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeaderButton",
   componentId: "sc-cu2e95-1"
-})(function (_ref3) {
-  var theme = _ref3.theme,
-    disabled = _ref3.disabled;
-  var _theme$entities = theme.entities,
-    header = _theme$entities.header,
-    iconToken = _theme$entities.icon;
+})(({
+  theme,
+  disabled
+}) => {
+  const {
+    entities: {
+      header,
+      icon: iconToken
+    }
+  } = theme;
   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'
@@ -51,32 +60,33 @@ var StyledAccordionHeaderButton = styled.button.attrs(function (_ref2) {
     cursor: 'pointer'
   }), iconToken.typography.color);
 });
-var StyledIcon = styled(Icon).withConfig({
+const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
-})(function (_ref4) {
-  var $chevronPosition = _ref4.$chevronPosition;
+})(({
+  $chevronPosition
+}) => {
   return css(["flex-shrink:0;", ""], $chevronPosition === 'left' ? css({
     marginRight: '32px'
   }) : css({
     marginLeft: '16px'
   }));
 });
-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);
-  var handleClick = function handleClick(e) {
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
+  parentIndex,
+  headerLevel,
+  chevronPosition,
+  panelId,
+  id,
+  isExpanded = false,
+  children,
+  toggleExpanded,
+  disabled,
+  className,
+  style,
+  ...props
+}, ref) {
+  const handleClick = e => {
     e.preventDefault();
     e.stopPropagation();
     if (!disabled) {
@@ -86,8 +96,10 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
       }
     }
   };
-  var handleKeyDown = function handleKeyDown(e) {
-    var key = e.key;
+  const handleKeyDown = e => {
+    const {
+      key
+    } = e;
     if (key === 'Enter' || key === ' ') {
       toggleExpanded();
       if (props.onToggle) {
@@ -97,13 +109,13 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
       e.stopPropagation();
     }
   };
-  var chevron = /*#__PURE__*/jsx(StyledIcon, {
+  const chevron = /*#__PURE__*/jsx(StyledIcon, {
     data: isExpanded ? chevron_up : chevron_down,
     size: 24,
     $chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, "".concat(id, "-icon"));
-  var headerChildren = Children.map(children, function (child) {
+  }, `${id}-icon`);
+  const headerChildren = Children.map(children, child => {
     if (typeof child === 'string') {
       return /*#__PURE__*/jsx(AccordionHeaderTitle, {
         isExpanded: isExpanded,
@@ -113,8 +125,8 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
     }
     if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderTitle) {
       return /*#__PURE__*/cloneElement(child, {
-        isExpanded: isExpanded,
-        disabled: disabled
+        isExpanded,
+        disabled
       });
     }
     if (child.type === AccordionHeaderActions) {
@@ -122,32 +134,32 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
     }
     return child;
   });
-  var headerActions = Children.map(children, function (child) {
+  const headerActions = Children.map(children, child => {
     if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
       return /*#__PURE__*/cloneElement(child, {
-        isExpanded: isExpanded,
-        disabled: disabled
+        isExpanded,
+        disabled
       });
     }
   });
-  var newChildren = [chevron, headerChildren];
+  const newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsxs(StyledAccordionHeader, {
     disabled: disabled,
     $parentIndex: parentIndex,
     as: headerLevel,
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, {
       $isExpanded: isExpanded,
       disabled: disabled,
       $panelId: panelId,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: ref,
-      type: "button"
-    }, props), {}, {
+      type: "button",
+      ...props,
       children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
-    })), headerActions && headerActions]
+    }), headerActions && headerActions]
   });
 });
 

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

@@ -1,39 +1,41 @@
-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';
 
-var _excluded = ["isExpanded", "disabled", "children"];
-var StyledAccordionHeaderActions = styled.span.withConfig({
+const StyledAccordionHeaderActions = styled.span.withConfig({
   displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
   componentId: "sc-klu9el-0"
-})(function (_ref) {
-  var _header$states$active;
-  var theme = _ref.theme,
-    $isExpanded = _ref.$isExpanded,
-    disabled = _ref.disabled;
-  var header = theme.entities.header;
+})(({
+  theme,
+  $isExpanded,
+  disabled
+}) => {
+  const {
+    entities: {
+      header
+    }
+  } = theme;
   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'
   }) : css({
     color: header.typography.color,
     cursor: 'pointer'
-  }), $isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+  }), $isExpanded && !disabled ? header.states.active.typography?.color : 'inherit');
 });
-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({
+const AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions({
+  isExpanded,
+  disabled,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledAccordionHeaderActions, {
     ref: ref,
     $isExpanded: isExpanded,
-    disabled: disabled
-  }, rest), {}, {
+    disabled: disabled,
+    ...rest,
     children: children
-  }));
+  });
 });
 
 export { AccordionHeaderActions };

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

@@ -1,33 +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';
 
-var _excluded = ["isExpanded", "disabled", "children"];
-var StyledAccordionHeaderTitle = styled.span.withConfig({
+const StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
-})(function (_ref) {
-  var _header$states$active;
-  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');
+})(({
+  theme,
+  $isExpanded,
+  $disabled
+}) => {
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  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.typography?.color : 'inherit');
 });
-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({
+const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle({
+  isExpanded,
+  disabled,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     $isExpanded: isExpanded,
-    $disabled: disabled
-  }, rest), {}, {
+    $disabled: disabled,
+    ...rest,
     children: children
-  }));
+  });
 });
 
 export { AccordionHeaderTitle };

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

@@ -1,62 +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';
 
-var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "onExpandedChange", "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,
-    _ref$isExpanded = _ref.isExpanded,
-    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
-    onExpandedChange = _ref.onExpandedChange,
-    children = _ref.children,
-    disabled = _ref.disabled,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(isExpanded),
-    _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
-  var controlled = onExpandedChange != undefined;
-  var activeExpandedState = controlled ? isExpanded : expanded;
-  var toggleExpanded = function toggleExpanded() {
+const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
+  headerLevel,
+  chevronPosition,
+  index = 0,
+  accordionId,
+  isExpanded = false,
+  onExpandedChange,
+  children,
+  disabled,
+  ...props
+}, ref) {
+  const [expanded, setExpanded] = useState(isExpanded);
+  const controlled = onExpandedChange != undefined;
+  const activeExpandedState = controlled ? isExpanded : expanded;
+  const toggleExpanded = () => {
     if (controlled) {
       onExpandedChange(!isExpanded);
     } else {
       setExpanded(!expanded);
     }
   };
-  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);
+  const Children$1 = Children.map(children, (child, childIndex) => {
+    const headerId = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       isExpanded: activeExpandedState,
-      toggleExpanded: toggleExpanded,
+      toggleExpanded,
       id: headerId,
-      panelId: panelId,
-      headerLevel: headerLevel,
-      chevronPosition: chevronPosition,
+      panelId,
+      headerLevel,
+      chevronPosition,
       parentIndex: index,
-      disabled: disabled
+      disabled
     }) : /*#__PURE__*/cloneElement(child, {
       hidden: !activeExpandedState,
       id: panelId,
-      headerId: headerId
+      headerId
     });
   });
-  useEffect(function () {
+  useEffect(() => {
     if (!controlled) {
       setExpanded(isExpanded);
     }
   }, [isExpanded, controlled]);
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx("div", {
+    ...props,
     ref: ref,
     children: Children$1
-  }));
+  });
 });
 
 export { AccordionItem };