@snack-uikit/list 0.18.0 → 0.18.1-preview-ba12ca94.0

package/dist/cjs/components/Items/PinGroupItem/PinGroupItem.js

@@ -0,0 +1,59 @@
+"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.PinTopGroupItem = PinTopGroupItem;
+exports.PinBottomGroupItem = PinBottomGroupItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const divider_1 = require("@snack-uikit/divider");
+const contexts_1 = require("../../Lists/contexts");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PinTopGroupItem(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  if (!children) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.pinTopItem),
+    "data-size": size,
+    "data-test-id": 'list__pin-top-group-item',
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      children: children
+    }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      weight: 'regular'
+    })]
+  });
+}
+function PinBottomGroupItem(_ref2) {
+  let {
+    children
+  } = _ref2;
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  if (!children) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.pinBottomItem),
+    "data-size": size,
+    "data-test-id": 'list__pin-bottom-group-item',
+    children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      weight: 'regular'
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: children
+    })]
+  });
+}

package/dist/cjs/components/Items/PinGroupItem/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("./PinGroupItem"), exports);

package/dist/cjs/components/Items/SearchItem/SearchItem.js

@@ -0,0 +1,50 @@
+"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.SearchItem = SearchItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const search_private_1 = require("@snack-uikit/search-private");
+const contexts_1 = require("../../Lists/contexts");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+function SearchItem(_ref) {
+  let {
+    search,
+    itemRef
+  } = _ref;
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  const handleKeyDown = e => {
+    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleFocus = e => {
+    e.stopPropagation();
+  };
+  if (!Boolean(search)) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.searchItem),
+    "data-size": size,
+    "data-test-id": 'list__search-item',
+    children: (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, Object.assign({
+      size: size,
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus
+    }, search, {
+      ref: itemRef
+    }))
+  });
+}

package/dist/cjs/components/Items/SearchItem/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("./SearchItem"), exports);

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRenderItems = useRenderItems;
+exports.useCreateBaseItems = useCreateBaseItems;
+exports.useGroupItemSelection = useGroupItemSelection;
+const react_1 = require("react");
+const react_2 = require("react");
+const contexts_1 = require("../Lists/contexts");
+const AccordionItem_1 = require("./AccordionItem");
+const BaseItem_1 = require("./BaseItem");
+const GroupItem_1 = require("./GroupItem");
+const GroupSelectItem_1 = require("./GroupSelectItem");
+const NextListItem_1 = require("./NextListItem");
+const utils_1 = require("./utils");
+function useRenderItems(focusCloseChildIds) {
+  const {
+    focusFlattenItems,
+    flattenItems
+  } = (0, contexts_1.useNewListContext)();
+  const {
+    isSelectionMultiple
+  } = (0, contexts_1.useSelectionContext)();
+  return (0, react_2.useMemo)(() => {
+    if (!focusCloseChildIds) {
+      return [null];
+    }
+    return focusCloseChildIds.map(id => {
+      const {
+        itemRef,
+        key,
+        originalId,
+        items
+      } = focusFlattenItems[id];
+      const flattenItem = flattenItems[originalId];
+      if ((0, utils_1.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_1.isGroupSelectItem)(flattenItem)) {
+        return (0, react_1.createElement)(GroupItem_1.GroupItem, Object.assign({}, flattenItem, {
+          items: items,
+          key: key
+        }));
+      }
+      if ((0, utils_1.isGroupSelectItem)(flattenItem)) {
+        return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
+          items: items,
+          itemRef: itemRef,
+          key: key
+        }));
+      }
+      if ((0, utils_1.isAccordionItem)(flattenItem)) {
+        return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
+          items: items,
+          itemRef: itemRef,
+          key: key
+        }));
+      }
+      if ((0, utils_1.isNextListItem)(flattenItem)) {
+        return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
+          focusId: id,
+          items: items,
+          itemRef: itemRef,
+          key: key
+        }));
+      }
+      return (0, react_1.createElement)(BaseItem_1.BaseItem, Object.assign({}, flattenItem, {
+        itemRef: itemRef,
+        key: key
+      }));
+    });
+  }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
+}
+function useCreateBaseItems(_ref) {
+  let {
+    footerActiveElementsRefs
+  } = _ref;
+  return (0, react_2.useMemo)(() => {
+    var _a;
+    return {
+      searchItem: {
+        itemRef: (0, react_2.createRef)(),
+        id: '~search',
+        parentId: '~main',
+        items: [],
+        allChildIds: []
+      },
+      footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
+        id: `~footer__${idx}`,
+        itemRef,
+        parentId: '~main',
+        items: [],
+        allChildIds: []
+      }))) !== null && _a !== void 0 ? _a : []
+    };
+  }, [footerActiveElementsRefs]);
+}
+function useGroupItemSelection(_ref2) {
+  let {
+    id,
+    allChildIds
+  } = _ref2;
+  const {
+    value,
+    setValue,
+    isSelectionMultiple
+  } = (0, contexts_1.useSelectionContext)();
+  const {
+    flattenItems
+  } = (0, contexts_1.useNewListContext)();
+  const baseChildIds = (0, react_2.useMemo)(() => allChildIds.filter(itemId => {
+    const item = flattenItems[itemId];
+    return item && !('type' in item);
+  }), [allChildIds, flattenItems]);
+  const enableChildIds = (0, react_2.useMemo)(() => baseChildIds.filter(itemId => {
+    const item = flattenItems[itemId];
+    return item && !('type' in item) && !item.disabled;
+  }), [baseChildIds, flattenItems]);
+  const checked = isSelectionMultiple ? value && Boolean(value.length) && baseChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+  const allEnabledChecked = isSelectionMultiple ? value && Boolean(value.length) && enableChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+  const indeterminate = isSelectionMultiple ? !checked && baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
+  const handleOnSelect = () => {
+    if (checked || allEnabledChecked) {
+      setValue === null || setValue === void 0 ? void 0 : setValue(value => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !enableChildIds.includes(itemId)));
+      return;
+    }
+    setValue === null || setValue === void 0 ? void 0 : setValue(value => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...enableChildIds])));
+  };
+  return {
+    checked,
+    indeterminate,
+    handleOnSelect
+  };
+}

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

@@ -0,0 +1,29 @@
+"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("./hooks"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./SearchItem"), exports);
+__exportStar(require("./PinGroupItem"), exports);

package/dist/cjs/components/Items/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/components/Items/utils.js

@@ -0,0 +1,206 @@
+"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.isGroupItemProps = exports.isNextListItemProps = exports.isAccordionItemProps = exports.isBaseItemProps = void 0;
+exports.isBaseItem = isBaseItem;
+exports.isAccordionItem = isAccordionItem;
+exports.isNextListItem = isNextListItem;
+exports.isGroupItem = isGroupItem;
+exports.isGroupSelectItem = isGroupSelectItem;
+exports.isContentItem = isContentItem;
+exports.kindFlattenItems = kindFlattenItems;
+exports.extractActiveItems = extractActiveItems;
+const react_1 = require("react");
+function isBaseItem(item) {
+  return item && !('items' in item);
+}
+function isAccordionItem(item) {
+  return item && 'items' in item && item['type'] === 'collapse';
+}
+function isNextListItem(item) {
+  return item && 'items' in item && item['type'] === 'next-list';
+}
+function isGroupItem(item) {
+  return item && 'items' in item && item['type'] === 'group';
+}
+function isGroupSelectItem(item) {
+  return item && 'items' in item && item['type'] === 'group-select';
+}
+function isContentItem(item) {
+  return typeof item === 'object' && item['option'] !== undefined;
+}
+exports.isBaseItemProps = isBaseItem;
+exports.isAccordionItemProps = isAccordionItem;
+exports.isNextListItemProps = isNextListItem;
+exports.isGroupItemProps = isGroupItem;
+function kindFlattenItems(_ref) {
+  let {
+    items,
+    prefix,
+    parentId
+  } = _ref;
+  const flattenItems = {};
+  const focusFlattenItems = {};
+  function flatten(_ref2) {
+    let {
+      item,
+      idx,
+      prefix,
+      parentId = '~main'
+    } = _ref2;
+    var _a, _b;
+    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const itemId = (_a = !isGroupItem(item) ? item.id : undefined) !== null && _a !== void 0 ? _a : autoId;
+    if (isBaseItem(item)) {
+      flattenItems[itemId] = Object.assign(Object.assign({}, item), {
+        items: [],
+        allChildIds: [],
+        id: itemId
+      });
+      focusFlattenItems[autoId] = {
+        key: autoId,
+        originalId: itemId,
+        id: autoId,
+        disabled: item.disabled,
+        parentId,
+        items: [],
+        allChildIds: [],
+        itemRef: item.itemRef || (0, react_1.createRef)()
+      };
+      return {
+        id: itemId,
+        children: [itemId],
+        autoId,
+        focusChildren: [autoId]
+      };
+    }
+    let allChildIds = [];
+    let allFocusChildIds = [];
+    const closeChildIds = [];
+    const autoChildIds = [];
+    const {
+        items
+      } = item,
+      rest = __rest(item, ["items"]);
+    const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : '~main' : autoId;
+    const filteredItems = items.filter(item => !item.hidden);
+    for (let idx = 0; idx < filteredItems.length; idx++) {
+      const {
+        id,
+        children,
+        autoId,
+        focusChildren
+      } = flatten({
+        item: filteredItems[idx],
+        idx,
+        prefix: itemId,
+        parentId: childActiveParent
+      });
+      autoChildIds.push(autoId);
+      closeChildIds.push(id);
+      allChildIds = allChildIds.concat(children);
+      allFocusChildIds = allFocusChildIds.concat(focusChildren);
+    }
+    const children = [...new Set(allChildIds.concat(closeChildIds))];
+    const focusChildren = [...new Set(allFocusChildIds.concat(autoChildIds))];
+    flattenItems[itemId] = Object.assign(Object.assign({}, rest), {
+      id: itemId,
+      items: [],
+      allChildIds: children
+    });
+    focusFlattenItems[autoId] = {
+      key: autoId,
+      originalId: itemId,
+      id: autoId,
+      parentId,
+      items: autoChildIds,
+      allChildIds: focusChildren,
+      disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
+      type: item.type,
+      itemRef: (_b = !isGroupItem(item) ? item.itemRef : undefined) !== null && _b !== void 0 ? _b : (0, react_1.createRef)()
+    };
+    return {
+      id: itemId,
+      children,
+      autoId,
+      focusChildren
+    };
+  }
+  const closeChildIds = [];
+  const autoChildIds = [];
+  let allChildIds = [];
+  const filteredItems = items.filter(item => !item.hidden);
+  for (let idx = 0; idx < filteredItems.length; idx++) {
+    const {
+      id,
+      children,
+      autoId
+    } = flatten({
+      item: filteredItems[idx],
+      idx,
+      prefix,
+      parentId
+    });
+    autoChildIds.push(autoId);
+    closeChildIds.push(id);
+    allChildIds.push(id);
+    allChildIds = allChildIds.concat(children);
+  }
+  const children = [...new Set(allChildIds)];
+  return {
+    focusCloseChildIds: autoChildIds,
+    allChildIds: children,
+    flattenItems,
+    focusFlattenItems
+  };
+}
+function extractActiveItems(_ref3) {
+  let {
+    focusFlattenItems,
+    focusCloseChildIds,
+    openCollapseItems,
+    isSelectionMultiple
+  } = _ref3;
+  const ids = [];
+  const expandedIds = [];
+  function internalFn(focusCloseChildIds) {
+    focusCloseChildIds.forEach(id => {
+      const child = focusFlattenItems[id];
+      if (child.type === 'group') {
+        internalFn(child.items);
+        return;
+      }
+      if (!child.disabled) {
+        if (child.type === 'group-select') {
+          if (isSelectionMultiple) {
+            ids.push(child.id);
+          }
+          internalFn(child.items);
+          return;
+        }
+        ids.push(child.id);
+        if (child.type) {
+          expandedIds.push(id);
+          if (openCollapseItems.includes(child.originalId)) {
+            internalFn(child.items);
+          }
+        }
+      }
+    });
+  }
+  internalFn(focusCloseChildIds);
+  return {
+    ids,
+    expandedIds
+  };
+}