@itcase/ui 1.1.6 → 1.1.7

package/dist/Accordion-JS45IVx7.js

@@ -0,0 +1,204 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import React__default, { useCallback, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import castArray from 'lodash/castArray';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { Icon } from './components/Icon.js';
+import { T as Text } from './Text-DffpwlYq.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React__default.createElement("svg", props, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var ChevronTop16 = function ChevronTop16(props) {
+  return /*#__PURE__*/React__default.createElement("svg", props, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
+  }));
+};
+ChevronTop16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+const icon16 = {
+  ChevronDown: ChevronDown16,
+  ChevronTop: ChevronTop16
+};
+
+function AccordionItem(props) {
+    var children = props.children, id = props.id, title = props.title, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, content = props.content, beforeContent = props.beforeContent, afterContent = props.afterContent, className = props.className, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, contentTextSize = props.contentTextSize, contentTextColor = props.contentTextColor, contentTextWeight = props.contentTextWeight, size = props.size, isExpanded = props.isExpanded, onClick = props.onClick;
+    var onClickTitle = useCallback(function () {
+        // !isExpanded - is next state of expanded
+        var thisItemData = { id: id, title: title, content: content, isExpanded: !isExpanded };
+        onClick && onClick(thisItemData);
+    }, [onClick, id, title, content, isExpanded]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var contentBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'contentBorderColor',
+    });
+    var titleBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'titleBorderColor',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var contentFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'contentFill',
+    });
+    var titleFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'titleFill',
+    });
+    var titleFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'titleFillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion-item_shape_',
+        propsKey: 'shape',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntimeExports.jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntimeExports.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (
+                // @ts-expect-error
+                jsxRuntimeExports.jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown })) }), beforeContent && beforeContent, isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+                    (content && (jsxRuntimeExports.jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+}
+AccordionItem.defaultProps = {
+    iconFill: 'surfaceItemAccent',
+};
+
+function Accordion(props) {
+    var children = props.children, items = props.items, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, isMultiple = props.isMultiple, onClickItem = props.onClickItem;
+    var _b = useState(castArray(initial)), expandedItems = _b[0], setExpandedItems = _b[1];
+    var onClickAccordionItem = useCallback(function (targetItem) {
+        setExpandedItems(function (prevState) {
+            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+            if (isMultiple) {
+                if (isExpanded) {
+                    // ... without target id
+                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                }
+                else {
+                    // ... with target id
+                    return __spreadArray(__spreadArray([], prevState, true), [targetItem.id], false);
+                }
+            }
+            else {
+                if (isExpanded) {
+                    return [];
+                }
+                else {
+                    return [targetItem.id];
+                }
+            }
+        });
+        onClickItem && onClickItem(targetItem);
+    }, [onClickItem]);
+    var accordionItemsList = useMemo(function () {
+        if (items) {
+            return items.map(function (item, i) { return (jsxRuntimeExports.jsx(AccordionItem, { content: item.content, id: item.id, isExpanded: expandedItems.includes(item.id), title: item.title, onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+        }
+        if (children) {
+            return React__default.Children.toArray(children).map(function (child) {
+                if (React__default.isValidElement(child)) {
+                    var childID = child.props.id || child.key;
+                    return React__default.cloneElement(child, {
+                        id: childID,
+                        isExpanded: expandedItems.includes(childID),
+                        onClick: onClickAccordionItem,
+                    });
+                }
+                return child;
+            });
+        }
+        return [];
+    }, [children, items, expandedItems, onClickAccordionItem]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    /*
+     * paddingHorizontalWrapper="16px"
+     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
+     * wrapper - target
+     */
+    // @ts-expect-error
+    var _c = useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), style: accordionStyles, children: jsxRuntimeExports.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+}
+Accordion.defaultProps = {
+    initial: [],
+};
+
+export { Accordion as A, AccordionItem as a };