@rivtn/noseur 1.0.0

package/dist/esm/panel/Accordion.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { PanelProps } from "./Panel";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+export interface AccordionTabProps extends Partial<PanelProps> {
+}
+export type AccordionEventHandler = (index: number) => void;
+export type AccordionChangeEventHandler = (opened: number[], closed: number[]) => void;
+export interface AccordionManageRef {
+    expandAll: () => void;
+    collapseAll: () => void;
+    expand: (indexes: number[]) => void;
+    collapse: (indexes: number[]) => void;
+}
+export interface AccordionProps extends ComponentBaseProps<HTMLDivElement, AccordionManageRef> {
+    outlined: boolean;
+    multiple: boolean;
+    seperated: boolean;
+    borderless: boolean;
+    activeIndexes: number[];
+    children: React.ReactElement<AccordionTabProps> | React.ReactElement<AccordionTabProps>[];
+    onTabExpand: AccordionEventHandler;
+    onTabCollapse: AccordionEventHandler;
+    onTabChange: AccordionChangeEventHandler;
+}
+export declare const AccordionTab: ({ ref, ...props }: Partial<AccordionTabProps>) => React.JSX.Element;
+export declare const Accordion: ({ ref, ...props }: Partial<AccordionProps>) => React.JSX.Element;

package/dist/esm/panel/Accordion.js

@@ -0,0 +1,127 @@
+import React from "react";
+import { Panel } from "./Panel";
+import { Classname } from "../utils/Classname";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { MicroBuilder } from "../utils/MicroBuilder";
+class AccordionTabComponent extends React.Component {
+    static defaultProps = {
+        collapsibleIcons: {
+            expand: "fa fa-angle-right",
+            collapse: "fa fa-angle-down",
+        },
+    };
+    render() {
+        const className = Classname.build('noseur-accordion-tab', { "noseur-disabled": this.props.disabled }, this.props.className);
+        const toggleElement = MicroBuilder.buildIcon((this.props.collapsed ? this.props.collapsibleIcons?.expand : this.props.collapsibleIcons?.collapse), { scheme: this.props.scheme, className: "noseur-accordion-tab-title-toggler" });
+        const title = (React.createElement("div", { className: "noseur-accordion-tab-title" },
+            toggleElement,
+            this.props.title));
+        return (React.createElement(Panel, { ...this.props, className: className, title: title, ref: this.props.forwardRef }));
+    }
+    ;
+}
+class AccordionComponent extends React.Component {
+    static defaultProps = {
+        activeIndexes: [],
+    };
+    state = {
+        activeIndexes: this.props.activeIndexes ?? [],
+        childrenCount: this.props.children?.length ?? 0,
+    };
+    constructor(props) {
+        super(props);
+        this.expandCollapse = this.expandCollapse.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            expandAll: () => this.expandCollapse("expand"),
+            collapseAll: () => this.expandCollapse("collapse"),
+            expand: (indexes) => this.expandCollapse("expand", indexes),
+            collapse: (indexes) => this.expandCollapse("collapse", indexes),
+        });
+    }
+    componentDidUpdate(_, prevState) {
+        const activeIndexes = this.state.activeIndexes;
+        const previousIndexes = prevState.activeIndexes;
+        const opened = activeIndexes.filter((i) => !previousIndexes.includes(i));
+        const closed = previousIndexes.filter((i) => !activeIndexes.includes(i));
+        this.props.onTabChange && this.props.onTabChange(opened, closed);
+        if (this.props.onTabCollapse && closed.length)
+            this.props.onTabCollapse(closed[0]);
+        if (this.props.onTabExpand && opened.length)
+            this.props.onTabExpand(opened[0]);
+    }
+    expandCollapse(type, indexes) {
+        if (this.props.disabled)
+            return;
+        let activeIndexes = ObjectHelper.clone(this.state.activeIndexes);
+        if (!indexes) {
+            activeIndexes = (type === "expand") ? [...Array(this.state.childrenCount).keys()] : [];
+        }
+        else {
+            if (!indexes.length)
+                return;
+            if (!this.props.multiple) {
+                if (type === "expand")
+                    activeIndexes = [];
+                indexes = [indexes[0]];
+            }
+        }
+        if (indexes)
+            indexes.forEach(index => {
+                const indexOfIndexLol = activeIndexes.indexOf(index);
+                if (type === "expand" && indexOfIndexLol === -1)
+                    activeIndexes.push(index);
+                if (type === "collapse" && indexOfIndexLol > -1)
+                    activeIndexes.splice(indexOfIndexLol, 1);
+            });
+        this.setState({ activeIndexes });
+    }
+    renderAccordionTab(panel, index) {
+        let activeIndexes = ObjectHelper.clone(this.state.activeIndexes);
+        const props = ObjectHelper.clone(panel.props);
+        const cachedOnHeaderClicked = props.onHeaderClick;
+        props.key = props.key ?? index;
+        props.collapsed = !activeIndexes.includes(index);
+        props.active = !props.collapsed;
+        props.scheme = props.scheme ?? this.props.scheme;
+        props.outlined = props.outlined ?? this.props.outlined;
+        props.disabled = props.disabled ?? this.props.disabled;
+        props.onHeaderClick = () => {
+            if (cachedOnHeaderClicked)
+                cachedOnHeaderClicked();
+            if (props.collapsed) {
+                if (this.props.multiple)
+                    activeIndexes.push(index);
+                else
+                    activeIndexes = [index];
+            }
+            else {
+                activeIndexes.splice(activeIndexes.indexOf(index), 1);
+            }
+            this.setState({
+                activeIndexes
+            });
+        };
+        return React.cloneElement(panel, props);
+    }
+    renderAccordionTabs() {
+        return React.Children.map(this.props.children, (panel, index) => {
+            if (panel.type !== AccordionTab) {
+                throw new Error("noseur.Accordion: Invalid child of Accordion component expecting AccordionTab only, found '" + panel.type + "'");
+            }
+            return this.renderAccordionTab(panel, index);
+        });
+    }
+    render() {
+        const panels = this.renderAccordionTabs();
+        const className = Classname.build("noseur-accordion", {
+            "noseur-accordion-seperated": this.props.seperated,
+            "noseur-accordion-bordered": !this.props.borderless && !this.props.seperated
+        }, (this.props.scheme ? `${this.props.scheme}-vars` : null), (this.props.scheme && this.props.outlined ? `${this.props.scheme}-vars-outlined` : null), this.props.className);
+        return (React.createElement("div", { className: className, ref: this.props.forwardRef, id: this.props.id, style: this.props.style }, panels));
+    }
+    ;
+}
+export const AccordionTab = ({ ref, ...props }) => (React.createElement(AccordionTabComponent, { ...props, forwardRef: ref }));
+export const Accordion = ({ ref, ...props }) => (React.createElement(AccordionComponent, { ...props, forwardRef: ref }));

package/dist/esm/panel/Panel.css

@@ -0,0 +1,317 @@
+/* Panel */
+.noseur-panel {
+  display: flex;
+  border-radius: 5px;
+  flex-direction: column;
+}
+
+.noseur-panel-bordered {
+  border: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #E5E7EB);
+}
+
+.noseur-panel-header {
+  display: flex;
+  padding: 10px 15px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  justify-content: space-between;
+  color: var(--noseurSchemeAccentColor, inherit);
+  background-color: var(--noseurSchemeFixtureBackgroundColor, #f5f8fa);
+}
+
+.noseur-panel-header:hover {
+  filter: brightness(97%);
+}
+
+.noseur-panel-header-bordered {
+  border-bottom: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #E5E7EB);
+}
+
+.noseur-panel-header-only {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.noseur-panel-footer {
+  padding: 10px 15px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  color: var(--noseurSchemeAccentColor, inherit);
+  background-color: var(--noseurSchemeFixtureBackgroundColor, #f5f8fa);
+}
+
+.noseur-panel-footer-bordered {
+  border-top: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #E5E7EB);
+}
+
+.noseur-panel-footer-only {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+/* Accordion */
+.noseur-accordion {
+  display: flex;
+  border-radius: 5px;
+  flex-direction: column;
+}
+
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:not(:first-child):not(:last-child) {
+  border-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:not(:first-child):not(:last-child) > .noseur-panel-header {
+  border-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:first-child {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:first-child > .noseur-panel-header {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:last-child {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab:last-child > .noseur-panel-header {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.noseur-accordion:not(.noseur-accordion-seperated) > .noseur-accordion-tab.noseur-panel-bordered:not(:last-child) {
+  border-bottom: 0px;
+}
+
+.noseur-accordion.noseur-accordion-seperated > .noseur-accordion-tab {
+  border-radius: 5px;
+}
+.noseur-accordion.noseur-accordion-seperated > .noseur-accordion-tab:not(:last-child) {
+  margin-bottom: var(--accordionSeperation, 5px);
+}
+
+.noseur-accordion-bordered {
+  border: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #E5E7EB);
+}
+.noseur-accordion-bordered > .noseur-panel-bordered {
+  border-left: none;
+  border-right: none;
+}
+.noseur-accordion-bordered > .noseur-panel-bordered:first-child {
+  border-top: none;
+}
+.noseur-accordion-bordered > .noseur-panel-bordered:last-child {
+  border-bottom: none;
+}
+
+.noseur-accordion-tab > .noseur-panel-header {
+  cursor: pointer;
+}
+
+.noseur-accordion-tab-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.noseur-accordion-tab-title > .noseur-accordion-tab-title-toggler {
+  width: 15px;
+  margin-right: 10px;
+}
+
+/* TabPane */
+.noseur-tabpane {
+  display: flex;
+  flex-direction: column;
+}
+.noseur-tabpane.noseur-tabpane-row {
+  flex-direction: row;
+}
+.noseur-tabpane {
+  /*&.noseur-tabpane-row>.noseur-tabpane-navigator>*,
+  &.noseur-tabpane-scrollable>.noseur-tabpane-navigator>* {
+      min-width: max-content;
+  }*/
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator, .noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator > .noseur-tabpane-headers {
+  position: relative;
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator::-webkit-scrollbar, .noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator::-webkit-scrollbar, .noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator > .noseur-tabpane-headers::-webkit-scrollbar, .noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator > .noseur-tabpane-headers::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  background: transparent;
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator:not(.noseur-tabpane-navigator-left):not(.noseur-tabpane-navigator-right) > .noseur-tabpane-headers {
+  margin-left: var(--tabpaneNavigatorControlWidth, 3rem);
+  margin-right: var(--tabpaneNavigatorControlWidth, 3rem);
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-headers {
+  margin-top: var(--tabpaneNavigatorControlWidth, 3rem);
+  margin-bottom: var(--tabpaneNavigatorControlWidth, 3rem);
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-headers {
+  align-items: flex-end;
+}
+.noseur-tabpane.noseur-tabpane-scrollable > .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-headers {
+  align-items: flex-start;
+}
+
+.noseur-tabpane-navigator {
+  display: flex;
+  overflow: auto;
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-headers {
+  overflow: unset;
+  flex-direction: column;
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers {
+  border-bottom: none;
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers {
+  border-top: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-control {
+  border-bottom: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-left > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-left > .noseur-tabpane-headers {
+  border-right: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left.noseur-tabpane-navigator-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-right.noseur-tabpane-navigator-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-left.noseur-tabpane-navigator-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right.noseur-tabpane-navigator-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center.noseur-tabpane-navigator-right > .noseur-tabpane-headers {
+  border-left: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-top-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-top-right > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-top-center > .noseur-tabpane-control {
+  border-top: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-top-right > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-right > .noseur-tabpane-headers {
+  justify-content: flex-end;
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-top-center > .noseur-tabpane-headers, .noseur-tabpane-navigator.noseur-tabpane-navigator-bottom-center > .noseur-tabpane-headers {
+  justify-content: center;
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-control, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-control {
+  width: calc(100% - var(--borderWidth, 1px));
+  height: var(--tabpaneNavigatorControlWidth, 3rem);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-control.noseur-tabpane-control-l, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-control.noseur-tabpane-control-l {
+  border-right: unset;
+  border-left: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+  border-bottom: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-control.noseur-tabpane-control-r, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-control.noseur-tabpane-control-r {
+  left: 0;
+  bottom: 0;
+  top: unset;
+  border-top: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-control-l, .noseur-tabpane-navigator.noseur-tabpane-navigator-left > .noseur-tabpane-control-r {
+  border-left: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-control-l, .noseur-tabpane-navigator.noseur-tabpane-navigator-right > .noseur-tabpane-control-r {
+  width: calc(100% - 2px);
+  border-left: unset !important;
+  border-right: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8) !important;
+}
+
+.noseur-tabpane-control {
+  top: 0;
+  z-index: 1;
+  cursor: pointer;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  display: flex !important;
+  height: calc(100% - var(--borderWidth, 1px));
+  width: var(--tabpaneNavigatorControlWidth, 3rem);
+  background-color: var(--tabpaneNavigatorBackgroundColor, inherit);
+}
+.noseur-tabpane-control.noseur-tabpane-control-l {
+  border-right: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+.noseur-tabpane-control.noseur-tabpane-control-r {
+  right: 0;
+  border-left: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+
+.noseur-tabpane-control:hover {
+  filter: brightness(97%);
+}
+
+.noseur-tabpane-headers {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain auto;
+  border-bottom: var(--borderWidth, 1px) solid var(--noseurSchemeBorderColor, #EEF0F8);
+}
+
+.noseur-tabpanel-header {
+  border: none;
+  border-radius: 0px;
+  align-items: flex-end;
+  min-width: fit-content;
+  outline: none !important;
+  box-shadow: none !important;
+}
+.noseur-tabpanel-header:hover, .noseur-tabpanel-header.noseur-active {
+  font-weight: 450;
+}
+.noseur-tabpanel-header.noseur-active:not(.noseur-tabpanel-noline), .noseur-tabpanel-header:not(.noseur-active):not(.noseur-tabpanel-noline):hover {
+  border-bottom: 2px solid var(--noseurSchemeMainColor, #EEF0F8);
+}
+.noseur-tabpanel-header.noseur-skeleton {
+  margin: 0px 2px;
+}
+
+.noseur-tabpane-content {
+  flex: 1;
+}
+
+/* ScrollPanel */
+.noseur-scrollpanel {
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.noseur-scrollpanel::-webkit-scrollbar {
+  height: 10px;
+  cursor: pointer;
+  width: var(--scrollTrackWidth, 10px);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.noseur-scrollpanel::-webkit-scrollbar-track {
+  cursor: pointer;
+  background-color: var(--scrollTrackBg, transparent);
+  border-radius: var(--scrollTrackBorderRadius, 10px);
+}
+
+.noseur-scrollpanel::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: var(--scrollThumbBorderRadius, 10px);
+  background-color: var(--scrollThumbBg, var(--noseurSchemeMainColor, rgb(193, 193, 193)));
+}
+
+.noseur-scrollpanel::-webkit-scrollbar-corner {
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.noseur-scrollpanel-hidden-scrollbar-x::-webkit-scrollbar {
+  height: 0;
+}
+
+.noseur-scrollpanel-hidden-scrollbar-y::-webkit-scrollbar {
+  width: 0;
+}
+
+.noseur-scrollpanel-always-show-scrollbars {
+  overflow: scroll;
+}
+
+.noseur-scrollpanel-always-show-scrollbar-x {
+  overflow-x: scroll;
+}
+
+.noseur-scrollpanel-always-show-scrollbar-y {
+  overflow-x: scroll;
+}

package/dist/esm/panel/Panel.d.ts

@@ -0,0 +1,43 @@
+import "./Panel.css";
+import React from "react";
+import { NoseurElement, NoseurLabel } from "../constants/Types";
+import { ComponentBaseProps, ComponentElementBasicAttributes, TransitionProps } from "../core/ComponentBaseProps";
+export interface PanelFixtureOptions {
+    className: string;
+    props: PanelProps;
+    collapsed: boolean;
+    titleElement: NoseurElement;
+    toggleElement: NoseurElement;
+    onClick: PanelFixtureEventHandler;
+    onToggle: (collapsed?: boolean) => void;
+    attrRelays: ComponentElementBasicAttributes;
+}
+export type PanelFixtureTemplate = (options?: PanelFixtureOptions) => NoseurElement;
+export type PanelFixtureEventHandler = (manageRef?: PanelManageRef) => boolean | void | undefined;
+export type PannelAttributesRelays = {
+    header?: ComponentElementBasicAttributes;
+    footer?: ComponentElementBasicAttributes;
+    content?: ComponentElementBasicAttributes & Partial<TransitionProps>;
+};
+export interface PanelManageRef {
+    expand: () => void;
+    collapse: () => void;
+    toggle: (collapsed?: boolean) => void;
+}
+export interface PanelProps extends ComponentBaseProps<HTMLDivElement, PanelManageRef, PannelAttributesRelays> {
+    active: boolean;
+    outlined: boolean;
+    title: NoseurLabel;
+    collapsed: boolean;
+    borderless: boolean;
+    collapsible: boolean;
+    collapsibleIcons: {
+        expand: NoseurElement;
+        collapse: NoseurElement;
+    };
+    header: PanelFixtureTemplate;
+    footer: PanelFixtureTemplate;
+    onHeaderClick: PanelFixtureEventHandler;
+    onFooterClick: PanelFixtureEventHandler;
+}
+export declare const Panel: ({ ref, ...props }: Partial<PanelProps>) => React.JSX.Element;

package/dist/esm/panel/Panel.js

@@ -0,0 +1,125 @@
+import "./Panel.css";
+import React from "react";
+import { Scheme } from "../constants/Scheme";
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from "../utils/BoolHelper";
+import { MicroBuilder } from "../utils/MicroBuilder";
+import { Transition } from "../constants/Transition";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { CSSTransition } from 'react-transition-group';
+class PanelComponent extends React.Component {
+    static defaultProps = {
+        collapsibleIcons: {
+            expand: "fa fa-plus",
+            collapse: "fa fa-minus",
+        },
+        attrsRelay: {
+            content: {
+                transition: Transition.CURTAIN
+            }
+        }
+    };
+    state = {
+        collapsed: this.props.collapsed,
+    };
+    manageRef;
+    transitionNodeRef;
+    constructor(props) {
+        super(props);
+        this.onToggle = this.onToggle.bind(this);
+        this.isCollapsed = this.isCollapsed.bind(this);
+        this.transitionNodeRef = React.createRef();
+    }
+    componentDidMount() {
+        this.manageRef = {
+            toggle: this.onToggle,
+            expand: () => this.onToggle(false),
+            collapse: () => this.onToggle(true),
+        };
+        ObjectHelper.resolveManageRef(this, this.manageRef);
+    }
+    componentDidUpdate(prevProps, _) {
+        if (prevProps.collapsed !== this.props.collapsed) {
+            this.setState({ collapsed: this.props.collapsed });
+        }
+    }
+    componentWillUnmount() {
+        if (!this.manageRef)
+            return;
+        this.manageRef = undefined;
+    }
+    onToggle(collapsed) {
+        collapsed = collapsed ?? !this.state.collapsed;
+        this.setState({ collapsed });
+    }
+    isCollapsed() {
+        return this.state.collapsed;
+    }
+    renderFixture(type, collapsed, fixtureTemplate) {
+        if (!fixtureTemplate && ((type === "header" && !(this.props.title || this.props.collapsible)) || type === "footer"))
+            return null;
+        const buildFixtureComponents = !!fixtureTemplate || type === "header";
+        const onClick = type === "header" ? this.props.onHeaderClick : this.props.onFooterClick;
+        const attrRelays = (this.props.attrsRelay && type in this.props.attrsRelay) ? this.props.attrsRelay[type] : null;
+        const scheme = attrRelays?.scheme ?? this.props.scheme;
+        const titleElement = buildFixtureComponents ? MicroBuilder.buildLabel(this.props.title) : null;
+        const toggleElement = buildFixtureComponents ? MicroBuilder.buildIcon((collapsed ? this.props.collapsibleIcons.expand : this.props.collapsibleIcons.collapse), { scheme, className: "noseur-cursor-pointer" }, { onClick: () => this.onToggle() }) : null;
+        const className = Classname.build(`noseur-panel-${type}`, {
+            'active': this.props.active,
+            'noseur-skeleton': scheme === Scheme.SKELETON,
+            'noseur-panel-header-only': type === "header" && collapsed && !this.props.footer,
+            'noseur-panel-footer-only': type === "footer" && collapsed && !this.props.header,
+            'noseur-panel-footer-bordered': type === "footer" && !this.props.borderless && !collapsed,
+            'noseur-panel-header-bordered': type === "header" && !this.props.borderless && (!collapsed || (collapsed && this.props.footer)),
+        }, attrRelays?.className);
+        if (fixtureTemplate)
+            return fixtureTemplate({
+                onClick,
+                className,
+                collapsed,
+                attrRelays,
+                titleElement,
+                toggleElement,
+                props: this.props,
+                onToggle: this.onToggle,
+            });
+        return (React.createElement("div", { key: `noseur-panel-${type}`, className: className, style: attrRelays?.style, id: attrRelays?.id, onClick: onClick ? () => {
+                const result = onClick(this.manageRef);
+                if (result === true || result === false)
+                    this.onToggle(result);
+            } : undefined },
+            titleElement,
+            this.props.collapsible ? toggleElement : null));
+    }
+    renderContent(collapsed) {
+        const attrRelays = this.props.attrsRelay?.content;
+        const transitionTimeout = attrRelays?.transitionTimeout ?? 500;
+        const className = Classname.build("noseur-panel-content", attrRelays?.className);
+        const children = !this.props.children || this.props.scheme != Scheme.SKELETON ? this.props.children : React.Children.map(this.props.children, (child) => {
+            if (!React.isValidElement(child) || child === null || child === undefined)
+                return child;
+            const childProps = ObjectHelper.clone(child.props);
+            const isPanelComponent = BoolHelper.equalsAny(child.type, [Panel /*, TabPane, Checkbox*/]);
+            childProps.scheme = Scheme.SKELETON;
+            childProps.className = Classname.build(childProps.className, !isPanelComponent ? "noseur-skeleton" : null);
+            return React.cloneElement(child, childProps);
+        });
+        return (React.createElement(CSSTransition, { nodeRef: this.transitionNodeRef, classNames: attrRelays?.transition, timeout: transitionTimeout, options: attrRelays?.transitionOptions, in: !collapsed, unmountOnExit: true },
+            React.createElement("div", { className: className, id: attrRelays?.id, style: attrRelays?.style, ref: this.transitionNodeRef }, children)));
+    }
+    render() {
+        const collapsed = this.isCollapsed();
+        const content = this.renderContent(collapsed);
+        const className = Classname.build("noseur-panel", {
+            "noseur-panel-bordered": !this.props.borderless
+        }, (this.props.scheme && this.props.outlined ? `${this.props.scheme}-vars-outlined` : null), (this.props.scheme ? `${this.props.scheme}-vars` : null), this.props.className);
+        const header = this.renderFixture("header", collapsed, this.props.header);
+        const footer = this.renderFixture("footer", collapsed, this.props.footer);
+        return (React.createElement("div", { className: className, ref: this.props.forwardRef, id: this.props.id, style: this.props.style },
+            header,
+            content,
+            footer));
+    }
+    ;
+}
+export const Panel = ({ ref, ...props }) => (React.createElement(PanelComponent, { ...props, forwardRef: ref }));

package/dist/esm/panel/ScrollPanel.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+export type ScrollPanelOnSubmitEventHandler = (event?: any) => void;
+export interface ScrollPanelManageRef {
+    scrollUp: () => void;
+    scrollLeft: () => void;
+    scrollDown: () => void;
+    scrollRight: () => void;
+}
+export interface ScrollPanelProps extends ComponentBaseProps<HTMLDivElement, ScrollPanelManageRef> {
+    isForm: boolean;
+    alwaysScroll: boolean;
+    alwaysScrollX: boolean;
+    alwaysScrollY: boolean;
+    hideScrollBars: boolean;
+    hideScrollBarX: boolean;
+    hideScrollBarY: boolean;
+    scroller: Partial<{
+        trackBg: string;
+        thumbBg: string;
+        trackWidth: number;
+        trackBorderRadius: number;
+        thumbBorderRadius: number;
+    }>;
+    onSubmit: ScrollPanelOnSubmitEventHandler;
+}
+export declare const ScrollPanel: ({ ref, ...props }: Partial<ScrollPanelProps>) => React.JSX.Element;