@purr-react-styled-components/components.collapse 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.collapse",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,14 +25,14 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-react-styled-components/utils.helpers": "0.0.6",
-    "@purr-react-styled-components/components.icon": "0.0.7",
-    "@purr-react-styled-components/components.typography": "0.0.8",
-    "@purr-react-styled-components/components.divider": "0.0.3"
+    "@purr-core/utils.definitions": "0.0.11",
+    "@purr-react-styled-components/components.icon": "0.0.8",
+    "@purr-react-styled-components/components.typography": "0.0.9",
+    "@purr-react-styled-components/components.divider": "0.0.4",
+    "@purr-react-styled-components/utils.helpers": "0.0.7"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.flex-box": "0.0.8"
+    "@purr-react-styled-components/components.flex-box": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -41,6 +41,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

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

package/dist/index.js

@@ -1,129 +0,0 @@
-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
-};