@elliemae/ds-accordion 2.2.0-alpha.1 → 2.2.0-alpha.2

package/esm/parts/accordionItem/DSAccordionItem.js

@@ -1,35 +1,27 @@
-import _jsx2 from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useContext, useCallback, useState, useMemo } from 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
-import DSButton, { BUTTON_TYPE } from '@elliemae/ds-button';
-import { DSPopperJS } from '@elliemae/ds-popperjs';
-import { accordionItemDefaultProps } from '../../defaultProps.js';
-import { StyledItemCustomActions, StyledPrimaryTitle, StyledSecondaryTitle, StyledItemContainer, StyledItemHeaderContainer, StyledItemHeader, StyledItemAddon, StyledItemTitles, StyledItemContent } from './styles.js';
-import { accordionItemPropTypes } from '../../propTypes.js';
-import { useAccordionItem } from './useAccordionItem.js';
-import { DSAccordionContext } from '../../DSAccordionCTX.js';
-import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
-import { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const _excluded = ["onClick", "id"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSAccordionItem = props => {
+import * as React from "react";
+import React2, { useState, useContext, useCallback, useMemo } from "react";
+import { describe } from "react-desc";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { DSButton, BUTTON_TYPE } from "@elliemae/ds-button";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { accordionItemDefaultProps } from "../../defaultProps";
+import {
+  StyledItemAddon,
+  StyledItemContainer,
+  StyledItemContent,
+  StyledItemCustomActions,
+  StyledItemHeader,
+  StyledItemHeaderContainer,
+  StyledItemTitles,
+  StyledPrimaryTitle,
+  StyledSecondaryTitle
+} from "./styles";
+import { accordionItemPropTypes } from "../../propTypes";
+import { useAccordionItem } from "./useAccordionItem";
+import { DSAccordionContext } from "../../DSAccordionCTX";
+import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
+import { useIsShowingEllipsis } from "./useIsShowingEllipsis";
+const DSAccordionItem = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
   const {
     children,
@@ -43,151 +35,126 @@ const DSAccordionItem = props => {
     dsIndex,
     renderCustomActions
   } = propsWithDefaults;
-  const {
-    handleOnClick,
-    handleOnKeyDown,
-    selected
-  } = useAccordionItem({
-    value,
-    disabled
-  });
+  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
   const {
     allChildrenReferences,
     actualActiveValue,
-    props: {
-      isDSMobile
-    }
+    props: { isDSMobile }
   } = useContext(DSAccordionContext);
-  const onKeyDownWithIndex = useCallback(e => {
+  const onKeyDownWithIndex = useCallback((e) => {
     handleOnKeyDown(e, dsIndex);
   }, [dsIndex, handleOnKeyDown]);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState();
   const CustomActionsContent = useMemo(() => {
-    if (!isDSMobile && (customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, customActions === null || customActions === void 0 ? void 0 : customActions.map(_ref => {
-      let {
-        onClick,
-        id
-      } = _ref,
-          rest = _objectWithoutProperties(_ref, _excluded);
-
-      return /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
-        onClick: e => {
+    if (!isDSMobile && customActions?.length > 0)
+      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, customActions?.map(({ onClick, id, ...rest }) => /* @__PURE__ */ React2.createElement(DSButton, {
+        key: id,
+        onClick: (e) => {
           e.stopPropagation();
-          if (onClick) onClick(e);
-        }
-      }, rest), {}, {
+          if (onClick)
+            onClick(e);
+        },
+        ...rest,
         buttonType: BUTTON_TYPE.SECONDARY
-      }), id);
-    }));
-    if (!isDSMobile && renderCustomActions) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, renderCustomActions({
-      allRefs: allChildrenReferences,
-      actualActiveValue
-    }));
+      })));
+    if (!isDSMobile && renderCustomActions)
+      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
     return null;
   }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
-  const {
-    isShowingEllipsis: isPrimaryShowingEllipsis,
-    setElement: setPrimaryElement
-  } = useIsShowingEllipsis();
-  const {
-    isShowingEllipsis: isSecondaryShowingEllipsis,
-    setElement: setSecondaryElement
-  } = useIsShowingEllipsis();
+  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
+  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
   const handleOnFocus = useCallback(() => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis), [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]);
   const handleOnBlur = useCallback(() => setShowPopover(false), []);
   const Titles = useMemo(() => {
-    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
-        ref: setPrimaryElement,
-        id: "accordion_".concat(title, "id"),
-        disabled: disabled,
-        isDSMobile: isDSMobile,
-        children: title
-      }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
-        ref: setSecondaryElement,
-        disabled: disabled,
-        children: secondaryTitle
-      }), /*#__PURE__*/_jsx2(DSPopperJS, {
-        referenceElement: referenceElement,
-        showPopover: showPopover
-      }, void 0, /*#__PURE__*/_jsx2("div", {
-        style: {
-          maxWidth: 260,
-          padding: 8,
-          background: 'white',
-          display: 'grid',
-          gap: 8
-        }
-      }, void 0, /*#__PURE__*/_jsx2("p", {
-        style: {
-          margin: 0
-        }
-      }, void 0, title), /*#__PURE__*/_jsx2("p", {
-        style: {
-          margin: 0
-        }
-      }, void 0, " ", secondaryTitle)))]
-    });
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
+    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
         ref: setPrimaryElement,
-        id: "accordion_".concat(title, "id"),
-        disabled: disabled,
-        isDSMobile: isDSMobile,
-        children: title
-      }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
+        id: `accordion_${title}id`,
+        disabled,
+        isDSMobile
+      }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
         ref: setSecondaryElement,
-        disabled: disabled,
-        children: secondaryTitle
-      })]
-    });
-  }, [disabled, isDSMobile, isPrimaryShowingEllipsis, isSecondaryShowingEllipsis, referenceElement, secondaryTitle, setPrimaryElement, setSecondaryElement, showPopover, title]);
-  return /*#__PURE__*/_jsx2(StyledItemContainer, {
+        disabled
+      }, secondaryTitle), /* @__PURE__ */ React2.createElement(DSPopperJS, {
+        referenceElement,
+        showPopover
+      }, /* @__PURE__ */ React2.createElement("div", {
+        style: { maxWidth: 260, padding: 8, background: "white", display: "grid", gap: 8 }
+      }, /* @__PURE__ */ React2.createElement("p", {
+        style: { margin: 0 }
+      }, title), /* @__PURE__ */ React2.createElement("p", {
+        style: { margin: 0 }
+      }, " ", secondaryTitle))));
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
+      ref: setPrimaryElement,
+      id: `accordion_${title}id`,
+      disabled,
+      isDSMobile
+    }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
+      ref: setSecondaryElement,
+      disabled
+    }, secondaryTitle));
+  }, [
+    disabled,
+    isDSMobile,
+    isPrimaryShowingEllipsis,
+    isSecondaryShowingEllipsis,
+    referenceElement,
+    secondaryTitle,
+    setPrimaryElement,
+    setSecondaryElement,
+    showPopover,
+    title
+  ]);
+  return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
     "data-testid": DSAccordionDataTestid.ITEM.CONTAINER
-  }, void 0, /*#__PURE__*/_jsx2(StyledItemHeaderContainer, {
-    disabled: disabled
-  }, void 0, /*#__PURE__*/jsxs(StyledItemHeader, {
-    withCustomActions: ((customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0 || renderCustomActions !== undefined) && !isDSMobile,
+  }, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
+    disabled
+  }, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
+    withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
     withSecondaryTitle: secondaryTitle,
     onClick: handleOnClick,
-    tabIndex: !disabled ? 0 : undefined,
-    disabled: disabled,
+    tabIndex: !disabled ? 0 : void 0,
+    disabled,
     "data-disabled": disabled,
     ref: allChildrenReferences[dsIndex],
     onKeyDown: onKeyDownWithIndex,
-    isDSMobile: isDSMobile,
+    isDSMobile,
     "data-testid": DSAccordionDataTestid.ITEM.HEADER,
-    id: "ds-accordion-header-".concat(value),
+    id: `ds-accordion-header-${value}`,
     "aria-expanded": selected,
     "aria-disabled": disabled,
-    "aria-controls": "ds-accordion-content-".concat(value),
+    "aria-controls": `ds-accordion-content-${value}`,
     onFocus: handleOnFocus,
-    onBlur: handleOnBlur,
-    children: [/*#__PURE__*/_jsx2(StyledItemAddon, {
-      disabled: disabled,
-      isDSMobile: isDSMobile
-    }, void 0, selected ? /*#__PURE__*/_jsx2(IconOpened, {
-      isDSMobile: isDSMobile
-    }) : /*#__PURE__*/_jsx2(IconClosed, {
-      isDSMobile: isDSMobile
-    })), /*#__PURE__*/jsx(StyledItemTitles, {
-      onMouseEnter: handleOnFocus,
-      onMouseLeave: handleOnBlur,
-      isDSMobile: isDSMobile,
-      ref: setReferenceElement,
-      children: Titles
-    })]
-  }), CustomActionsContent), selected && /*#__PURE__*/_jsx2(StyledItemContent, {
+    onBlur: handleOnBlur
+  }, /* @__PURE__ */ React2.createElement(StyledItemAddon, {
+    disabled,
+    isDSMobile
+  }, selected ? /* @__PURE__ */ React2.createElement(IconOpened, {
+    isDSMobile
+  }) : /* @__PURE__ */ React2.createElement(IconClosed, {
+    isDSMobile
+  })), /* @__PURE__ */ React2.createElement(StyledItemTitles, {
+    onMouseEnter: handleOnFocus,
+    onMouseLeave: handleOnBlur,
+    isDSMobile,
+    ref: setReferenceElement
+  }, Titles)), CustomActionsContent), selected && /* @__PURE__ */ React2.createElement(StyledItemContent, {
     "data-testid": DSAccordionDataTestid.ITEM.CONTENT,
-    "aria-labelledby": "ds-accordion-header-".concat(value),
+    "aria-labelledby": `ds-accordion-header-${value}`,
     role: "region",
-    isDSMobile: isDSMobile,
-    id: "ds-accordion-content-".concat(value)
-  }, void 0, children));
+    isDSMobile,
+    id: `ds-accordion-content-${value}`
+  }, children));
 };
-
+DSAccordionItem.propTypes = accordionItemPropTypes;
 const DSAccordionItemWithSchema = describe(DSAccordionItem);
 DSAccordionItemWithSchema.propTypes = accordionItemPropTypes;
-
-export { DSAccordionItem, DSAccordionItemWithSchema, DSAccordionItem as default };
+var DSAccordionItem_default = DSAccordionItem;
+export {
+  DSAccordionItem,
+  DSAccordionItemWithSchema,
+  DSAccordionItem_default as default
+};
+//# sourceMappingURL=DSAccordionItem.js.map

package/esm/parts/accordionItem/DSAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n} from './styles';\nimport { accordionItemPropTypes } from '../../propTypes';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport { useIsShowingEllipsis } from './useIsShowingEllipsis';\nimport type { DSAccordionItemPropsT, DSAccordionItemPropsWithDefaultsT } from '../../DSAccordionTypes';\n\nconst DSAccordionItem = (props: DSAccordionItemPropsT): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionItemPropsWithDefaultsT;\n\n  const {\n    children,\n    title,\n    secondaryTitle,\n    customActions,\n    iconOpened: IconOpened,\n    iconClosed: IconClosed,\n    value,\n    disabled,\n    dsIndex,\n    renderCustomActions,\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions>\n          {customActions?.map(({ onClick, id, ...rest }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                if (onClick) onClick(e);\n              }}\n              {...rest}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && renderCustomActions)\n      return (\n        <StyledItemCustomActions>\n          {renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue })}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const Titles = useMemo(() => {\n    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)\n      return (\n        <>\n          <StyledPrimaryTitle\n            ref={setPrimaryElement}\n            id={`accordion_${title}id`}\n            disabled={disabled}\n            isDSMobile={isDSMobile}\n          >\n            {title}\n          </StyledPrimaryTitle>\n          {!isDSMobile && secondaryTitle && (\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n          <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n            <div style={{ maxWidth: 260, padding: 8, background: 'white', display: 'grid', gap: 8 }}>\n              <p style={{ margin: 0 }}>{title}</p>\n              <p style={{ margin: 0 }}> {secondaryTitle}</p>\n            </div>\n          </DSPopperJS>\n        </>\n      );\n\n    return (\n      <>\n        <StyledPrimaryTitle\n          ref={setPrimaryElement}\n          id={`accordion_${title}id`}\n          disabled={disabled}\n          isDSMobile={isDSMobile}\n        >\n          {title}\n        </StyledPrimaryTitle>\n        {!isDSMobile && secondaryTitle && (\n          <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n            {secondaryTitle}\n          </StyledSecondaryTitle>\n        )}\n      </>\n    );\n  }, [\n    disabled,\n    isDSMobile,\n    isPrimaryShowingEllipsis,\n    isSecondaryShowingEllipsis,\n    referenceElement,\n    secondaryTitle,\n    setPrimaryElement,\n    setSecondaryElement,\n    showPopover,\n    title,\n  ]);\n\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER}>\n      <StyledItemHeaderContainer disabled={disabled}>\n        <StyledItemHeader\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          onClick={handleOnClick}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          ref={allChildrenReferences[dsIndex]}\n          onKeyDown={onKeyDownWithIndex}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM.HEADER}\n          id={`ds-accordion-header-${value}`}\n          aria-expanded={selected}\n          aria-disabled={disabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          onFocus={handleOnFocus}\n          onBlur={handleOnBlur}\n        >\n          <StyledItemAddon disabled={disabled} isDSMobile={isDSMobile}>\n            {selected ? <IconOpened isDSMobile={isDSMobile} /> : <IconClosed isDSMobile={isDSMobile} />}\n          </StyledItemAddon>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile={isDSMobile}\n            ref={setReferenceElement}\n          >\n            {Titles}\n          </StyledItemTitles>\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {selected && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.propTypes = accordionItemPropTypes;\n\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/parts/accordionItem/styles.js

@@ -1,117 +1,118 @@
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
+const StyledItemContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto auto;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
+  align-items: center;
+`;
+const StyledItemHeader = styled.button`
+  display: grid;
+  height: ${({ withSecondaryTitle }) => withSecondaryTitle ? "48px" : "32px"};
+  grid-template-columns: ${({ withCustomActions, isDSMobile }) => withCustomActions ? "32px auto" : `${isDSMobile ? `auto 32px` : `32px auto`}`};
+  width: 100%;
+  align-items: center;
+  border: none;
+  outline: none;
+  background: none;
 
-const StyledItemContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-0"
-})(["display:grid;grid-template-rows:auto auto;border-bottom:1px solid ", ";align-items:center;"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral[200];
-});
-const StyledItemHeader = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-fnpjby-1"
-})(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
-  let {
-    withSecondaryTitle
-  } = _ref2;
-  return withSecondaryTitle ? '48px' : '32px';
-}, _ref3 => {
-  let {
-    withCustomActions,
-    isDSMobile
-  } = _ref3;
-  return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
-}, _ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return disabled ? 'not-allowed' : 'pointer';
-}, _ref5 => {
-  let {
-    isDSMobile
-  } = _ref5;
-  return isDSMobile ? "0 16px" : "0";
-}, _ref6 => {
-  let {
-    isDSMobile
-  } = _ref6;
-  return isDSMobile ? "grid-template-areas: 'title addon';" : "";
-}, _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.brand[700];
-});
-const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-2"
-})(["margin:", ";grid-column:1/2;"], _ref8 => {
-  let {
-    isDSMobile
-  } = _ref8;
-  return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
-});
-const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-3"
-})(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
-  let {
-    isDSMobile
-  } = _ref9;
-  return !isDSMobile ? "  padding: 0 8px;\n          \n" : "\n      grid-area: addon;\n      ";
-}, _ref10 => {
-  let {
-    disabled,
-    theme
-  } = _ref10;
-  return disabled ? theme.colors.neutral[200] : theme.colors.brand[800];
-});
-const StyledItemTitles = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-4"
-})(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
-  let {
-    isDSMobile
-  } = _ref11;
-  return isDSMobile ? "grid-area: title;" : "";
-});
-const StyledPrimaryTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-5"
-})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
-  let {
-    disabled,
-    theme
-  } = _ref12;
-  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
-}, _ref13 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref13;
-  return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
-});
-const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-fnpjby-6"
-})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.fontSizes.label[200];
-}, _ref15 => {
-  let {
-    disabled,
-    theme
-  } = _ref15;
-  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
-});
-const StyledItemCustomActions = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-7"
-})(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
-const StyledItemHeaderContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-8"
-})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
-  let {
-    disabled,
-    theme
-  } = _ref16;
-  return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
-});
+  &:hover {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  }
 
-export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };
+  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
+
+  ${({ isDSMobile }) => isDSMobile ? `grid-template-areas: 'title addon';` : ``}
+
+  &:focus {
+    &:after {
+      position: absolute;
+      content: '';
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+      pointer-events: none;
+    }
+  }
+`;
+const StyledItemContent = styled.div`
+  margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
+  grid-column: 1/2;
+`;
+const StyledItemAddon = styled.div`
+  ${({ isDSMobile }) => !isDSMobile ? `  padding: 0 8px;
+          
+` : `
+      grid-area: addon;
+      `}
+  height: 100%;
+  display: grid;
+  place-items: center;
+
+  & .em-ds-icon svg {
+    fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
+  }
+`;
+const StyledItemTitles = styled.div`
+  display: grid;
+  grid-template-columns: 100%;
+  align-content: center;
+  ${({ isDSMobile }) => isDSMobile ? `grid-area: title;` : ``}
+`;
+const StyledPrimaryTitle = styled.div`
+  margin: 0;
+  font-size: 16px;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[700]};
+  font-weight: ${({ theme, isDSMobile }) => isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 16px;
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledSecondaryTitle = styled.span`
+  margin: 0;
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+  text-align: left;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[500]};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 16px;
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledItemCustomActions = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+  margin: 0 16px;
+  justify-content: flex-end;
+`;
+const StyledItemHeaderContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto max-content;
+  place-items: center;
+  position: relative;
+  &:hover {
+    ${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]}` : ``};
+  }
+`;
+export {
+  StyledItemAddon,
+  StyledItemContainer,
+  StyledItemContent,
+  StyledItemCustomActions,
+  StyledItemHeader,
+  StyledItemHeaderContainer,
+  StyledItemTitles,
+  StyledPrimaryTitle,
+  StyledSecondaryTitle
+};
+//# sourceMappingURL=styles.js.map

package/esm/parts/accordionItem/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport type {\n  StyledItemAddonPropsT,\n  StyledItemHeaderPropsT,\n  StyledItemTitlesPropsT,\n  StyledPrimaryTitlePropsT,\n  StyledSecondaryTitlePropsT,\n  StyledItemContentPropsT,\n} from '../../DSAccordionTypes';\n\nexport const StyledItemContainer = styled.div`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n`;\n\nexport const StyledItemHeader = styled.button<StyledItemHeaderPropsT>`\n  display: grid;\n  height: ${({ withSecondaryTitle }) => (withSecondaryTitle ? '48px' : '32px')};\n  grid-template-columns: ${({ withCustomActions, isDSMobile }) =>\n    withCustomActions ? '32px auto' : `${isDSMobile ? `auto 32px` : `32px auto`}`};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n\n  ${({ isDSMobile }) => (isDSMobile ? `grid-template-areas: 'title addon';` : ``)}\n\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled.div<StyledItemContentPropsT>`\n  margin: ${({ isDSMobile }) => (isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`)};\n  grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled.div<StyledItemAddonPropsT>`\n  ${({ isDSMobile }) =>\n    !isDSMobile\n      ? `  padding: 0 8px;\n          \n`\n      : `\n      grid-area: addon;\n      `}\n  height: 100%;\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled.div<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-template-columns: 100%;\n  align-content: center;\n  ${({ isDSMobile }) => (isDSMobile ? `grid-area: title;` : ``)}\n`;\n\nexport const StyledPrimaryTitle = styled.div<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular)};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 16px;\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledSecondaryTitle = styled.span<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  text-align: left;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[500])};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 16px;\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledItemCustomActions = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  grid-gap: 8px;\n  margin: 0 16px;\n  justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]}` : ``)};\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AAUO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,yBAA0B,qBAAqB,SAAS;AAAA,2BAC5C,CAAC,EAAE,mBAAmB,iBAC7C,oBAAoB,cAAc,GAAG,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQtD,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWpD,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,OAAO;AAAA,IAClC,CAAC,EAAE,iBACH,CAAC,aACG;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQI,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,iBAAkB,aAAa,sBAAsB;AAAA;AAGrD,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA,WAG9B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,YAAY,UAAU,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUjG,MAAM,uBAAuB,OAAO;AAAA;AAAA,eAE5B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,WAEzC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1F,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;",
+  "names": []
+}

package/esm/parts/accordionItem/useAccordionItem.js

@@ -1,42 +1,28 @@
-import 'core-js/modules/esnext.async-iterator.some.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.some.js';
-import { useContext, useMemo, useCallback } from 'react';
-import { DSAccordionContext } from '../../DSAccordionCTX.js';
-
-const useAccordionItem = _ref => {
-  let {
-    value,
-    disabled
-  } = _ref;
-  const {
-    actualActiveValue,
-    setActiveValues,
-    focusableChildrenReferences
-  } = useContext(DSAccordionContext);
+import * as React from "react";
+import { useCallback, useContext, useMemo } from "react";
+import { DSAccordionContext } from "../../DSAccordionCTX";
+const useAccordionItem = ({ value, disabled }) => {
+  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);
   const selected = useMemo(() => {
     if (Array.isArray(actualActiveValue)) {
-      return actualActiveValue.some(currentValue => currentValue === value);
+      return actualActiveValue.some((currentValue) => currentValue === value);
     }
-
     return value === actualActiveValue;
   }, [actualActiveValue, value]);
-  const handleOnClick = useCallback(e => {
-    if (!disabled) setActiveValues(value, e);
+  const handleOnClick = useCallback((e) => {
+    if (!disabled)
+      setActiveValues(value, e);
   }, [disabled, setActiveValues, value]);
   const handleOnKeyDown = useCallback((e, _dsIndex) => {
-    if (!disabled && e.key === 'ArrowDown') {
-      var _focusableChildrenRef, _focusableChildrenRef2, _focusableChildrenRef3, _focusableChildrenRef4, _focusableChildrenRef5;
-
-      const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
-      if ((_focusableChildrenRef = focusableChildrenReferences[currentIndex + 1]) !== null && _focusableChildrenRef !== void 0 && (_focusableChildrenRef2 = _focusableChildrenRef.ref) !== null && _focusableChildrenRef2 !== void 0 && _focusableChildrenRef2.current) (_focusableChildrenRef3 = focusableChildrenReferences[currentIndex + 1]) === null || _focusableChildrenRef3 === void 0 ? void 0 : (_focusableChildrenRef4 = _focusableChildrenRef3.ref) === null || _focusableChildrenRef4 === void 0 ? void 0 : (_focusableChildrenRef5 = _focusableChildrenRef4.current) === null || _focusableChildrenRef5 === void 0 ? void 0 : _focusableChildrenRef5.focus();
+    if (!disabled && e.key === "ArrowDown") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();
     }
-
-    if (!disabled && e.key === 'ArrowUp') {
-      var _focusableChildrenRef6, _focusableChildrenRef7, _focusableChildrenRef8, _focusableChildrenRef9, _focusableChildrenRef10;
-
-      const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
-      if ((_focusableChildrenRef6 = focusableChildrenReferences[currentIndex - 1]) !== null && _focusableChildrenRef6 !== void 0 && (_focusableChildrenRef7 = _focusableChildrenRef6.ref) !== null && _focusableChildrenRef7 !== void 0 && _focusableChildrenRef7.current) (_focusableChildrenRef8 = focusableChildrenReferences[currentIndex - 1]) === null || _focusableChildrenRef8 === void 0 ? void 0 : (_focusableChildrenRef9 = _focusableChildrenRef8.ref) === null || _focusableChildrenRef9 === void 0 ? void 0 : (_focusableChildrenRef10 = _focusableChildrenRef9.current) === null || _focusableChildrenRef10 === void 0 ? void 0 : _focusableChildrenRef10.focus();
+    if (!disabled && e.key === "ArrowUp") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();
     }
   }, [disabled, focusableChildrenReferences]);
   return {
@@ -45,5 +31,7 @@ const useAccordionItem = _ref => {
     selected
   };
 };
-
-export { useAccordionItem };
+export {
+  useAccordionItem
+};
+//# sourceMappingURL=useAccordionItem.js.map