react-image-accordion 1.2.2 → 1.3.2

package/dist/index.js

@@ -8,48 +8,70 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+    return _arr;
   }
 }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-var css_248z = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  color-scheme: dark;\n}\n\nbody {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n\n  margin: 0;\n  font-family: system-ui;\n  font-size: 1.125rem;\n  line-height: 1.6;\n}\n\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n.wrapper {\n  /* max-width: 50rem; */\n  margin-inline: auto;\n  padding-inline: 1rem;\n}\n\n.accordionImage {\n  --_button-size: 3rem;\n  --_panel-padding: 0.75rem;\n  --_panel-gap: 1rem;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 45em) {\n  .accordionImage {\n    flex-direction: row;\n    height: 30rem;\n  }\n}\n\n.accordionImage * {\n  margin: 0;\n}\n\n.accordion-panel {\n  position: relative;\n  isolation: isolate;\n  flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n  overflow: hidden;\n  padding: var(--_panel-padding);\n  padding-right: calc(var(--_panel-padding) * 4);\n  border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel {\n    transition: flex-basis 500ms, flex-grow 500ms;\n  }\n}\n\n.accordion-panel:nth-child(1) {\n  --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n  --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n  --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n  --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n  --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n  --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n  --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n  --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n  --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n  --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n  flex-basis: clamp(15rem, 40vh, 20rem);\n  flex-grow: 1;\n}\n\n.accordion-trigger {\n  outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n  outline: 3px solid var(--_panel-color);\n  outline-offset: 4px;\n}\n\n.accordion-content > p {\n  transform: translateY(2rem);\n  opacity: 0;\n  margin-left: calc(var(--_button-size) + var(--_panel-gap));\n  color: rgb(255, 255, 255) !important;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n    transition: transform 500ms 500ms, opacity 500ms 500ms;\n  }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.accordion-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  align-items: center;\n  color: rgb(255, 255, 255) !important;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-Link,\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n  display: none;\n}\n\n@media (max-width: 44.999em) {\n  .accordion-title::after {\n    content: \"\";\n    position: absolute;\n\n    left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n    width: calc(100% + (var(--_button-size) * 2));\n    height: var(--_button-size);\n    background: hsl(0 0% 0% /0.55);\n    z-index: -1;\n    border-radius: 100vw;\n  }\n}\n\n.accordion-Link {\n  all: revert;\n  display: block;\n  position: absolute;\n  left: -0.1rem;\n  bottom: 0;\n  margin: 0.75rem;\n  width: 10rem;\n  height: var(--_button-size);\n  background: hsl(0 0% 0% /0.55);\n  border-radius: 100vw;\n  padding: 0.75rem;\n  font-weight: bolder;\n}\n\n.accordion-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: -1;\n  transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n  filter: brightness(0.5);\n}\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--_panel-gap);\n  background: transparent;\n  border: 0;\n  padding: 0;\n}\n.accordion-icon {\n  fill: var(--_panel-color);\n  background: hsl(0 0% 0% /0.55);\n  width: var(--_button-size);\n  aspect-ratio: 1/1;\n  padding: 0.75rem;\n  border-radius: 50%;\n  z-index: 10;\n}\n";
-styleInject(css_248z);
-
-function UseImageAccordion({
-  accordionData,
-  AccordionWidth,
-  AccordionHeight,
-  ContentSize,
-  onClick,
-  ShowButton
-}) {
-  const [activePanel, setActivePanel] = React.useState(null);
-  const ContentSizeFont = ContentSize || [];
+function UseImageAccordion(_ref) {
+  var accordionData = _ref.accordionData,
+    AccordionWidth = _ref.AccordionWidth,
+    AccordionHeight = _ref.AccordionHeight,
+    ContentSize = _ref.ContentSize,
+    _onClick = _ref.onClick,
+    ShowButton = _ref.ShowButton;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activePanel = _useState2[0],
+    setActivePanel = _useState2[1];
+  var ContentSizeFont = ContentSize || [];
   function toggleAccordion(panelToActivate) {
-    setActivePanel(prevPanel => {
+    setActivePanel(function (prevPanel) {
       if (prevPanel === panelToActivate) {
         return prevPanel;
       } else {
@@ -57,39 +79,9 @@ function UseImageAccordion({
       }
     });
   }
-  const HeightStyle = `
-     @media (min-width: 768px) {
-      .AccHeight {
-        height: ${AccordionHeight};
-      }
-    }`;
-  const css = `
-    @media (max-width: 480px) {
-      .ContentSize {
-        font-size: ${ContentSizeFont[0] || "0.65rem"};
-      }
-    }
-    @media (min-width: 481px) and (max-width: 768px) {
-      .ContentSize {
-        font-size: ${ContentSizeFont[1] || "0.8rem"};
-      }
-    }
-    @media (min-width: 769px) and (max-width: 1024px) {
-      .ContentSize {
-        font-size: ${ContentSizeFont[2] || "1rem"};
-      }
-    }
-    @media (min-width: 1025px) and (max-width: 1200px) {
-      .ContentSize {
-        font-size: ${ContentSizeFont[3] || "1.2rem"};
-      }
-    }
-    @media (min-width: 1201px) {
-      .ContentSize {
-        font-size: ${ContentSizeFont[4] || "1.5rem"};
-      }
-    }`;
-  React.useEffect(() => {
+  var HeightStyle = "\n     @media (min-width: 768px) {\n      .AccHeight {\n        height: ".concat(AccordionHeight, ";\n      }\n    }");
+  var css = "\n    @media (max-width: 480px) {\n      .ContentSize {\n        font-size: ".concat(ContentSizeFont[0] || "0.65rem", ";\n      }\n    }\n    @media (min-width: 481px) and (max-width: 768px) {\n      .ContentSize {\n        font-size: ").concat(ContentSizeFont[1] || "0.8rem", ";\n      }\n    }\n    @media (min-width: 769px) and (max-width: 1024px) {\n      .ContentSize {\n        font-size: ").concat(ContentSizeFont[2] || "1rem", ";\n      }\n    }\n    @media (min-width: 1025px) and (max-width: 1200px) {\n      .ContentSize {\n        font-size: ").concat(ContentSizeFont[3] || "1.2rem", ";\n      }\n    }\n    @media (min-width: 1201px) {\n      .ContentSize {\n        font-size: ").concat(ContentSizeFont[4] || "1.5rem", ";\n      }\n    }");
+  React.useEffect(function () {
     setActivePanel(accordionData[0].id);
   }, []);
   if (!accordionData) return null;
@@ -102,61 +94,64 @@ function UseImageAccordion({
     scoped: true
   }, HeightStyle), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "accordionImage AccHeight"
-  }, accordionData.map(item => /*#__PURE__*/React__default["default"].createElement("div", {
-    key: item.id,
-    className: "accordion-panel",
-    onClick: () => toggleAccordion(item.id)
-  }, /*#__PURE__*/React__default["default"].createElement("h2", {
-    id: item.id
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "accordion-trigger",
-    "aria-controls": "panel1-content",
-    "aria-expanded": activePanel === item.id
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "accordion-title",
-    id: item.id
-  }, item.title), /*#__PURE__*/React__default["default"].createElement("svg", {
-    "aria-hidden": "true",
-    className: "accordion-icon",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("image", {
-    href: item.svg
-  })))), /*#__PURE__*/React__default["default"].createElement("style", {
-    scoped: true
-  }, css), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "accordion-content ContentSize",
-    style: {
-      height: `calc(${AccordionHeight} - 5rem)`
-    },
-    id: item.id,
-    "aria-labelledby": item.id,
-    "aria-hidden": activePanel !== item.id,
-    role: "region"
-  }, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), ShowButton && /*#__PURE__*/React__default["default"].createElement("button", {
-    className: "accordion-Link",
-    onClick: e => {
-      e.stopPropagation();
-      onClick({
-        id: item.id,
-        title: item.title
-      });
-    }
-  }, item.title), /*#__PURE__*/React__default["default"].createElement("img", {
-    className: "accordion-image",
-    src: item.image,
-    alt: item.alt
-  })))))));
+  }, accordionData.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: item.id,
+      className: "accordion-panel",
+      onClick: function onClick() {
+        return toggleAccordion(item.id);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("h2", {
+      id: item.id
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      className: "accordion-trigger",
+      "aria-controls": "panel1-content",
+      "aria-expanded": activePanel === item.id
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "accordion-title",
+      id: item.id
+    }, item.title), /*#__PURE__*/React__default["default"].createElement("svg", {
+      "aria-hidden": "true",
+      className: "accordion-icon",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React__default["default"].createElement("image", {
+      href: item.svg
+    })))), /*#__PURE__*/React__default["default"].createElement("style", {
+      scoped: true
+    }, css), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "accordion-content ContentSize",
+      style: {
+        height: "calc(".concat(AccordionHeight, " - 5rem)")
+      },
+      id: item.id,
+      "aria-labelledby": item.id,
+      "aria-hidden": activePanel !== item.id,
+      role: "region"
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), ShowButton && /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "accordion-Link",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        _onClick({
+          id: item.id,
+          title: item.title
+        });
+      }
+    }, item.title), /*#__PURE__*/React__default["default"].createElement("img", {
+      className: "accordion-image",
+      src: item.image,
+      alt: item.alt
+    })));
+  }))));
 }
 
-const ReactImageAccordion = ({
-  accordionData,
-  AccordionWidth,
-  AccordionHeight,
-  ContentSize,
-  onClick,
-  ShowButton
-}) => {
+var ReactImageAccordion = function ReactImageAccordion(_ref) {
+  var accordionData = _ref.accordionData,
+    AccordionWidth = _ref.AccordionWidth,
+    AccordionHeight = _ref.AccordionHeight,
+    ContentSize = _ref.ContentSize,
+    onClick = _ref.onClick,
+    ShowButton = _ref.ShowButton;
   return /*#__PURE__*/React__default["default"].createElement(UseImageAccordion, {
     accordionData: accordionData,
     AccordionWidth: AccordionWidth,

package/package.json

@@ -1,65 +1,70 @@
-{
-  "name": "react-image-accordion",
-  "version": "1.2.2",
-  "description": "Accordion component for React",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build-lib": "rollup -c"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:masoud-naji/Accordion.git"
-  },
-  "keywords": [
-    "react",
-    "accordion",
-    "react-accordion",
-    "accordion-component",
-    "react-accordion-component",
-    "react-component",
-    "accordion-react-component"
-  ],
-  "author": "Masoud Naji",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/masoud-naji/Accordion"
-  },
-  "homepage": "https://github.com/masoud-naji/Accordion",
-  "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-mdx-gfm": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/react-webpack5": "^7.0.7",
-    "@storybook/testing-library": "^0.1.0",
-    "babel-loader": "^8.2.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^3.1.8",
-    "storybook": "^7.0.7"
-  },
-  "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
-  },
-  "dependencies": {
-    "@rollup/plugin-terser": "^0.4.1",
-    "react-image-accordion": "^1.1.6",
-    "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-terser": "^7.0.2"
-  }
-}
+{
+  "name": "react-image-accordion",
+  "version": "1.3.2",
+  "description": "Accordion component for React",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build-lib",
+    "build-lib": "rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/masoud-naji/Accordion.git"
+  },
+  "keywords": [
+    "react",
+    "accordion",
+    "react-accordion",
+    "accordion-component",
+    "react-accordion-component",
+    "react-component",
+    "accordion-react-component"
+  ],
+  "author": "Masoud Naji",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/masoud-naji/Accordion/issues"
+  },
+  "homepage": "https://github.com/masoud-naji/Accordion#readme",
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-actions": "^7.0.7",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/addon-mdx-gfm": "^7.0.7",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-webpack5": "^7.0.7",
+    "@storybook/testing-library": "^0.1.0",
+    "babel-loader": "^8.2.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
+    "storybook": "^7.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.1",
+    "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

package/.babelrc.json

@@ -1,15 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ],
-    "@babel/preset-react"
-  ],
-  "plugins": []
-}

package/.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
-  "framework": {
-    name: "@storybook/react-webpack5",
-    options: {}
-  },
-  docs: {
-    autodocs: true
-  }
-};

package/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

package/rollup.config.js

@@ -1,39 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
-import localResolve from 'rollup-plugin-local-resolve';
-// import { terser } from "rollup-plugin-terser";
-
-export default [
-    {
-        input: 'src/index.js',
-        output: [
-            {
-            file: 'dist/index.js',
-            format: 'cjs',
-            },
-            {
-            file: 'dist/index.es.js',
-            format: 'es',
-            exports: 'named',
-            },
-        ],
-        plugins: [
-            postcss({
-                plugins: []
-            }),
-            babel({
-                exclude: 'node_modules/**',
-                presets: ['@babel/preset-react'],
-            }),
-            external(),
-            resolve(),
-            localResolve(),
-            // terser(),
-        ],
-         watch: {
-    include: "src/**",
-  },
-}
-];

package/src/.prettierrc

@@ -1 +0,0 @@
-{}