@snack-uikit/breadcrumbs 0.8.62 → 0.8.63-preview-71543426.0

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumbs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const Collapse_1 = require("../Collapse");
+const Crumb_1 = require("../Crumb");
+const HiddenChain_1 = require("../HiddenChain");
+const Separator_1 = require("../Separator");
+const Wrapper_1 = require("../Wrapper");
+/**
+ * Компонент хлебных крошек
+ */
+exports.Breadcrumbs = (0, react_1.memo)(function Breadcrumbs(_a) {
+  var {
+      items: itemsProps,
+      size = constants_1.SIZE.S,
+      separator = constants_1.SEPARATOR,
+      className,
+      firstItemIconOnly = false,
+      inactiveLastItem = false,
+      lastEmpty = false
+    } = _a,
+    rest = __rest(_a, ["items", "size", "separator", "className", "firstItemIconOnly", "inactiveLastItem", "lastEmpty"]);
+  const containerRef = (0, react_1.useRef)(null);
+  const {
+    setConfigs,
+    currentConfig
+  } = (0, hooks_1.useBreadcrumbsLayout)(containerRef);
+  const items = (0, react_1.useMemo)(() => inactiveLastItem ? itemsProps.map((item, index) => index === itemsProps.length - 1 ? Object.assign(Object.assign({}, item), {
+    onClick: undefined,
+    href: undefined
+  }) : item) : itemsProps, [inactiveLastItem, itemsProps]);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(HiddenChain_1.HiddenChain, {
+      items: items,
+      size: size,
+      separator: separator,
+      onConfigsBuilt: setConfigs,
+      firstItemIconOnly: firstItemIconOnly,
+      lastEmpty: lastEmpty
+    }), (0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, rest, {
+      ref: containerRef,
+      hidden: false,
+      size: size,
+      separator: separator,
+      className: className,
+      children: currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.chain.map((block, index, array) => {
+        const isLastElement = index === array.length - 1;
+        switch (block.element) {
+          case constants_1.ELEMENT_TYPE.Separator:
+            return (0, jsx_runtime_1.jsx)(Separator_1.Separator, {}, index);
+          case constants_1.ELEMENT_TYPE.Collapse:
+            return (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, {
+              currentConfig: currentConfig.chain
+            }, index);
+          case constants_1.ELEMENT_TYPE.Item:
+            const {
+              renderMode,
+              id
+            } = block.item;
+            if (renderMode !== constants_1.ITEM_RENDER_MODE.Collapsed) {
+              return (0, jsx_runtime_1.jsx)(Crumb_1.Crumb, {
+                useIconOnly: !index && firstItemIconOnly,
+                current: isLastElement,
+                renderMode: renderMode,
+                minWidth: block.width,
+                item: block.item
+              }, id);
+            }
+          default:
+            return null;
+        }
+      })
+    }))]
+  });
+});

package/dist/cjs/components/Breadcrumbs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Breadcrumbs"), exports);

package/dist/cjs/components/Collapse/Collapse.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Collapse = Collapse;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("@snack-uikit/list");
+const constants_1 = require("../../constants");
+const context_1 = require("../../context");
+const utils_1 = require("../../utils");
+const CrumbsTypography_1 = require("../CrumbsTypography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Collapse(_ref) {
+  let {
+    currentConfig,
+    className
+  } = _ref;
+  const ctx = (0, react_1.useContext)(context_1.BreadcrumbsContext);
+  const {
+    hidden,
+    size,
+    testId
+  } = ctx;
+  const buttonRef = (0, react_1.useRef)(null);
+  const collapsedItems = currentConfig.filter(node => node.element === constants_1.ELEMENT_TYPE.Item && node.item.renderMode === constants_1.ITEM_RENDER_MODE.Collapsed).map(
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  node => ({
+    content: {
+      option: node.item.label
+    },
+    onClick: node.item.onClick
+  }));
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: className,
+    "data-test-id": (0, utils_1.getTestId)('collapse', testId),
+    "data-element-type": constants_1.ELEMENT_TYPE.Collapse,
+    children: (0, jsx_runtime_1.jsx)(context_1.BreadcrumbsContext.Provider, {
+      value: Object.assign(Object.assign({}, ctx), {
+        testId: `${testId}-collapsed`
+      }),
+      children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+        trigger: 'hoverAndFocusVisible',
+        size: 's',
+        scroll: true,
+        triggerElemRef: buttonRef,
+        items: collapsedItems,
+        children: (0, jsx_runtime_1.jsx)("button", {
+          type: 'button',
+          ref: buttonRef,
+          className: styles_module_scss_1.default.collapse,
+          tabIndex: hidden ? -1 : 0,
+          children: (0, jsx_runtime_1.jsx)(CrumbsTypography_1.CrumbsTypography, {
+            size: size,
+            children: "..."
+          })
+        })
+      })
+    })
+  });
+}

package/dist/cjs/components/Collapse/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Collapse"), exports);

package/dist/cjs/components/Crumb/Crumb.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Crumb = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const context_1 = require("../../context");
+const utils_2 = require("../../utils");
+const CrumbsTypography_1 = require("../CrumbsTypography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const ELLIPSIS_LABEL_LENGTH = 8;
+exports.Crumb = (0, react_1.memo)(function Crumb(_a) {
+  var {
+      minWidth: minWidthProp = 0,
+      current = false,
+      renderMode,
+      className,
+      item: {
+        label: labelProp,
+        shortLabel,
+        icon: Icon,
+        id,
+        onClick,
+        href
+      },
+      useIconOnly: useIconOnlyProp
+    } = _a,
+    rest = __rest(_a, ["minWidth", "current", "renderMode", "className", "item", "useIconOnly"]);
+  const {
+    hidden,
+    size,
+    testId
+  } = (0, react_1.useContext)(context_1.BreadcrumbsContext);
+  const isLabelShouldBeEllipse = hidden && labelProp.length > ELLIPSIS_LABEL_LENGTH;
+  const label = isLabelShouldBeEllipse && renderMode === constants_1.ITEM_RENDER_MODE.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
+  const useIconOnly = Boolean(Icon && useIconOnlyProp);
+  const minWidth = minWidthProp && renderMode === constants_1.ITEM_RENDER_MODE.Ellipsis ? minWidthProp : 'auto';
+  const dataAttributes = {
+    'data-render-mode': renderMode,
+    'data-current': current,
+    'data-hidden': hidden,
+    'data-size': size,
+    'data-id': id
+  };
+  const content = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [Icon && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.icon,
+      children: (0, jsx_runtime_1.jsx)(Icon, {
+        size: 16
+      })
+    }), !useIconOnly && (0, jsx_runtime_1.jsx)(CrumbsTypography_1.CrumbsTypography, {
+      size: size,
+      className: styles_module_scss_1.default.label,
+      children: renderMode === constants_1.ITEM_RENDER_MODE.ShortLabel ? shortLabel : label
+    })]
+  });
+  const tabIndex = hidden ? {
+    tabIndex: -1
+  } : {};
+  const title = renderMode === constants_1.ITEM_RENDER_MODE.Ellipsis ? label : '';
+  let crumb = null;
+  if (href) {
+    crumb = (0, jsx_runtime_1.jsx)("a", Object.assign({
+      className: styles_module_scss_1.default.crumb,
+      onClick: onClick,
+      href: href,
+      "aria-label": useIconOnly ? label : undefined,
+      "data-clickable": true
+    }, dataAttributes, tabIndex, {
+      children: content
+    }));
+  } else if (onClick) {
+    crumb = (0, jsx_runtime_1.jsx)("button", Object.assign({
+      type: 'button',
+      title: title,
+      onClick: onClick,
+      className: styles_module_scss_1.default.crumb,
+      "aria-label": useIconOnly ? label : undefined,
+      "data-clickable": true
+    }, dataAttributes, tabIndex, {
+      children: content
+    }));
+  } else {
+    crumb = (0, jsx_runtime_1.jsx)("div", Object.assign({
+      className: styles_module_scss_1.default.crumb
+    }, dataAttributes, {
+      children: content
+    }));
+  }
+  return (0, jsx_runtime_1.jsx)("li", Object.assign({}, (0, utils_1.extractSupportProps)(rest), dataAttributes, {
+    "data-test-id": (0, utils_2.getTestId)('crumb', testId),
+    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className),
+    "data-element-type": constants_1.ELEMENT_TYPE.Item,
+    style: {
+      minWidth
+    },
+    title: title,
+    children: crumb
+  }));
+});

package/dist/cjs/components/Crumb/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Crumb"), exports);

package/dist/cjs/components/CrumbsTypography/CrumbsTypography.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CrumbsTypography = CrumbsTypography;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("@snack-uikit/typography");
+const constants_1 = require("../../constants");
+function CrumbsTypography(_ref) {
+  let {
+    size,
+    children,
+    className
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(typography_1.Typography, {
+    className: className,
+    size: size === constants_1.SIZE.S ? 'm' : 's',
+    tag: 'div',
+    family: 'sans',
+    purpose: 'body',
+    children: children
+  });
+}

package/dist/cjs/components/CrumbsTypography/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./CrumbsTypography"), exports);

package/dist/cjs/components/HiddenChain/HiddenChain.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HiddenChain = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const Collapse_1 = require("../Collapse");
+const Separator_1 = require("../Separator");
+const Wrapper_1 = require("../Wrapper");
+const hooks_1 = require("./hooks");
+exports.HiddenChain = (0, react_1.memo)(function HiddenChain(_ref) {
+  let {
+    size,
+    separator,
+    items,
+    onConfigsBuilt,
+    firstItemIconOnly = false,
+    lastEmpty = false
+  } = _ref;
+  const containerRef = (0, react_1.useRef)(null);
+  const itemsRef = (0, react_1.useRef)(items);
+  itemsRef.current = items;
+  (0, react_1.useEffect)(() => {
+    const container = containerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(_ref2 => {
+        let [{
+          target
+        }] = _ref2;
+        const sizeMap = (0, utils_1.buildSizeMap)(target);
+        if (sizeMap) {
+          onConfigsBuilt((0, utils_1.buildBreadcrumbsConfigs)(itemsRef.current, sizeMap, lastEmpty));
+        }
+      });
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [items, lastEmpty, onConfigsBuilt]);
+  const renderItemModes = (0, hooks_1.useItemModesRender)({
+    firstItemIconOnly
+  });
+  return (0, jsx_runtime_1.jsxs)(Wrapper_1.Wrapper, {
+    size: size,
+    hidden: true,
+    ref: containerRef,
+    separator: separator,
+    "data-test-id": 'hidden-wrapper',
+    children: [(0, jsx_runtime_1.jsx)(Separator_1.Separator, {}), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, {
+      currentConfig: []
+    }), items.map(renderItemModes)]
+  });
+});

package/dist/cjs/components/HiddenChain/hooks.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemModesRender = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const Crumb_1 = require("../Crumb");
+/**
+ * Варианты отображения для обычного айтема
+ */
+const NORMAL_MODES = [[constants_1.ITEM_RENDER_MODE.ShortLabel, 'shortLabel'], [constants_1.ITEM_RENDER_MODE.Ellipsis, 'label'], [constants_1.ITEM_RENDER_MODE.Full, 'label']];
+/**
+ * Варианты отображения айтемов состоящих из одной иконки
+ */
+const ICON_ONLY_MODES = [[constants_1.ITEM_RENDER_MODE.Full, 'label']];
+const getItemModesRenderer = firstItemIconOnly => (item, index) => {
+  const isIconOnlyMode = !index && firstItemIconOnly;
+  const modes = isIconOnlyMode ? ICON_ONLY_MODES : NORMAL_MODES;
+  return modes.map(_ref => {
+    let [mode, labelProp] = _ref;
+    const label = item[labelProp];
+    // full mode не может отсутствовать, даже если там нет значения
+    if (!label && mode !== constants_1.ITEM_RENDER_MODE.Full) {
+      return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Crumb_1.Crumb, {
+      useIconOnly: isIconOnlyMode,
+      renderMode: mode,
+      item: item
+    }, item.id + mode);
+  });
+};
+const useItemModesRender = _ref2 => {
+  let {
+    firstItemIconOnly
+  } = _ref2;
+  return (0, react_1.useMemo)(() => getItemModesRenderer(firstItemIconOnly), [firstItemIconOnly]);
+};
+exports.useItemModesRender = useItemModesRender;

package/dist/cjs/components/HiddenChain/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./HiddenChain"), exports);

package/dist/cjs/components/Separator/Separator.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const context_1 = require("../../context");
+const utils_1 = require("../../utils");
+const CrumbsTypography_1 = require("../CrumbsTypography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Separator() {
+  const {
+    size,
+    separator,
+    testId
+  } = (0, react_1.useContext)(context_1.BreadcrumbsContext);
+  return (0, jsx_runtime_1.jsx)("div", {
+    "aria-hidden": true,
+    "data-size": size,
+    className: styles_module_scss_1.default.separator,
+    "data-test-id": (0, utils_1.getTestId)('separator', testId),
+    "data-element-type": constants_1.ELEMENT_TYPE.Separator,
+    children: (0, jsx_runtime_1.jsx)(CrumbsTypography_1.CrumbsTypography, {
+      size: size,
+      children: separator
+    })
+  });
+}

package/dist/cjs/components/Separator/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Separator"), exports);

package/dist/cjs/components/Wrapper/Wrapper.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const context_1 = require("../../context");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Wrapper = (0, react_1.forwardRef)(function HiddenWrapper(_a, ref) {
+  var {
+      children,
+      className,
+      size,
+      hidden,
+      separator,
+      'data-test-id': testId
+    } = _a,
+    rest = __rest(_a, ["children", "className", "size", "hidden", "separator", 'data-test-id']);
+  return (0, jsx_runtime_1.jsx)("nav", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className),
+    "data-test-id": testId,
+    "data-hidden": hidden,
+    "aria-hidden": hidden,
+    children: (0, jsx_runtime_1.jsx)(context_1.BreadcrumbsContext.Provider, {
+      value: {
+        hidden,
+        size,
+        separator,
+        testId
+      },
+      children: (0, jsx_runtime_1.jsx)("ul", {
+        className: styles_module_scss_1.default.row,
+        ref: ref,
+        "data-hidden": hidden,
+        "data-size": size,
+        children: children
+      })
+    })
+  }));
+});

package/dist/cjs/components/Wrapper/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Wrapper"), exports);