@elliemae/ds-accordion 2.3.0-next.3 → 3.0.0-alpha.0

package/esm/parts/accordionItem/styles.js

@@ -1,133 +0,0 @@
-import styled from 'styled-components';
-
-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:flex;height:", ";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 {
-    theme,
-    withSecondaryTitle
-  } = _ref2;
-  return withSecondaryTitle ? theme.space.m : theme.space.s;
-}, _ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? 'not-allowed' : 'pointer';
-}, _ref4 => {
-  let {
-    isDSMobile
-  } = _ref4;
-  return isDSMobile ? "0 16px" : "0";
-}, _ref5 => {
-  let {
-    isDSMobile
-  } = _ref5;
-  return isDSMobile ? "flex-direction: row-reverse;" : "";
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.brand[700];
-});
-const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-2"
-})(["margin:", ";grid-column:1/2;"], _ref7 => {
-  let {
-    isDSMobile
-  } = _ref7;
-  return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
-});
-const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-3"
-})(["", " height:100%;width:", ";display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref8 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref8;
-  return !isDSMobile ? "padding: 0 ".concat(theme.space.xxs, ";") : "";
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space.s;
-}, _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%;width:100%;align-content:center;"]);
-const StyledPrimaryTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-5"
-})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
-  let {
-    disabled,
-    theme
-  } = _ref11;
-  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
-}, _ref12 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref12;
-  return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
-}, _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.space.xs;
-});
-const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-fnpjby-6"
-})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:", ";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];
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space.xs;
-});
-const StyledItemCustomActions = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-7"
-})(["display:grid;grid-auto-flow:column;grid-gap:", ";margin:0 ", ";justify-content:flex-end;"], _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.space.xxs;
-}, _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.space.xs;
-});
-const StyledItemHeaderContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-8"
-})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", "}"], _ref19 => {
-  let {
-    disabled,
-    theme
-  } = _ref19;
-  return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
-});
-
-export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };

package/esm/parts/accordionItem/useAccordionItem.js

@@ -1,49 +0,0 @@
-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);
-  const selected = useMemo(() => {
-    if (Array.isArray(actualActiveValue)) {
-      return actualActiveValue.some(currentValue => currentValue === value);
-    }
-
-    return value === actualActiveValue;
-  }, [actualActiveValue, value]);
-  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 === '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();
-    }
-  }, [disabled, focusableChildrenReferences]);
-  return {
-    handleOnClick,
-    handleOnKeyDown,
-    selected
-  };
-};
-
-export { useAccordionItem };

package/esm/propTypes.js

@@ -1,21 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const accordionItemPropTypes = {
-  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
-  title: PropTypes.string.description('Set a primary title.'),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
-  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
-  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),
-  secondaryTitle: PropTypes.string.description('Set a secondary title'),
-  customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
-  renderCustomActions: PropTypes.func.description('This property will render any JSX in the custom actions area. You can access to all references and active values within the props.')
-};
-const accordionPropTypes = {
-  containerProps: PropTypes.object.description('Adds props to the container.'),
-  activeValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.string, PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
-  children: PropTypes.node.description('Dimsum AccordionItems to show.'),
-  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
-  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
-};
-
-export { accordionItemPropTypes, accordionPropTypes };