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

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

@@ -1,114 +0,0 @@
-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: flex;
-  height: ${({ theme, withSecondaryTitle }) => withSecondaryTitle ? theme.space.m : theme.space.s};
-  width: 100%;
-  align-items: center;
-  border: none;
-  outline: none;
-  background: none;
-
-  &:hover {
-    cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
-  }
-
-  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
-
-  ${({ isDSMobile }) => isDSMobile ? `flex-direction: row-reverse;` : ``}
-
-  &: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`
-  ${({ theme, isDSMobile }) => !isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``}
-  height: 100%;
-  width: ${({ theme }) => theme.space.s};
-  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%;
-  width: 100%;
-  align-content: center;
-`;
-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: ${({ theme }) => theme.space.xs};
-  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: ${({ theme }) => theme.space.xs};
-  width: 100%;
-  text-align: left;
-  display: block;
-  white-space: nowrap;
-`;
-const StyledItemCustomActions = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: ${({ theme }) => theme.space.xxs};
-  margin: 0 ${({ theme }) => theme.space.xs};
-  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/dist/esm/parts/accordionItem/styles.js.map

@@ -1,7 +0,0 @@
-{
-  "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  StyledItemHeaderContainerPropsT,\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: flex;\n  height: ${({ theme, withSecondaryTitle }) => (withSecondaryTitle ? theme.space.m : theme.space.s)};\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 ? `flex-direction: row-reverse;` : ``)}\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  ${({ theme, isDSMobile }) => (!isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``)}\n  height: 100%;\n  width: ${({ theme }) => theme.space.s};\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  width: 100%;\n  align-content: center;\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: ${({ theme }) => theme.space.xs};\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: ${({ theme }) => theme.space.xs};\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: ${({ theme }) => theme.space.xxs};\n  margin: 0 ${({ theme }) => theme.space.xs};\n  justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div<StyledItemHeaderContainerPropsT>`\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;AAWO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,OAAO,yBAA0B,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQnF,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAW7C,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,OAAO,iBAAkB,CAAC,aAAa,cAAc,MAAM,MAAM,SAAS;AAAA;AAAA,WAEtE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,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,YAG5F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,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,YAGrF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,cAGhC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,cAC3B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAIlC,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/parts/accordionItem/useAccordionItem.js

@@ -1,37 +0,0 @@
-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 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") {
-      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") {
-      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
-      if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)
-        focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();
-    }
-  }, [disabled, focusableChildrenReferences]);
-  return {
-    handleOnClick,
-    handleOnKeyDown,
-    selected
-  };
-};
-export {
-  useAccordionItem
-};
-//# sourceMappingURL=useAccordionItem.js.map

package/dist/esm/parts/accordionItem/useAccordionItem.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/useAccordionItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport type { UseAccordionPropsT, UseAccordionItemReturnTypeT } from '../../DSAccordionTypes';\n\nexport const useAccordionItem = ({ value, disabled }: UseAccordionPropsT): UseAccordionItemReturnTypeT => {\n  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n  const selected = useMemo(() => {\n    if (Array.isArray(actualActiveValue)) {\n      return actualActiveValue.some((currentValue) => currentValue === value);\n    }\n    return value === actualActiveValue;\n  }, [actualActiveValue, value]);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (!disabled) setActiveValues(value, e);\n    },\n    [disabled, setActiveValues, value],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, _dsIndex: number) => {\n      if (!disabled && e.key === 'ArrowDown') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n      }\n\n      if (!disabled && e.key === 'ArrowUp') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n      }\n    },\n    [disabled, focusableChildrenReferences],\n  );\n\n  return {\n    handleOnClick,\n    handleOnKeyDown,\n    selected,\n  };\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,WAAW;AAEvF,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,YACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,YACtB,CAAC,GAAwB,aAAqB;AAC5C,QAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAGjE,QAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAAA,KAGnE,CAAC,UAAU;AAGb,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/propTypes.js

@@ -1,28 +0,0 @@
-import * as React from "react";
-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
-};
-//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const accordionItemPropTypes = {\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),\n  renderCustomActions: PropTypes.func.description(\n    'This property will render any JSX in the custom actions area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,iCAAiC;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D,4DACA;AAAA,EACF,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,eAAe,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAC/D,qBAAqB,UAAU,KAAK,YAClC;AAAA;AAIG,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EACf,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,mBAAmB,UAAU,KAAK,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA;",
-  "names": []
-}