@purr-react-styled-components/components.collapse 0.0.2

package/dist/_components/_expand-icon.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICollapseItemExpandIconProps } from '../_types';
+
+export declare const CollapseItemExpandIcon: React.MemoExoticComponent<({ expandIcon, isExpanded, htmlAttributes, showExpandIcon, }: ICollapseItemExpandIconProps) => React.JSX.Element | null>;

package/dist/_components/_item-header.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICollapseItemHeaderProps } from '../_types';
+
+export declare const CollapseItemHeader: React.MemoExoticComponent<({ label, preIcon, postIcon, expandIcon, isExpanded, isOnlyOneExpand, id, showExpandIcon, expandIconHtmlAttributes, htmlAttributes, labelHtmlAttributes, setItemDictionary, }: ICollapseItemHeaderProps) => React.JSX.Element>;

package/dist/_components/_item.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICollapseItemProps } from '../_types';
+
+export declare const CollapseItem: React.MemoExoticComponent<({ id, label, body, preIcon, postIcon, expandIcon, disabled, bodyHtmlAttributes, htmlAttributes, expandIconHtmlAttributes, itemHeaderHtmlAttributes, itemHeaderLabelHtmlAttributes, isExpanded, isOnlyOneExpand, showExpandIcon, setItemDictionary, }: ICollapseItemProps) => React.JSX.Element>;

package/dist/_components/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ICollapseProps } from '../_types';
+
+export declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;

package/dist/_styles.d.ts

@@ -0,0 +1,17 @@
+export declare const Styled: {
+    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ItemContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $disabled?: boolean;
+    }>> & string;
+    ItemHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+        $isExpanded: boolean;
+    }>> & string;
+    ItemHeaderSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    ItemHeaderSectionGroup: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    ItemHeaderExpandIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+        $isExpanded: boolean;
+    }>> & string;
+    ItemContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $isExpanded: boolean;
+    }>> & string;
+};

package/dist/_types.d.ts

@@ -0,0 +1,55 @@
+import { ButtonHTMLAttributes, Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export type TItemDictionary = Record<string, boolean>;
+export interface ICollapseItem {
+    id: string;
+    label: string;
+    body: ReactNode;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    disabled?: boolean;
+    bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+    itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    showExpandIcon?: boolean;
+}
+export interface ICollapseItemProps extends ICollapseItem {
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}
+export interface ICollapseProps {
+    items?: ICollapseItem[];
+    className?: string;
+    disabled?: boolean;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    expandIds?: string[];
+    isOnlyOneExpand?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+}
+export interface ICollapseItemExpandIconProps {
+    expandIcon?: ReactNode;
+    isExpanded: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    showExpandIcon?: boolean;
+}
+export interface ICollapseItemHeaderProps {
+    label: string;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    id: string;
+    showExpandIcon?: boolean;
+    expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
+    labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("clsx"),h=require("react"),N=require("@purr-react-styled-components/components.divider"),n=require("styled-components"),z=require("@purr-react-styled-components/utils.helpers"),A=require("@purr-react-styled-components/components.typography"),S=require("@purr-react-styled-components/components.icon"),r={Container:n.div.withConfig({displayName:"_styles__Container",componentId:"sc-ob6zrz-0"})(["border:1px solid #d9d9d9;border-radius:8px;overflow:hidden;"]),ItemContainer:n.div.withConfig({displayName:"_styles__ItemContainer",componentId:"sc-ob6zrz-1"})(["transition:margin 150ms ease-in-out;width:100%;will-change:margin;&:first-of-type{margin-top:0px;}&:last-of-type{margin-bottom:0px;}",";"],({$disabled:t})=>t?n.css(["opacity:0.3;pointer-events:none;cursor:not-allowed;"]):n.css(["cursor:pointer;"])),ItemHeader:n.button.withConfig({displayName:"_styles__ItemHeader",componentId:"sc-ob6zrz-2"})(["display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0px 16px;width:100%;height:46px;border-bottom:1px solid ",";background-color:#00000005;",""],({$isExpanded:t})=>t?"#d9d9d9":"transparent",z.getInvisibleButton),ItemHeaderSection:n.span.withConfig({displayName:"_styles__ItemHeaderSection",componentId:"sc-ob6zrz-3"})(["display:flex;align-items:center;gap:16px;"]),ItemHeaderSectionGroup:n.span.withConfig({displayName:"_styles__ItemHeaderSectionGroup",componentId:"sc-ob6zrz-4"})(["display:flex;justify-content:space-between;flex-grow:1;"]),ItemHeaderExpandIcon:n.span.withConfig({displayName:"_styles__ItemHeaderExpandIcon",componentId:"sc-ob6zrz-5"})(["display:flex;transition:all 250ms ease-in-out;transform:",";"],({$isExpanded:t})=>t?"rotate(180deg)":"none"),ItemContent:n.div.withConfig({displayName:"_styles__ItemContent",componentId:"sc-ob6zrz-6"})(["transition:max-height 150ms ease-in-out,opacity 150ms ease-in-out,padding-top 150ms ease-in-out,padding-bottom 150ms ease-in-out;padding-left:16px;padding-right:16px;overflow:hidden;will-change:max-height,opacity,padding-top,padding-bottom;",";"],({$isExpanded:t})=>t?n.css(["max-height:200vh;padding-top:16px;padding-bottom:16px;opacity:1;"]):n.css(["max-height:0px;padding-top:0px;padding-bottom:0px;opacity:0;"]))},H=h.memo(({expandIcon:t,isExpanded:i,htmlAttributes:l,showExpandIcon:a})=>(console.log("showExpandIcon",a),a?o.jsx(r.ItemHeaderExpandIcon,{...l,$isExpanded:i,className:"collapse-item__header__right__expand-icon",children:t??o.jsx(S.Icon,{name:"chevron-down",width:14,height:14})}):null));H.displayName="CollapseItemExpandIcon";const C=h.memo(({label:t,preIcon:i,postIcon:l,expandIcon:a,isExpanded:c,isOnlyOneExpand:x,id:p,showExpandIcon:b,expandIconHtmlAttributes:g,htmlAttributes:I,labelHtmlAttributes:m,setItemDictionary:e})=>{const s=u=>()=>{e(x?d=>({...Object.keys(d).reduce((f,j)=>(f[j]=!1,f),{}),[u]:!d[u]}):d=>({...d,[u]:!d[u]}))},_=h.useMemo(()=>o.jsxs(r.ItemHeaderSectionGroup,{children:[o.jsxs(r.ItemHeaderSection,{className:"collapse-item__header__left",children:[i,o.jsx(A.Typography,{className:"collapse-item__header-label",htmlAttributes:m,children:t})]}),o.jsx(r.ItemHeaderSection,{className:"collapse-item__header__right",children:l})]}),[t,m,l,i]);return o.jsxs(r.ItemHeader,{...I,$isExpanded:c,className:"collapse-item__header",onClick:s(p),children:[o.jsx(H,{htmlAttributes:g,expandIcon:a,isExpanded:c,showExpandIcon:b}),_]})});C.displayName="CollapseItemHeader";const w=h.memo(({id:t,label:i,body:l,preIcon:a,postIcon:c,expandIcon:x,disabled:p,bodyHtmlAttributes:b,htmlAttributes:g,expandIconHtmlAttributes:I,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:s,isOnlyOneExpand:_,showExpandIcon:u,setItemDictionary:d})=>o.jsxs(r.ItemContainer,{...g,$disabled:p,className:y("collapse-item",s&&"collapse-item--isExpanded",p&&"collapse-item--disabled"),children:[o.jsx(C,{label:i,preIcon:a,postIcon:c,expandIcon:x,isExpanded:s,isOnlyOneExpand:_,id:t,showExpandIcon:u,expandIconHtmlAttributes:I,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:d}),o.jsx(r.ItemContent,{...b,$isExpanded:s,className:y("collapse-item__content",s&&"collapse-item__content--isExpanded"),children:l})]}));w.displayName="CollapseItem";const v=({items:t,className:i,isOnlyOneExpand:l=!1,expandIds:a,preIcon:c=null,postIcon:x=null,expandIcon:p=null,disabled:b=!1,htmlAttributes:g})=>{const[I,m]=h.useState(()=>a?a.reduce((e,s)=>(e[s]=!0,e),{}):{});return o.jsx(r.Container,{...g,className:y("collapse",i),children:t==null?void 0:t.map((e,s)=>o.jsxs(h.Fragment,{children:[!!s&&o.jsx(N.Divider,{color:"#d9d9d9",className:"collapse-divider"}),o.jsx(w,{id:e.id,label:e.label,body:e.body,preIcon:c??e.preIcon,postIcon:x??e.postIcon,expandIcon:p??e.expandIcon,disabled:b||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!I[e.id]:!1,showExpandIcon:e.showExpandIcon??!0,isOnlyOneExpand:l,setItemDictionary:m})]},e.id))})};exports.Collapse=v;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,129 @@
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import f from "clsx";
+import { memo as H, useMemo as S, useState as v, Fragment as E } from "react";
+import { Divider as j } from "@purr-react-styled-components/components.divider";
+import d, { css as _ } from "styled-components";
+import { getInvisibleButton as k } from "@purr-react-styled-components/utils.helpers";
+import { Typography as $ } from "@purr-react-styled-components/components.typography";
+import { Icon as G } from "@purr-react-styled-components/components.icon";
+const s = {
+  Container: d.div.withConfig({
+    displayName: "_styles__Container",
+    componentId: "sc-ob6zrz-0"
+  })(["border:1px solid #d9d9d9;border-radius:8px;overflow:hidden;"]),
+  ItemContainer: d.div.withConfig({
+    displayName: "_styles__ItemContainer",
+    componentId: "sc-ob6zrz-1"
+  })(["transition:margin 150ms ease-in-out;width:100%;will-change:margin;&:first-of-type{margin-top:0px;}&:last-of-type{margin-bottom:0px;}", ";"], ({
+    $disabled: t
+  }) => t ? _(["opacity:0.3;pointer-events:none;cursor:not-allowed;"]) : _(["cursor:pointer;"])),
+  ItemHeader: d.button.withConfig({
+    displayName: "_styles__ItemHeader",
+    componentId: "sc-ob6zrz-2"
+  })(["display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0px 16px;width:100%;height:46px;border-bottom:1px solid ", ";background-color:#00000005;", ""], ({
+    $isExpanded: t
+  }) => t ? "#d9d9d9" : "transparent", k),
+  ItemHeaderSection: d.span.withConfig({
+    displayName: "_styles__ItemHeaderSection",
+    componentId: "sc-ob6zrz-3"
+  })(["display:flex;align-items:center;gap:16px;"]),
+  ItemHeaderSectionGroup: d.span.withConfig({
+    displayName: "_styles__ItemHeaderSectionGroup",
+    componentId: "sc-ob6zrz-4"
+  })(["display:flex;justify-content:space-between;flex-grow:1;"]),
+  ItemHeaderExpandIcon: d.span.withConfig({
+    displayName: "_styles__ItemHeaderExpandIcon",
+    componentId: "sc-ob6zrz-5"
+  })(["display:flex;transition:all 250ms ease-in-out;transform:", ";"], ({
+    $isExpanded: t
+  }) => t ? "rotate(180deg)" : "none"),
+  ItemContent: d.div.withConfig({
+    displayName: "_styles__ItemContent",
+    componentId: "sc-ob6zrz-6"
+  })(["transition:max-height 150ms ease-in-out,opacity 150ms ease-in-out,padding-top 150ms ease-in-out,padding-bottom 150ms ease-in-out;padding-left:16px;padding-right:16px;overflow:hidden;will-change:max-height,opacity,padding-top,padding-bottom;", ";"], ({
+    $isExpanded: t
+  }) => t ? _(["max-height:200vh;padding-top:16px;padding-bottom:16px;opacity:1;"]) : _(["max-height:0px;padding-top:0px;padding-bottom:0px;opacity:0;"]))
+}, w = H(({
+  expandIcon: t,
+  isExpanded: i,
+  htmlAttributes: l,
+  showExpandIcon: a
+}) => (console.log("showExpandIcon", a), a ? /* @__PURE__ */ n(s.ItemHeaderExpandIcon, { ...l, $isExpanded: i, className: "collapse-item__header__right__expand-icon", children: t ?? /* @__PURE__ */ n(G, { name: "chevron-down", width: 14, height: 14 }) }) : null));
+w.displayName = "CollapseItemExpandIcon";
+const N = H(({
+  label: t,
+  preIcon: i,
+  postIcon: l,
+  expandIcon: a,
+  isExpanded: p,
+  isOnlyOneExpand: u,
+  id: m,
+  showExpandIcon: b,
+  expandIconHtmlAttributes: I,
+  htmlAttributes: g,
+  labelHtmlAttributes: c,
+  setItemDictionary: e
+}) => {
+  const o = (h) => () => {
+    e(u ? (r) => ({
+      ...Object.keys(r).reduce((C, A) => (C[A] = !1, C), {}),
+      [h]: !r[h]
+    }) : (r) => ({
+      ...r,
+      [h]: !r[h]
+    }));
+  }, y = S(() => /* @__PURE__ */ x(s.ItemHeaderSectionGroup, { children: [
+    /* @__PURE__ */ x(s.ItemHeaderSection, { className: "collapse-item__header__left", children: [
+      i,
+      /* @__PURE__ */ n($, { className: "collapse-item__header-label", htmlAttributes: c, children: t })
+    ] }),
+    /* @__PURE__ */ n(s.ItemHeaderSection, { className: "collapse-item__header__right", children: l })
+  ] }), [t, c, l, i]);
+  return /* @__PURE__ */ x(s.ItemHeader, { ...g, $isExpanded: p, className: "collapse-item__header", onClick: o(m), children: [
+    /* @__PURE__ */ n(w, { htmlAttributes: I, expandIcon: a, isExpanded: p, showExpandIcon: b }),
+    y
+  ] });
+});
+N.displayName = "CollapseItemHeader";
+const z = H(({
+  id: t,
+  label: i,
+  body: l,
+  preIcon: a,
+  postIcon: p,
+  expandIcon: u,
+  disabled: m,
+  bodyHtmlAttributes: b,
+  htmlAttributes: I,
+  expandIconHtmlAttributes: g,
+  itemHeaderHtmlAttributes: c,
+  itemHeaderLabelHtmlAttributes: e,
+  isExpanded: o,
+  isOnlyOneExpand: y,
+  showExpandIcon: h,
+  setItemDictionary: r
+}) => /* @__PURE__ */ x(s.ItemContainer, { ...I, $disabled: m, className: f("collapse-item", o && "collapse-item--isExpanded", m && "collapse-item--disabled"), children: [
+  /* @__PURE__ */ n(N, { label: i, preIcon: a, postIcon: p, expandIcon: u, isExpanded: o, isOnlyOneExpand: y, id: t, showExpandIcon: h, expandIconHtmlAttributes: g, htmlAttributes: c, labelHtmlAttributes: e, setItemDictionary: r }),
+  /* @__PURE__ */ n(s.ItemContent, { ...b, $isExpanded: o, className: f("collapse-item__content", o && "collapse-item__content--isExpanded"), children: l })
+] }));
+z.displayName = "CollapseItem";
+const J = ({
+  items: t,
+  className: i,
+  isOnlyOneExpand: l = !1,
+  expandIds: a,
+  preIcon: p = null,
+  postIcon: u = null,
+  expandIcon: m = null,
+  disabled: b = !1,
+  htmlAttributes: I
+}) => {
+  const [g, c] = v(() => a ? a.reduce((e, o) => (e[o] = !0, e), {}) : {});
+  return /* @__PURE__ */ n(s.Container, { ...I, className: f("collapse", i), children: t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ x(E, { children: [
+    !!o && /* @__PURE__ */ n(j, { color: "#d9d9d9", className: "collapse-divider" }),
+    /* @__PURE__ */ n(z, { id: e.id, label: e.label, body: e.body, preIcon: p ?? e.preIcon, postIcon: u ?? e.postIcon, expandIcon: m ?? e.expandIcon, disabled: b || e.disabled, bodyHtmlAttributes: e.bodyHtmlAttributes, htmlAttributes: e.htmlAttributes, expandIconHtmlAttributes: e.expandIconHtmlAttributes, itemHeaderHtmlAttributes: e.itemHeaderHtmlAttributes, itemHeaderLabelHtmlAttributes: e.itemHeaderLabelHtmlAttributes, isExpanded: e.id ? !!g[e.id] : !1, showExpandIcon: e.showExpandIcon ?? !0, isOnlyOneExpand: l, setItemDictionary: c })
+  ] }, e.id)) });
+};
+export {
+  J as Collapse
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@purr-react-styled-components/components.collapse",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "styled-components": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.9",
+    "@purr-react-styled-components/utils.helpers": "0.0.6",
+    "@purr-react-styled-components/components.icon": "0.0.6",
+    "@purr-react-styled-components/components.divider": "0.0.2",
+    "@purr-react-styled-components/components.typography": "0.0.7"
+  },
+  "devDependencies": {
+    "@purr-react-styled-components/components.flex-box": "0.0.7"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}