@sima-land/ui-nucleons 45.0.0-alpha.26 → 45.0.0-alpha.27

package/accordion/accordion-provider.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+interface ContextProps {
+    register: (groupId: string, setExpand: (expand: boolean) => void) => symbol;
+    unregister: (groupId: string, id: symbol) => void;
+    closeGroup: (groupId: string) => void;
+}
+interface Props {
+    children?: ReactNode;
+}
+export declare const AccordionContext: import("react").Context<ContextProps>;
+/**
+ * Провайдер обрабатывающий логику открытия аккордеонов внутри групп.
+ * @param props Пропсы.
+ * @return Элемент.
+ */
+export declare const AccordionProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/accordion/accordion-provider.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionProvider = exports.AccordionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.AccordionContext = (0, react_1.createContext)({
+    register: () => Symbol(),
+    unregister: () => { },
+    closeGroup: () => { },
+});
+/**
+ * Провайдер обрабатывающий логику открытия аккордеонов внутри групп.
+ * @param props Пропсы.
+ * @return Элемент.
+ */
+const AccordionProvider = ({ children }) => {
+    const [items, setItems] = (0, react_1.useState)({});
+    const register = (0, react_1.useCallback)((groupId, setExpand) => {
+        const item = {
+            setExpand,
+            id: Symbol(groupId),
+        };
+        setItems(registeredItems => ({
+            ...registeredItems,
+            [groupId]: (registeredItems[groupId] || []).concat(item),
+        }));
+        return item.id;
+    }, []);
+    const unregister = (0, react_1.useCallback)((groupId, id) => {
+        setItems(registeredItems => {
+            registeredItems[groupId] = registeredItems[groupId].filter(item => item.id !== id);
+            if (registeredItems[groupId].length < 1)
+                delete registeredItems[groupId];
+            return registeredItems;
+        });
+    }, []);
+    const closeGroup = (0, react_1.useCallback)((groupId) => items[groupId]?.forEach(({ setExpand }) => setExpand(false)), [items]);
+    return ((0, jsx_runtime_1.jsx)(exports.AccordionContext.Provider, { value: {
+            register,
+            unregister,
+            closeGroup,
+        }, children: children }));
+};
+exports.AccordionProvider = AccordionProvider;
+//# sourceMappingURL=accordion-provider.js.map

package/accordion/accordion-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-provider.js","sourceRoot":"","sources":["../../src/accordion/accordion-provider.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwE;AAiB3D,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAAe;IAC1D,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE;IACxB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAC,CAAC;AAEH;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAA0B,EAAE,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAC,OAAe,EAAE,SAAoC,EAAE,EAAE;QACrF,MAAM,IAAI,GAAG;YACX,SAAS;YACT,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC;SACpB,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;YAC3B,GAAG,eAAe;YAClB,CAAC,OAAO,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;SACzD,CAAC,CAAC,CAAC;QACJ,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,OAAe,EAAE,EAAU,EAAE,EAAE;QAC7D,QAAQ,CAAC,eAAe,CAAC,EAAE;YACzB,eAAe,CAAC,OAAO,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACnF,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;YACzE,OAAO,eAAe,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,OAAe,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACjF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,uBAAC,wBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,QAAQ;YACR,UAAU;YACV,UAAU;SACX,YAEA,QAAQ,GACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,iBAAiB,qBAuC5B"}

package/accordion/accordion.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface Props {
+    /** Заголовок блока аккордеона.  */
+    summary: string;
+    /** Тема оформления. */
+    theme?: 'light' | 'dark';
+    /** Описание. */
+    description?: string;
+    /** Название группы аккордеона. */
+    name?: string;
+    /** Первоначальное значение состояния открытия. */
+    open?: boolean;
+    /** Контент аккордеона при открытии. */
+    children?: ReactNode;
+    /** Внешний стиль компонента. */
+    className?: string;
+    /** Уровень заголовков. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Обработчик переключения состояния аккордеона. */
+    onToggle?: (open: boolean) => void;
+}
+/**
+ * Аккордеон.
+ * @param props Пропсы компонента.
+ * @return Элемент.
+ */
+export declare const Accordion: ({ theme, open, name, summary, description, onToggle, className, children, level, }: Props) => import("react/jsx-runtime").JSX.Element;

package/accordion/accordion.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const accordion_m_scss_1 = __importDefault(require("./accordion.m.scss"));
+const ArrowExpandDown_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowExpandDown"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const accordion_provider_1 = require("./accordion-provider");
+const context_1 = require("../context");
+const cx = bind_1.default.bind(accordion_m_scss_1.default);
+/**
+ * Аккордеон.
+ * @param props Пропсы компонента.
+ * @return Элемент.
+ */
+const Accordion = ({ theme = 'light', open = false, name, summary, description, onToggle, className, children, level = 4, }) => {
+    const container = (0, react_1.useRef)(null);
+    const { createResizeObserver } = (0, react_1.useContext)(context_1.ResizeObserverContext);
+    const { register, unregister, closeGroup } = (0, react_1.useContext)(accordion_provider_1.AccordionContext);
+    const [expanded, setExpand] = (0, react_1.useState)(open);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (name) {
+            const id = register(name, setExpand);
+            return () => unregister(name, id);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        open && name && closeGroup(name);
+        setExpand(open);
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        const observer = createResizeObserver(() => setContentHeight(container.current?.scrollHeight || 0));
+        container.current && observer.observe(container.current);
+        return () => observer.disconnect();
+    }, [container.current, createResizeObserver]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root', {
+            expanded,
+            'theme-dark': theme === 'dark',
+            'theme-light': theme === 'light',
+        }, className), children: [(0, jsx_runtime_1.jsxs)("button", { type: 'button', "aria-expanded": expanded, "aria-controls": `section-${name}`, onClick: () => {
+                    /**
+                     * Порядовок вызовов и используемых данных важен, так как сначала всё закрываем, а потом открываем конкретный.
+                     */
+                    name && closeGroup(name);
+                    setExpand(!expanded);
+                    onToggle?.(!expanded);
+                }, tabIndex: 0, className: accordion_m_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { role: 'heading', "aria-level": level, className: accordion_m_scss_1.default.title, children: summary }), (0, jsx_runtime_1.jsx)(ArrowExpandDown_1.default, { className: accordion_m_scss_1.default.arrow })] }), (0, jsx_runtime_1.jsxs)("div", { className: accordion_m_scss_1.default.content, role: 'region', ref: container, style: {
+                    maxHeight: expanded ? contentHeight : 0,
+                }, children: [children, description && (0, jsx_runtime_1.jsx)("span", { className: accordion_m_scss_1.default.description, children: description })] })] }));
+};
+exports.Accordion = Accordion;
+//# sourceMappingURL=accordion.js.map

package/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/accordion/accordion.tsx"],"names":[],"mappings":"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"}

package/accordion/accordion.m.scss

@@ -0,0 +1,86 @@
+@use '../colors.scss';
+
+.root {
+  width: 100%;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  &.theme-light {
+    background-color: colors.$basic-gray4;
+    --text-color: #{colors.$basic-gray87};
+    --hover-header-color: #{colors.$basic-gray54};
+    --arrow-color: #{colors.$basic-gray87};
+    --border-focus-visible-color: #{colors.$basic-gray24};
+  }
+  &.theme-dark {
+    --text-color: #{colors.$basic-white};
+    --hover-header-color: #{colors.$basic-gray8};
+    --arrow-color: #{colors.$basic-gray8};
+    --border-focus-visible-color: #{colors.$basic-gray54};
+    background-color: colors.$basic-gray76;
+  }
+}
+
+.expanded {
+  .arrow {
+    transform: rotate(180deg);
+  }
+  .content {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+  .header:focus-visible {
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.title {
+  margin: 0;
+  color: var(--text-color);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.arrow {
+  fill: var(--arrow-color);
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  padding: 16px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  width: 100%;
+  &:focus-visible {
+    outline: 1px solid var(--border-focus-visible-color);
+    border-radius: 8px;
+  }
+  &:hover {
+    .title {
+      color: var(--hover-header-color);
+    }
+  }
+}
+
+.content {
+  padding: 0 16px;
+  overflow: hidden;
+  transition: max-height 200ms ease;
+  color: var(--text-color);
+}
+
+.description {
+  margin-top: 12px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  display: inline-block;
+  color: colors.$basic-gray38;
+}

package/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './accordion';
+export type { Props } from './accordion';
+export { AccordionProvider } from './accordion-provider';

package/accordion/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionProvider = exports.Accordion = void 0;
+var accordion_1 = require("./accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
+var accordion_provider_1 = require("./accordion-provider");
+Object.defineProperty(exports, "AccordionProvider", { enumerable: true, get: function () { return accordion_provider_1.AccordionProvider; } });
+//# sourceMappingURL=index.js.map

package/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;AAAA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAElB,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}

package/breakpoints.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /* stylelint-disable length-zero-no-unit */
 $map: (
   // ВАЖНО: тут именно 0px а не 0 - в Safari нельзя использовать @media (min-width: 0)
@@ -20,22 +22,22 @@ $map: (
  */
 
 @mixin greaterThanOrEqual($breakpoint) {
-  @if map-has-key($map, $breakpoint) {
-    @media (min-width: map-get($map, $breakpoint)) {
+  @if map.has-key($map, $breakpoint) {
+    @media (min-width: map.get($map, $breakpoint)) {
       @content;
     }
   } @else {
-    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map-keys($map)}.';
+    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
   }
 }
 
 @mixin lessThan($breakpoint) {
-  @if map-has-key($map, $breakpoint) {
-    @media (max-width: (map-get($map, $breakpoint) - 1px)) {
+  @if map.has-key($map, $breakpoint) {
+    @media (max-width: (map.get($map, $breakpoint) - 1px)) {
       @content;
     }
   } @else {
-    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map-keys($map)}.';
+    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/ui-nucleons",
   "type": "commonjs",
-  "version": "45.0.0-alpha.26",
+  "version": "45.0.0-alpha.27",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -87,6 +87,7 @@
     "./arrow-button": "./arrow-button/index.js",
     "./autocomplete": "./autocomplete/index.js",
     "./avatar": "./avatar/index.js",
+    "./accordion": "./accordion/index.js",
     "./base-input": "./base-input/index.js",
     "./bottom-bar": "./bottom-bar/index.js",
     "./bottom-bar/bottom-bar-util.scss": "./bottom-bar/bottom-bar-util.scss",