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

package/cjs/parts/accordionItem/styles.js

@@ -1,133 +1,147 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledItemAddon: () => StyledItemAddon,
+  StyledItemContainer: () => StyledItemContainer,
+  StyledItemContent: () => StyledItemContent,
+  StyledItemCustomActions: () => StyledItemCustomActions,
+  StyledItemHeader: () => StyledItemHeader,
+  StyledItemHeaderContainer: () => StyledItemHeaderContainer,
+  StyledItemTitles: () => StyledItemTitles,
+  StyledPrimaryTitle: () => StyledPrimaryTitle,
+  StyledSecondaryTitle: () => StyledSecondaryTitle
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const StyledItemContainer = import_styled_components.default.div`
+  display: grid;
+  grid-template-rows: auto auto;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
+  align-items: center;
+`;
+const StyledItemHeader = import_styled_components.default.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;
 
-var styled = require('styled-components');
+  &:hover {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  }
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
 
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+  ${({ isDSMobile }) => isDSMobile ? `grid-template-areas: 'title addon';` : ``}
 
-const StyledItemContainer = /*#__PURE__*/styled__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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]) : "";
-});
+  &: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 = import_styled_components.default.div`
+  margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
+  grid-column: 1/2;
+`;
+const StyledItemAddon = import_styled_components.default.div`
+  ${({ isDSMobile }) => !isDSMobile ? `  padding: 0 8px;
+          
+` : `
+      grid-area: addon;
+      `}
+  height: 100%;
+  display: grid;
+  place-items: center;
 
-exports.StyledItemAddon = StyledItemAddon;
-exports.StyledItemContainer = StyledItemContainer;
-exports.StyledItemContent = StyledItemContent;
-exports.StyledItemCustomActions = StyledItemCustomActions;
-exports.StyledItemHeader = StyledItemHeader;
-exports.StyledItemHeaderContainer = StyledItemHeaderContainer;
-exports.StyledItemTitles = StyledItemTitles;
-exports.StyledPrimaryTitle = StyledPrimaryTitle;
-exports.StyledSecondaryTitle = StyledSecondaryTitle;
+  & .em-ds-icon svg {
+    fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
+  }
+`;
+const StyledItemTitles = import_styled_components.default.div`
+  display: grid;
+  grid-template-columns: 100%;
+  align-content: center;
+  ${({ isDSMobile }) => isDSMobile ? `grid-area: title;` : ``}
+`;
+const StyledPrimaryTitle = import_styled_components.default.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 = import_styled_components.default.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 = import_styled_components.default.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+  margin: 0 16px;
+  justify-content: flex-end;
+`;
+const StyledItemHeaderContainer = import_styled_components.default.div`
+  display: grid;
+  grid-template-columns: auto max-content;
+  place-items: center;
+  position: relative;
+  &:hover {
+    ${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]}` : ``};
+  }
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAUZ,MAAM,sBAAsB,iCAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,iCAAO;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,iCAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,iCAAO;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,iCAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,iBAAkB,aAAa,sBAAsB;AAAA;AAGrD,MAAM,qBAAqB,iCAAO;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,iCAAO;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,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,4BAA4B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;",
+  "names": []
+}

package/cjs/parts/accordionItem/useAccordionItem.js

@@ -1,46 +1,59 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.some.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.some.js');
-var React = require('react');
-var DSAccordionCTX = require('../../DSAccordionCTX.js');
-
-const useAccordionItem = _ref => {
-  let {
-    value,
-    disabled
-  } = _ref;
-  const {
-    actualActiveValue,
-    setActiveValues,
-    focusableChildrenReferences
-  } = React.useContext(DSAccordionCTX.DSAccordionContext);
-  const selected = React.useMemo(() => {
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useAccordionItem_exports = {};
+__export(useAccordionItem_exports, {
+  useAccordionItem: () => useAccordionItem
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_DSAccordionCTX = __toESM(require("../../DSAccordionCTX"));
+const useAccordionItem = ({ value, disabled }) => {
+  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = (0, import_react.useContext)(import_DSAccordionCTX.DSAccordionContext);
+  const selected = (0, import_react.useMemo)(() => {
     if (Array.isArray(actualActiveValue)) {
-      return actualActiveValue.some(currentValue => currentValue === value);
+      return actualActiveValue.some((currentValue) => currentValue === value);
     }
-
     return value === actualActiveValue;
   }, [actualActiveValue, value]);
-  const handleOnClick = React.useCallback(e => {
-    if (!disabled) setActiveValues(value, e);
+  const handleOnClick = (0, import_react.useCallback)((e) => {
+    if (!disabled)
+      setActiveValues(value, e);
   }, [disabled, setActiveValues, value]);
-  const handleOnKeyDown = React.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();
+  const handleOnKeyDown = (0, import_react.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') {
-      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 {
@@ -49,5 +62,5 @@ const useAccordionItem = _ref => {
     selected
   };
 };
-
-exports.useAccordionItem = useAccordionItem;
+module.exports = __toCommonJS(useAccordionItem_exports);
+//# sourceMappingURL=useAccordionItem.js.map

package/cjs/parts/accordionItem/useAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/accordionItem/useAccordionItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,4BAAmC;AAG5B,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,6BAAW;AAEvF,QAAM,WAAW,0BAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,8BACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,8BACtB,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/cjs/parts/accordionItem/useIsShowingEllipsis.js

@@ -1,37 +1,58 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useIsShowingEllipsis_exports = {};
+__export(useIsShowingEllipsis_exports, {
+  useIsShowingEllipsis: () => useIsShowingEllipsis
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 const useIsShowingEllipsis = () => {
-  const [element, setElement] = React.useState();
-  const [isShowingEllipsis, setIsShowingEllipsis] = React.useState(false); // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;
-
-  const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
+  const [element, setElement] = (0, import_react.useState)();
+  const [isShowingEllipsis, setIsShowingEllipsis] = (0, import_react.useState)(false);
+  const resizeObserver = (0, import_react.useMemo)(() => new ResizeObserver((entries) => {
     if (entries.length) {
       const [textWrapperEntry] = entries;
       const el = textWrapperEntry.target;
-      setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
+      setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);
     }
   }), []);
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (element) {
-      setIsShowingEllipsis((element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth));
+      setIsShowingEllipsis(element?.scrollWidth > element?.clientWidth);
       resizeObserver.observe(element);
     }
-
     return () => {
       if (element) {
         resizeObserver.unobserve(element);
       }
     };
   }, [resizeObserver, element]);
-  return {
-    setElement,
-    isShowingEllipsis
-  };
+  return { setElement, isShowingEllipsis };
 };
-
-exports.useIsShowingEllipsis = useIsShowingEllipsis;
+module.exports = __toCommonJS(useIsShowingEllipsis_exports);
+//# sourceMappingURL=useIsShowingEllipsis.js.map

package/cjs/parts/accordionItem/useIsShowingEllipsis.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/accordionItem/useIsShowingEllipsis.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect, useState, useMemo } from 'react';\n\nexport const useIsShowingEllipsis = () => {\n  const [element, setElement] = useState<HTMLSpanElement>();\n\n  const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);\n  // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;\n\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        if (entries.length) {\n          const [textWrapperEntry] = entries;\n          const el = textWrapperEntry.target;\n          setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);\n        }\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (element) {\n      setIsShowingEllipsis(element?.scrollWidth > element?.clientWidth);\n      resizeObserver.observe(element);\n    }\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [resizeObserver, element]);\n\n  return { setElement, isShowingEllipsis };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoD;AAE7C,MAAM,uBAAuB,MAAM;AACxC,QAAM,CAAC,SAAS,cAAc;AAE9B,QAAM,CAAC,mBAAmB,wBAAwB,2BAAS;AAG3D,QAAM,iBAAiB,0BACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,QAAI,QAAQ,QAAQ;AAClB,YAAM,CAAC,oBAAoB;AAC3B,YAAM,KAAK,iBAAiB;AAC5B,2BAAqB,IAAI,cAAc,IAAI;AAAA;AAAA,MAGjD;AAGF,8BAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,SAAS,cAAc,SAAS;AACrD,qBAAe,QAAQ;AAAA;AAEzB,WAAO,MAAM;AACX,UAAI,SAAS;AACX,uBAAe,UAAU;AAAA;AAAA;AAAA,KAG5B,CAAC,gBAAgB;AAEpB,SAAO,EAAE,YAAY;AAAA;",
+  "names": []
+}

package/cjs/propTypes.js

@@ -1,26 +1,57 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var propTypes_exports = {};
+__export(propTypes_exports, {
+  accordionItemPropTypes: () => accordionItemPropTypes,
+  accordionPropTypes: () => accordionPropTypes
+});
+var React = __toESM(require("react"));
+var import_react_desc = __toESM(require("react-desc"));
 const accordionItemPropTypes = {
-  children: reactDesc.PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
-  title: reactDesc.PropTypes.string.description('Set a primary title.'),
-  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
-  iconClosed: reactDesc.PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
-  iconOpened: reactDesc.PropTypes.node.description('Custom Dimsum Icon when it is open.'),
-  secondaryTitle: reactDesc.PropTypes.string.description('Set a secondary title'),
-  customActions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
-  renderCustomActions: reactDesc.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.')
+  children: import_react_desc.PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
+  title: import_react_desc.PropTypes.string.description("Set a primary title."),
+  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Dimsum AccordionItem value, this value should be unique.").isRequired,
+  iconClosed: import_react_desc.PropTypes.node.description("Custom Dimsum Icon when it is closed."),
+  iconOpened: import_react_desc.PropTypes.node.description("Custom Dimsum Icon when it is open."),
+  secondaryTitle: import_react_desc.PropTypes.string.description("Set a secondary title"),
+  customActions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.object).description("Set Dimsum AccordionItem custom actions."),
+  renderCustomActions: import_react_desc.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: reactDesc.PropTypes.object.description('Adds props to the container.'),
-  activeValue: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])), reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
-  children: reactDesc.PropTypes.node.description('Dimsum AccordionItems to show.'),
-  allowMultipleOpen: reactDesc.PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
-  onChange: reactDesc.PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
+  containerProps: import_react_desc.PropTypes.object.description("Adds props to the container."),
+  activeValue: import_react_desc.PropTypes.oneOfType([
+    import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number])),
+    import_react_desc.PropTypes.string,
+    import_react_desc.PropTypes.number
+  ]).description("Selected active value. This property makes the component a controlled one."),
+  children: import_react_desc.PropTypes.node.description("Dimsum AccordionItems to show."),
+  allowMultipleOpen: import_react_desc.PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
+  onChange: import_react_desc.PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
 };
-
-exports.accordionItemPropTypes = accordionItemPropTypes;
-exports.accordionPropTypes = accordionPropTypes;
+module.exports = __toCommonJS(propTypes_exports);
+//# sourceMappingURL=propTypes.js.map

package/cjs/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,yBAAyB;AAAA,EACpC,UAAU,4BAAU,KAAK,YAAY,iCAAiC;AAAA,EACtE,OAAO,4BAAU,OAAO,YAAY;AAAA,EACpC,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D,4DACA;AAAA,EACF,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,eAAe,4BAAU,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAC/D,qBAAqB,4BAAU,KAAK,YAClC;AAAA;AAIG,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,aAAa,4BAAU,UAAU;AAAA,IAC/B,4BAAU,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACnE,4BAAU;AAAA,IACV,4BAAU;AAAA,KACT,YAAY;AAAA,EACf,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,mBAAmB,4BAAU,KAAK,YAAY;AAAA,EAC9C,UAAU,4BAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}