@akinon/ui-collapse 0.4.0 → 1.0.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { CollapseProps } from './types';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export declare const Collapse: ({ ...collapseProps }: CollapseProps) => React.JSX.Element;
 export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAmB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAqB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -15,11 +15,28 @@ exports.Collapse = void 0;
 const icons_1 = require("@akinon/icons");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 const Collapse = (_a) => {
     var _b;
     var collapseProps = __rest(_a, []);
     return (React.createElement(antd_1.Collapse, Object.assign({ ghost: true, defaultActiveKey: (_b = collapseProps.items) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }, collapseProps, (collapseProps.expandIcon && {
-        expandIcon: panelProps => collapseProps.expandIcon ? (React.createElement(icons_1.Icon, { icon: collapseProps.expandIcon(panelProps), style: collapseProps.iconStyle })) : undefined
+        expandIcon: panelProps => {
+            const { name, style, size } = collapseProps.expandIcon(panelProps);
+            return name ? (React.createElement(icons_1.Icon, { size: size !== null && size !== void 0 ? size : 16, icon: name, style: style })) : undefined;
+        }
     }))));
 };
 exports.Collapse = Collapse;

package/dist/cjs/types.d.ts

@@ -0,0 +1,202 @@
+import { IconName } from '@akinon/icons';
+import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type React from 'react';
+
+export type ExpandIconPosition = 'start' | 'end';
+export type CollapsibleType = 'header' | 'icon' | 'disabled';
+
+export interface CollapseItemType extends React.DOMAttributes<HTMLDivElement> {
+  /**
+   * The key of the panel.
+   */
+  key?: React.Key;
+
+  /**
+   * The label of the panel.
+   */
+  label?: React.ReactNode;
+
+  /**
+   * The React ref object of the panel.
+   */
+  ref?: React.RefObject<HTMLDivElement>;
+
+  /**
+   * The id of the panel.
+   */
+  id?: string;
+
+  /**
+   * The class name of the panel header.
+   */
+  headerClass?: string;
+
+  /**
+   * Whether to show the arrow.
+   */
+  showArrow?: boolean;
+
+  /**
+   * The class name of the panel.
+   */
+  className?: string;
+
+  /**
+   * Whether to destroy the inactive panel.
+   */
+  destroyInactivePanel?: boolean;
+
+  /**
+   * Forced render of content on panel, instead of lazy rendering after clicking on header.
+   */
+  forceRender?: boolean;
+
+  /**
+   * The extra element of the panel header.
+   */
+  extra?: React.ReactNode;
+
+  /**
+   * The callback function that is triggered when the panel is clicked.
+   */
+  onItemClick?: (panelKey: React.Key) => void;
+
+  /**
+   * Custom expand icon.
+   */
+  expandIcon?: (panelProps: PanelProps) => IconName;
+
+  /**
+   * The HTML WAI-ARIA role of the panel.
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+   */
+  role?: string;
+
+  /**
+   * The children of the panel.
+   */
+  children?: React.ReactNode;
+}
+
+export type CollapseProps = {
+  /**
+   * The key of the active panel.
+   */
+  activeKey?: React.Key | React.Key[];
+
+  /**
+   * The default key of the active panel.
+   */
+  defaultActiveKey?: React.Key | React.Key[];
+
+  /**
+   * The callback function that is triggered when the active panel changes.
+   */
+  onChange?: (key: React.Key | React.Key[]) => void;
+
+  /**
+   * Whether to enable accordion mode.
+   */
+  accordion?: boolean;
+
+  /**
+   * The class name of the collapse.
+   */
+  className?: string;
+
+  /**
+   * The class name of the root element.
+   */
+  rootClassName?: string;
+
+  /**
+   * Whether to show border.
+   */
+  bordered?: boolean;
+
+  /**
+   * Whether to destroy the inactive panel.
+   */
+  destroyInactivePanel?: boolean;
+
+  /**
+   * The expand icon.
+   */
+  expandIcon?: (panelProps: PanelProps) => {
+    name: IconName;
+    size?: number;
+    style?: React.CSSProperties;
+  };
+
+  /**
+   * The position of the expand icon.
+   */
+  expandIconPosition?: ExpandIconPosition;
+
+  /**
+   * Whether to hide the border and transparent background.
+   */
+  ghost?: boolean;
+
+  /**
+   * The size of the collapse.
+   */
+  size?: 'small' | 'middle' | 'large';
+
+  /**
+   * Collapse-wide collapsible part or disabled.
+   */
+  collapsible?: CollapsibleType;
+
+  /**
+   * The panels of the collapse.
+   */
+  items?: CollapseItemType[];
+
+  /**
+   * The style of the expand icon.
+   */
+  iconStyle?: React.CSSProperties;
+
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+};
+
+export type PanelProps = {
+  /**
+   * Whether the panel is active.
+   */
+  isActive?: boolean;
+
+  /**
+   * The header of the panel.
+   */
+  header?: React.ReactNode;
+
+  /**
+   * The class name of the panel.
+   */
+  className?: string;
+
+  /**
+   * Whether to show the arrow.
+   */
+  showArrow?: boolean;
+
+  /**
+   * Forced render of content on panel, instead of lazy rendering after clicking on header.
+   */
+  forceRender?: boolean;
+
+  /**
+   * The extra element of the panel header.
+   */
+  extra?: React.ReactNode;
+
+  /**
+   * The collapsible part of the panel or disabled.
+   */
+  collapsible?: CollapsibleType;
+};

package/dist/esm/index.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { CollapseProps } from './types';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export declare const Collapse: ({ ...collapseProps }: CollapseProps) => React.JSX.Element;
 export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAmB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAqB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -12,10 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Icon } from '@akinon/icons';
 import { Collapse as AntCollapse } from 'antd';
 import * as React from 'react';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export const Collapse = (_a) => {
     var _b;
     var collapseProps = __rest(_a, []);
     return (React.createElement(AntCollapse, Object.assign({ ghost: true, defaultActiveKey: (_b = collapseProps.items) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }, collapseProps, (collapseProps.expandIcon && {
-        expandIcon: panelProps => collapseProps.expandIcon ? (React.createElement(Icon, { icon: collapseProps.expandIcon(panelProps), style: collapseProps.iconStyle })) : undefined
+        expandIcon: panelProps => {
+            const { name, style, size } = collapseProps.expandIcon(panelProps);
+            return name ? (React.createElement(Icon, { size: size !== null && size !== void 0 ? size : 16, icon: name, style: style })) : undefined;
+        }
     }))));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,202 @@
+import { IconName } from '@akinon/icons';
+import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type React from 'react';
+
+export type ExpandIconPosition = 'start' | 'end';
+export type CollapsibleType = 'header' | 'icon' | 'disabled';
+
+export interface CollapseItemType extends React.DOMAttributes<HTMLDivElement> {
+  /**
+   * The key of the panel.
+   */
+  key?: React.Key;
+
+  /**
+   * The label of the panel.
+   */
+  label?: React.ReactNode;
+
+  /**
+   * The React ref object of the panel.
+   */
+  ref?: React.RefObject<HTMLDivElement>;
+
+  /**
+   * The id of the panel.
+   */
+  id?: string;
+
+  /**
+   * The class name of the panel header.
+   */
+  headerClass?: string;
+
+  /**
+   * Whether to show the arrow.
+   */
+  showArrow?: boolean;
+
+  /**
+   * The class name of the panel.
+   */
+  className?: string;
+
+  /**
+   * Whether to destroy the inactive panel.
+   */
+  destroyInactivePanel?: boolean;
+
+  /**
+   * Forced render of content on panel, instead of lazy rendering after clicking on header.
+   */
+  forceRender?: boolean;
+
+  /**
+   * The extra element of the panel header.
+   */
+  extra?: React.ReactNode;
+
+  /**
+   * The callback function that is triggered when the panel is clicked.
+   */
+  onItemClick?: (panelKey: React.Key) => void;
+
+  /**
+   * Custom expand icon.
+   */
+  expandIcon?: (panelProps: PanelProps) => IconName;
+
+  /**
+   * The HTML WAI-ARIA role of the panel.
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+   */
+  role?: string;
+
+  /**
+   * The children of the panel.
+   */
+  children?: React.ReactNode;
+}
+
+export type CollapseProps = {
+  /**
+   * The key of the active panel.
+   */
+  activeKey?: React.Key | React.Key[];
+
+  /**
+   * The default key of the active panel.
+   */
+  defaultActiveKey?: React.Key | React.Key[];
+
+  /**
+   * The callback function that is triggered when the active panel changes.
+   */
+  onChange?: (key: React.Key | React.Key[]) => void;
+
+  /**
+   * Whether to enable accordion mode.
+   */
+  accordion?: boolean;
+
+  /**
+   * The class name of the collapse.
+   */
+  className?: string;
+
+  /**
+   * The class name of the root element.
+   */
+  rootClassName?: string;
+
+  /**
+   * Whether to show border.
+   */
+  bordered?: boolean;
+
+  /**
+   * Whether to destroy the inactive panel.
+   */
+  destroyInactivePanel?: boolean;
+
+  /**
+   * The expand icon.
+   */
+  expandIcon?: (panelProps: PanelProps) => {
+    name: IconName;
+    size?: number;
+    style?: React.CSSProperties;
+  };
+
+  /**
+   * The position of the expand icon.
+   */
+  expandIconPosition?: ExpandIconPosition;
+
+  /**
+   * Whether to hide the border and transparent background.
+   */
+  ghost?: boolean;
+
+  /**
+   * The size of the collapse.
+   */
+  size?: 'small' | 'middle' | 'large';
+
+  /**
+   * Collapse-wide collapsible part or disabled.
+   */
+  collapsible?: CollapsibleType;
+
+  /**
+   * The panels of the collapse.
+   */
+  items?: CollapseItemType[];
+
+  /**
+   * The style of the expand icon.
+   */
+  iconStyle?: React.CSSProperties;
+
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+};
+
+export type PanelProps = {
+  /**
+   * Whether the panel is active.
+   */
+  isActive?: boolean;
+
+  /**
+   * The header of the panel.
+   */
+  header?: React.ReactNode;
+
+  /**
+   * The class name of the panel.
+   */
+  className?: string;
+
+  /**
+   * Whether to show the arrow.
+   */
+  showArrow?: boolean;
+
+  /**
+   * Forced render of content on panel, instead of lazy rendering after clicking on header.
+   */
+  forceRender?: boolean;
+
+  /**
+   * The extra element of the panel header.
+   */
+  extra?: React.ReactNode;
+
+  /**
+   * The collapsible part of the panel or disabled.
+   */
+  collapsible?: CollapsibleType;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-collapse",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,17 +9,17 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/icons": "^0.5.0"
+    "antd": "5.22.6",
+    "@akinon/icons": "^1.0.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/ui-theme": "0.6.0",
-    "@akinon/icons": "0.5.0",
-    "@akinon/typescript-config": "0.3.0"
+    "typescript": "*",
+    "@akinon/icons": "1.0.0",
+    "@akinon/ui-theme": "1.0.0",
+    "@akinon/typescript-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,7 +39,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
     "typecheck": "tsc --noEmit"
   }