@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-es/responsive/OverflowReducer.js

@@ -0,0 +1,248 @@
+import { Children, isValidElement } from 'react';
+
+const DEFAULT_PRIORITY = 3;
+const mapReactElementChildren = (children, fn) => {
+  const childElements = [];
+  Children.forEach(children, (child, i) => {
+    if (isValidElement(child)) {
+      childElements.push(fn(child, i));
+    }
+  });
+  return childElements;
+};
+const sourceItem = (item, id, index, options) => {
+  var _a;
+  const priority = ((_a = options == null ? void 0 : options.getPriority) == null ? void 0 : _a.call(options, item, index)) ?? item.priority ?? DEFAULT_PRIORITY;
+  return {
+    //TODO editable closeable configurable via item
+    closeable: item.closeable || (options == null ? void 0 : options.closeable),
+    editable: options == null ? void 0 : options.editable,
+    element: null,
+    fullSize: null,
+    id: item.id ?? id,
+    index,
+    label: item.label,
+    position: item.position,
+    priority,
+    size: 0,
+    source: item,
+    type: "source"
+  };
+};
+const createSourceItems = (source, idRoot, options) => {
+  if (Array.isArray(source)) {
+    return source.map((item, index) => {
+      var _a;
+      (_a = options == null ? void 0 : options.getPriority) == null ? void 0 : _a.call(options, source, index);
+      return sourceItem(item, `${idRoot}-${index}`, index, options);
+    });
+  }
+};
+const childItem = (child, id, index, options) => {
+  var _a;
+  const {
+    closeable,
+    disabled,
+    id: idProp,
+    label,
+    "data-collapsible": collapsible,
+    "data-editable": editable,
+    "data-position": dataPosition,
+    "data-priority": dataPriority = "2"
+  } = child.props;
+  const priority = (_a = options == null ? void 0 : options.getPriority) == null ? void 0 : _a.call(options, child, index);
+  return {
+    closeable: closeable || (options == null ? void 0 : options.closeable),
+    collapsible,
+    editable: editable ? true : options == null ? void 0 : options.editable,
+    disabled,
+    fullSize: null,
+    id: idProp ?? id,
+    index,
+    element: child,
+    label,
+    position: dataPosition,
+    priority: priority ?? Number.parseInt(dataPriority),
+    size: 0,
+    source: null,
+    type: "child"
+  };
+};
+const createChildItems = (children, idRoot, options) => {
+  if (children) {
+    return mapReactElementChildren(children, (child, index) => {
+      const id = `${idRoot}-${index}`;
+      return childItem(child, id, index, options);
+    });
+  }
+};
+const createInjectedContent = (items, idRoot, startIndex) => {
+  return items.map((item, i) => {
+    const index = startIndex + i;
+    const id = `${idRoot}-${index}`;
+    const { source } = item;
+    if (source) {
+      const injectedItem2 = sourceItem(source, id, index);
+      injectedItem2.isInjectedItem = true;
+      return injectedItem2;
+    }
+    const { element } = item;
+    const injectedItem = childItem(element, id, index);
+    injectedItem.isInjectedItem = true;
+    return injectedItem;
+  });
+};
+const defaultOptions = {};
+const reducerInitialiser = ({
+  children,
+  source,
+  injectedItems = [],
+  idRoot,
+  options = defaultOptions
+}) => {
+  const providedContent = createChildItems(children, idRoot, options) || createSourceItems(source, idRoot, options) || [];
+  const injectedContent = createInjectedContent(
+    injectedItems,
+    idRoot,
+    providedContent.length
+  );
+  return providedContent.concat(injectedContent);
+};
+const collapsingItem = (items, { overflowItem }) => items.map(
+  (item) => item === overflowItem ? {
+    ...item,
+    collapsing: true
+  } : item
+);
+const uncollapseDynamicItem = (items, { overflowItem }) => items.map(
+  (item) => item === overflowItem ? {
+    ...item,
+    collapsed: false,
+    collapsing: true,
+    size: item.fullSize,
+    fullSize: null
+  } : item
+);
+const collapseInstantItem = (items, { overflowItem }) => items.map(
+  (item) => item === overflowItem ? {
+    ...item,
+    collapsed: true
+  } : item
+);
+const replaceItem = (items, { overflowItem }) => items.map(
+  (item) => item.index === (overflowItem == null ? void 0 : overflowItem.index) ? overflowItem : item
+);
+const updateItems = (items, { overflowItems = [] }) => {
+  return items.map((item) => {
+    const targetItem = overflowItems.find((i) => i.id === item.id);
+    return targetItem ? { ...item, ...targetItem } : item;
+  });
+};
+const restoreCollapsingItem = (items) => {
+  const collapsingItem2 = items.find(
+    ({ collapsible, collapsing }) => collapsible === "dynamic" && collapsing
+  );
+  const collapsedItem = items.find(
+    ({ collapsible, collapsed }) => collapsible === "dynamic" && collapsed
+  );
+  return items.map((item) => {
+    if (item === collapsingItem2) {
+      return {
+        ...item,
+        collapsing: false
+      };
+    }
+    if (item === collapsedItem) {
+      return {
+        ...item,
+        collapsed: false,
+        collapsing: true
+      };
+    }
+    return item;
+  });
+};
+const collapseDynamicItem = (items, { overflowItem, collapsedSize = 0, minSize = 0 }) => {
+  const remainingUncollpasedItems = items.filter(
+    (i) => i.collapsible === "dynamic" && !i.collapsed && i !== overflowItem
+  );
+  const lastUncollapsedItem = remainingUncollpasedItems.pop();
+  return items.map((item) => {
+    if (item === overflowItem) {
+      return {
+        ...item,
+        collapsing: false,
+        collapsed: true,
+        fullSize: item.size,
+        minSize,
+        size: collapsedSize
+      };
+    }
+    if (item === lastUncollapsedItem) {
+      return {
+        ...item,
+        collapsing: true
+      };
+    }
+    return item;
+  });
+};
+const addSourceItem = (items, { idRoot, source }) => {
+  const index = items.length;
+  return items.concat(sourceItem(source, `${idRoot}-${index}`, index));
+};
+const removeItem = (items, { indexPosition }) => {
+  return items.slice(0, indexPosition).concat(items.slice(indexPosition + 1));
+};
+const addOverflowIndicator = (items, { overflowItem }) => {
+  if (!items.find((i) => i.isOverflowIndicator)) {
+    if (items.find((i) => i.label === "Add Tab")) {
+      const [addTab] = items.slice(-1);
+      return items.slice(0, -1).concat({ ...overflowItem, index: addTab.index }).concat({ ...addTab, index: overflowItem.index });
+    }
+    return items.concat(overflowItem);
+  }
+  return items;
+};
+const overflowReducer = (state, action) => {
+  switch (action.type) {
+    case "init":
+      return action.overflowItems ?? state;
+    case "add-overflow-indicator":
+      return addOverflowIndicator(state, action);
+    case "update-items":
+      return updateItems(state, action);
+    case "replace-item":
+      return replaceItem(state, action);
+    case "update-items-add-overflow-indicator":
+      return addOverflowIndicator(
+        updateItems(state, {
+          overflowItems: action.overflowItems
+        }),
+        { overflowItem: action.overflowItem }
+      );
+    case "update-items-remove-overflow-indicator":
+      return updateItems(state, {
+        overflowItems: action.overflowItems
+      }).filter((item) => !item.isOverflowIndicator);
+    case "collapsing-item":
+      return collapsingItem(state, action);
+    case "collapse-dynamic-item":
+      return collapseDynamicItem(state, action);
+    case "uncollapse-dynamic-item":
+      return uncollapseDynamicItem(state, action);
+    case "restore-collapsing-item":
+      return restoreCollapsingItem(state);
+    case "collapse-instant-item":
+      return collapseInstantItem(state, action);
+    case "add-source-item":
+      return addSourceItem(state, action);
+    case "remove-item":
+      return removeItem(state, action);
+    default:
+      return state;
+  }
+};
+
+export { overflowReducer, reducerInitialiser };
+//# sourceMappingURL=OverflowReducer.js.map

package/dist-es/responsive/OverflowReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowReducer.js","sources":["../src/responsive/OverflowReducer.ts"],"sourcesContent":["/**\n * This reducer manages a collection of items that represent the content of an overflowable container.\n * The items are mostly content configured by the caller of the container, either data passed though\n * the source prop or as child elements. We also support 'injected' items. These allow for additional UI\n * controls to be inserted into the container, eg an 'Add Item' button.\n */\nimport {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  type Reducer,\n  isValidElement,\n} from \"react\";\n\nimport type {\n  InjectedChildItem,\n  InjectedSourceItem,\n  OverflowCollectionOptions,\n  OverflowItem,\n  OverflowItems,\n  OverflowSource,\n} from \"./overflowTypes\";\n\ninterface InitAction {\n  type: \"init\";\n  overflowItems?: OverflowItem[];\n}\n\ninterface SourceAction {\n  type: \"add-source-item\";\n  idRoot: string;\n  source: any;\n}\ninterface AddChildAction {\n  type: \"add-child-item\";\n  idRoot: string;\n  indexPosition?: number;\n  element: ReactElement;\n}\ninterface RemoveItemAction {\n  type: \"remove-item\";\n  indexPosition: number;\n}\n\ninterface MultiItemAction {\n  type: \"update-items\" | \"update-items-remove-overflow-indicator\";\n  overflowItems: (Partial<Omit<OverflowItem, \"id\">> &\n    Pick<OverflowItem, \"id\">)[];\n}\ninterface SingleItemAction {\n  type:\n    | \"add-overflow-indicator\"\n    | \"replace-item\"\n    | \"collapsing-item\"\n    | \"uncollapse-dynamic-item\"\n    | \"collapse-instant-item\";\n\n  overflowItem: OverflowItem;\n}\n\ninterface CombinedItemAction {\n  type: \"update-items-add-overflow-indicator\";\n  overflowItem: OverflowItem<any>;\n  overflowItems: OverflowItem[];\n}\n\ninterface EmptyPayloadAction {\n  type: \"restore-collapsing-item\";\n}\ninterface DynamicCollapseAction extends Omit<SingleItemAction, \"type\"> {\n  type: \"collapse-dynamic-item\";\n  collapsedSize: number;\n  minSize: number;\n}\n\nexport type OverflowAction =\n  | AddChildAction\n  | CombinedItemAction\n  | DynamicCollapseAction\n  | EmptyPayloadAction\n  | InitAction\n  | MultiItemAction\n  | RemoveItemAction\n  | SingleItemAction\n  | SourceAction;\n\nconst DEFAULT_PRIORITY = 3;\n\nconst mapReactElementChildren = (\n  children: ReactNode,\n  fn: (el: ReactElement, index: number) => OverflowItem,\n): OverflowItem[] => {\n  const childElements: OverflowItem[] = [];\n  Children.forEach(children, (child, i) => {\n    if (isValidElement(child)) {\n      childElements.push(fn(child, i));\n    }\n  });\n  return childElements;\n};\n\nconst sourceItem = (\n  item: OverflowSource,\n  id: string,\n  index: number,\n  options?: OverflowCollectionOptions,\n): OverflowItem<\"source\"> => {\n  const priority =\n    options?.getPriority?.(item, index) ?? item.priority ?? DEFAULT_PRIORITY;\n\n  return {\n    //TODO editable closeable configurable via item\n    closeable: item.closeable || options?.closeable,\n    editable: options?.editable,\n    element: null,\n    fullSize: null,\n    id: item.id ?? id,\n    index,\n    label: item.label,\n    position: item.position,\n    priority,\n    size: 0,\n    source: item,\n    type: \"source\",\n  };\n};\n\nconst createSourceItems = (\n  source: any,\n  idRoot: string,\n  options?: OverflowCollectionOptions,\n): OverflowItem<\"source\">[] | undefined => {\n  if (Array.isArray(source)) {\n    return source.map((item, index) => {\n      const priority = options?.getPriority?.(source, index);\n      return sourceItem(item, `${idRoot}-${index}`, index, options);\n    });\n  }\n};\n\ntype OverflowChild = {\n  closeable?: boolean;\n  disabled?: boolean;\n  id?: string;\n  label?: string;\n  \"data-collapsible\"?: boolean;\n  \"data-editable\"?: boolean;\n  \"data-position\"?: number;\n  \"data-priority\"?: string;\n};\n\nconst childItem = (\n  child: ReactElement,\n  id: string,\n  index: number,\n  options?: OverflowCollectionOptions,\n): OverflowItem<\"child\"> => {\n  const {\n    closeable,\n    disabled,\n    id: idProp,\n    label,\n    \"data-collapsible\": collapsible,\n    \"data-editable\": editable,\n    \"data-position\": dataPosition,\n    \"data-priority\": dataPriority = \"2\",\n  } = child.props as OverflowChild;\n\n  const priority = options?.getPriority?.(child, index);\n\n  return {\n    closeable: closeable || options?.closeable,\n    collapsible,\n    editable: editable ? true : options?.editable,\n    disabled,\n    fullSize: null,\n    id: idProp ?? id,\n    index,\n    element: child,\n    label,\n    position: dataPosition,\n    priority: priority ?? Number.parseInt(dataPriority),\n    size: 0,\n    source: null,\n    type: \"child\",\n  } as OverflowItem;\n};\n\nconst createChildItems = (\n  children: ReactNode,\n  idRoot: string,\n  options?: OverflowCollectionOptions,\n): OverflowItem<\"child\">[] | undefined => {\n  if (children) {\n    return mapReactElementChildren(children, (child, index) => {\n      const id = `${idRoot}-${index}`;\n      return childItem(child, id, index, options);\n    });\n  }\n};\n\nconst createInjectedContent = (\n  items: Array<InjectedSourceItem | InjectedChildItem>,\n  idRoot: string,\n  startIndex: number,\n): OverflowItem<\"source\" | \"child\">[] => {\n  return items.map((item, i) => {\n    const index = startIndex + i;\n    const id = `${idRoot}-${index}`;\n    const { source } = item as InjectedSourceItem;\n    if (source) {\n      const injectedItem = sourceItem(source, id, index);\n      injectedItem.isInjectedItem = true;\n      return injectedItem;\n    }\n    const { element } = item as InjectedChildItem;\n    const injectedItem = childItem(element, id, index);\n    injectedItem.isInjectedItem = true;\n    return injectedItem;\n  });\n};\n\nexport type OverflowReducer = Reducer<OverflowItems, OverflowAction>;\n\nconst defaultOptions = {};\n\nexport type OverflowReducerInitialisationProps = {\n  children?: ReactNode;\n  source?: OverflowSource[];\n  injectedItems?: any[];\n  idRoot: string;\n  options?: OverflowCollectionOptions;\n};\n\nexport const reducerInitialiser: (\n  props: OverflowReducerInitialisationProps,\n) => OverflowItems = ({\n  children,\n  source,\n  injectedItems = [],\n  idRoot,\n  options = defaultOptions,\n}) => {\n  const providedContent: OverflowItems =\n    createChildItems(children, idRoot, options) ||\n    createSourceItems(source, idRoot, options) ||\n    [];\n  const injectedContent = createInjectedContent(\n    injectedItems,\n    idRoot,\n    providedContent.length,\n  );\n  return providedContent.concat(injectedContent);\n};\n\nconst collapsingItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction,\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsing: true,\n        }\n      : item,\n  );\n\nconst uncollapseDynamicItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction,\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsed: false,\n          collapsing: true,\n          size: item.fullSize as number,\n          fullSize: null,\n        }\n      : item,\n  );\n\nconst collapseInstantItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction,\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsed: true,\n        }\n      : item,\n  );\n\nconst replaceItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction,\n) =>\n  items.map((item) =>\n    item.index === overflowItem?.index ? overflowItem : item,\n  );\n\nconst updateItems = (\n  items: OverflowItem[],\n  { overflowItems = [] }: MultiItemAction,\n) => {\n  return items.map((item) => {\n    const targetItem = overflowItems.find((i) => i.id === item.id);\n    return targetItem ? { ...item, ...targetItem } : item;\n  });\n};\n\nconst restoreCollapsingItem = (items: OverflowItem[]) => {\n  const collapsingItem = items.find(\n    ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing,\n  );\n  const collapsedItem = items.find(\n    ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed,\n  );\n  return items.map((item) => {\n    if (item === collapsingItem) {\n      return {\n        ...item,\n        collapsing: false,\n      };\n    }\n    if (item === collapsedItem) {\n      return {\n        ...item,\n        collapsed: false,\n        collapsing: true,\n      };\n    }\n    return item;\n  });\n};\n\nconst collapseDynamicItem = (\n  items: OverflowItem[],\n  { overflowItem, collapsedSize = 0, minSize = 0 }: DynamicCollapseAction,\n) => {\n  const remainingUncollpasedItems = items.filter(\n    (i) => i.collapsible === \"dynamic\" && !i.collapsed && i !== overflowItem,\n  );\n  const lastUncollapsedItem = remainingUncollpasedItems.pop();\n\n  return items.map((item) => {\n    if (item === overflowItem) {\n      return {\n        ...item,\n        collapsing: false,\n        collapsed: true,\n        fullSize: item.size,\n        minSize,\n        size: collapsedSize,\n      };\n    }\n    if (item === lastUncollapsedItem) {\n      return {\n        ...item,\n        collapsing: true,\n      };\n    }\n    return item;\n  });\n};\n\nconst addSourceItem = (\n  items: OverflowItem<any>[],\n  { idRoot, source }: SourceAction,\n): OverflowItem[] => {\n  const index = items.length;\n  return items.concat(sourceItem(source, `${idRoot}-${index}`, index));\n};\n\nconst removeItem = (\n  items: OverflowItem<any>[],\n  { indexPosition }: RemoveItemAction,\n): OverflowItem[] => {\n  return items.slice(0, indexPosition).concat(items.slice(indexPosition + 1));\n};\n\nconst addOverflowIndicator = (\n  items: OverflowItem<any>[],\n  { overflowItem }: SingleItemAction,\n) => {\n  // Guard against accidental duplicate overflowIndicator\n  if (!items.find((i) => i.isOverflowIndicator)) {\n    if (items.find((i) => i.label === \"Add Tab\")) {\n      const [addTab] = items.slice(-1);\n      return items\n        .slice(0, -1)\n        .concat({ ...overflowItem, index: addTab.index })\n        .concat({ ...addTab, index: overflowItem.index });\n    }\n    return items.concat(overflowItem);\n  }\n  return items;\n};\n\nexport const overflowReducer: OverflowReducer = (state, action) => {\n  switch (action.type) {\n    case \"init\":\n      return action.overflowItems ?? state;\n    case \"add-overflow-indicator\":\n      return addOverflowIndicator(state, action);\n\n    case \"update-items\":\n      return updateItems(state, action);\n\n    case \"replace-item\":\n      return replaceItem(state, action);\n\n    case \"update-items-add-overflow-indicator\":\n      return addOverflowIndicator(\n        updateItems(state, {\n          type: \"update-items\",\n          overflowItems: action.overflowItems,\n        }),\n        { type: \"add-overflow-indicator\", overflowItem: action.overflowItem },\n      );\n\n    case \"update-items-remove-overflow-indicator\":\n      return updateItems(state, {\n        type: \"update-items\",\n        overflowItems: action.overflowItems,\n      }).filter((item) => !item.isOverflowIndicator);\n\n    case \"collapsing-item\":\n      return collapsingItem(state, action);\n\n    case \"collapse-dynamic-item\":\n      return collapseDynamicItem(state, action);\n\n    case \"uncollapse-dynamic-item\":\n      return uncollapseDynamicItem(state, action);\n\n    case \"restore-collapsing-item\":\n      return restoreCollapsingItem(state);\n\n    case \"collapse-instant-item\":\n      return collapseInstantItem(state, action);\n\n    case \"add-source-item\":\n      return addSourceItem(state, action);\n\n    case \"remove-item\":\n      return removeItem(state, action);\n\n    default:\n      return state;\n  }\n};\n"],"names":["injectedItem","collapsingItem"],"mappings":"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"}

package/dist-es/responsive/overflowUtils.js

@@ -0,0 +1,126 @@
+import { jsx } from 'react/jsx-runtime';
+
+const DropdownPlaceholder = () => null;
+const getDropdownPlaceholder = () => /* @__PURE__ */ jsx(DropdownPlaceholder, {});
+const NO_DATA = {};
+const LEFT_RIGHT = ["left", "right"];
+const TOP_BOTTOM = ["top", "bottom"];
+const allExceptOverflowIndicator = (sum, m) => sum + (m.isOverflowIndicator ? 0 : m.size);
+const isCollapsed = (item) => item.collapsed === true;
+const isCollapsing = (item) => item.collapsing === true;
+const isCollapsedOrCollapsing = (item) => isCollapsed(item) || isCollapsing(item);
+const isOverflowed = (item) => item.overflowed === true;
+const notOverflowed = (item) => !isOverflowed(item);
+const isCollapsible = (item) => item.collapsible === "instant" || item.collapsible === "dynamic";
+const getIsOverflowed = (managedItems) => managedItems.some(isOverflowed);
+const measureContainer = (ref, orientation = "horizontal") => {
+  const innerElement = ref.current;
+  const container = innerElement.parentElement;
+  if (container) {
+    const { width: innerWidth, height: innerHeight } = innerElement.getBoundingClientRect();
+    const { width, height } = container.getBoundingClientRect();
+    if (orientation === "horizontal") {
+      return {
+        innerContainerSize: innerWidth,
+        rootContainerDepth: height,
+        innerContainerDepth: innerHeight
+      };
+    }
+    return {
+      innerContainerSize: innerHeight,
+      rootContainerDepth: width,
+      innerContainerDepth: innerWidth
+    };
+  }
+  throw Error("measureContainer, innerContainer has no parent element");
+};
+const isContainerOverflowing = (containerDepth, parentContainerDepth, innerElement, orientation) => {
+  const isHorizontal = orientation === "horizontal";
+  if (containerDepth > parentContainerDepth) {
+    return true;
+  }
+  const { bottom, right } = innerElement.getBoundingClientRect();
+  const maxPos = Array.from(innerElement.childNodes).reduce(
+    (maxVal, child) => {
+      const rect = child.getBoundingClientRect();
+      return Math.max(isHorizontal ? rect.bottom : rect.right, maxVal);
+    },
+    isHorizontal ? bottom : right
+  );
+  return isHorizontal ? maxPos > bottom : maxPos > right;
+};
+const measureContainerOverflow = (ref, orientation = "horizontal") => {
+  const { innerContainerDepth, innerContainerSize, rootContainerDepth } = measureContainer(ref, orientation);
+  const innerElement = ref.current;
+  const isOverflowing = isContainerOverflowing(
+    innerContainerDepth,
+    rootContainerDepth,
+    innerElement,
+    orientation
+  );
+  return { isOverflowing, innerContainerSize, rootContainerDepth };
+};
+function measureElementSize(element, dimension = "width", includeAutoMargin = false) {
+  const { [dimension]: size } = element.getBoundingClientRect();
+  const { padEnd = false, padStart = false } = element.dataset;
+  const style = getComputedStyle(element);
+  const [start, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padStart && !includeAutoMargin ? 0 : Number.parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padEnd && !includeAutoMargin ? 0 : Number.parseInt(style.getPropertyValue(`margin-${end}`), 10);
+  let minWidth = size;
+  const flexShrink = Number.parseInt(style.getPropertyValue("flex-shrink"), 10);
+  if (flexShrink > 0) {
+    const flexBasis = Number.parseInt(style.getPropertyValue("flex-basis"), 10);
+    if (!Number.isNaN(flexBasis) && flexBasis > 0) {
+      minWidth = flexBasis;
+    }
+  }
+  return marginStart + minWidth + marginEnd;
+}
+const byDescendingPriority = (m1, m2) => {
+  let result = m1.priority - m2.priority;
+  if (result === 0) {
+    result = m1.index - m2.index;
+  }
+  return result;
+};
+const getOverflowIndicator = (managedItems) => managedItems.find((item) => item.isOverflowIndicator);
+const getPriority = (item) => item.priority;
+const popNextItemByPriority = (items) => {
+  const maxPriority = Math.max(...items.map(getPriority));
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (!items[i].isOverflowIndicator && items[i].priority === maxPriority) {
+      return items.splice(i, 1)[0];
+    }
+  }
+  return null;
+};
+const measureOverflowItems = (items, dimension) => {
+  const measurements = items.map(({ id }) => {
+    const childElement = document.getElementById(id);
+    const size = childElement ? measureElementSize(childElement, dimension) : 0;
+    return size;
+  });
+  if (measurements.some((size, i) => size !== items[i].size)) {
+    return items.map(
+      (item, i) => item.size === measurements[i] ? item : {
+        ...item,
+        size: measurements[i]
+      }
+    );
+  }
+  return items;
+};
+const addAll = (sum, m) => sum + m.size;
+const getElementForItem = (ref, item) => ref.current.querySelector(
+  `:scope > [data-index='${item.index}']`
+);
+const getRuntimePadding = (el, ...dimensions) => {
+  const targetStyle = getComputedStyle(el);
+  return dimensions.map(
+    (dimension) => Number.parseInt(targetStyle.getPropertyValue(`padding-${dimension}`), 10)
+  );
+};
+
+export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority };
+//# sourceMappingURL=overflowUtils.js.map

package/dist-es/responsive/overflowUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflowUtils.js","sources":["../src/responsive/overflowUtils.tsx"],"sourcesContent":["import type {\n  ElementRef,\n  OverflowItem,\n  orientationType,\n} from \"./overflowTypes\";\n\nexport const DropdownPlaceholder = () => null;\nexport const getDropdownPlaceholder = () => <DropdownPlaceholder />;\n\nexport type heightOrWidth = \"width\" | \"height\";\nexport const NO_DATA = {};\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n\nexport const allExceptOverflowIndicator = (sum: number, m: OverflowItem) =>\n  sum + (m.isOverflowIndicator ? 0 : m.size);\n\nexport const isCollapsed = (item: OverflowItem): boolean =>\n  item.collapsed === true;\nexport const isCollapsing = (item: OverflowItem): boolean =>\n  item.collapsing === true;\nexport const isCollapsedOrCollapsing = (item: OverflowItem): boolean =>\n  isCollapsed(item) || isCollapsing(item);\nexport const isOverflowed = (item: OverflowItem): boolean =>\n  item.overflowed === true;\nexport const notOverflowed = (item: OverflowItem): boolean =>\n  !isOverflowed(item);\n\nexport const isCollapsible = (item: OverflowItem) =>\n  item.collapsible === \"instant\" || item.collapsible === \"dynamic\";\n\nexport const getIsOverflowed = (managedItems: OverflowItem[]) =>\n  managedItems.some(isOverflowed);\n\nexport const measureContainer = (\n  ref: ElementRef,\n  orientation: orientationType = \"horizontal\",\n): {\n  innerContainerSize: number;\n  rootContainerDepth: number;\n  innerContainerDepth: number;\n} => {\n  const innerElement = ref.current as HTMLElement;\n  const container = innerElement.parentElement;\n  if (container) {\n    const { width: innerWidth, height: innerHeight } =\n      innerElement.getBoundingClientRect();\n    const { width, height } = container.getBoundingClientRect();\n    if (orientation === \"horizontal\") {\n      return {\n        innerContainerSize: innerWidth,\n        rootContainerDepth: height,\n        innerContainerDepth: innerHeight,\n      };\n    }\n    return {\n      innerContainerSize: innerHeight,\n      rootContainerDepth: width,\n      innerContainerDepth: innerWidth,\n    };\n  }\n  throw Error(\"measureContainer, innerContainer has no parent element\");\n};\n\nconst isContainerOverflowing = (\n  containerDepth: number,\n  parentContainerDepth: number,\n  innerElement: HTMLElement,\n  orientation: orientationType,\n) => {\n  const isHorizontal = orientation === \"horizontal\";\n  // If true, this is a reliable indication of content wrapping, but the containerDepth\n  // is not always correct\n  if (containerDepth > parentContainerDepth) {\n    return true;\n  }\n  // ... hence - expensive, but catches those situations where the containerDepth is wrong\n  const { bottom, right } = innerElement.getBoundingClientRect();\n  const maxPos = Array.from(innerElement.childNodes).reduce<number>(\n    (maxVal, child) => {\n      const rect = (child as HTMLElement).getBoundingClientRect();\n      return Math.max(isHorizontal ? rect.bottom : rect.right, maxVal);\n    },\n    isHorizontal ? bottom : right,\n  );\n  return isHorizontal ? maxPos > bottom : maxPos > right;\n};\n\nexport const measureContainerOverflow = (\n  ref: ElementRef,\n  orientation: orientationType = \"horizontal\",\n): {\n  isOverflowing: boolean;\n  innerContainerSize: number;\n  rootContainerDepth: number;\n} => {\n  const { innerContainerDepth, innerContainerSize, rootContainerDepth } =\n    measureContainer(ref, orientation);\n  const innerElement = ref.current as HTMLElement;\n  const isOverflowing = isContainerOverflowing(\n    innerContainerDepth,\n    rootContainerDepth,\n    innerElement,\n    orientation,\n  );\n\n  return { isOverflowing, innerContainerSize, rootContainerDepth };\n};\n\n/**\n * Compute element size including margin.\n * Exclude margin where this has been applied for alignment, via margin: auto\n * which can be identified by the data-pad-end, data-pad-start attributes.\n **/\nexport function measureElementSize(\n  element: HTMLElement,\n  dimension: heightOrWidth = \"width\",\n  includeAutoMargin = false,\n): number {\n  const { [dimension]: size } = element.getBoundingClientRect();\n  const { padEnd = false, padStart = false } = element.dataset;\n  const style = getComputedStyle(element);\n  const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n  const marginStart =\n    padStart && !includeAutoMargin\n      ? 0\n      : Number.parseInt(style.getPropertyValue(`margin-${start}`), 10);\n  const marginEnd =\n    padEnd && !includeAutoMargin\n      ? 0\n      : Number.parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n  let minWidth = size;\n  const flexShrink = Number.parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n  if (flexShrink > 0) {\n    const flexBasis = Number.parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n    // TODO should we consider percentage values ?\n    // TODO are we still using flexBasis ?\n    if (!Number.isNaN(flexBasis) && flexBasis > 0) {\n      minWidth = flexBasis;\n    }\n  }\n\n  return marginStart + minWidth + marginEnd;\n}\n\nexport const byDescendingPriority = (m1: OverflowItem, m2: OverflowItem) => {\n  let result = m1.priority - m2.priority;\n  if (result === 0) {\n    result = m1.index - m2.index;\n  }\n  return result;\n};\n\n// Helper function to try and determine the display label for an overflow item\n// Currently, Tab uses data-text, so this works for any Tab. Need to decide\n// whether this is appropriate for other components.\n// Note: Tab uses data-text for another reason, it is not implemented there just to\n// support this function.\n// There may be an aria attribute we should use instead\n// function getElementText(element: HTMLElement) {\n//   if (element.dataset.text) {\n//     return element.dataset.text;\n//   }\n//   const textNode = element.querySelector(\"[data-text]\") as HTMLElement;\n//   if (textNode) {\n//     return textNode.dataset.text;\n//   }\n//   return \"\";\n// }\n// const asCollapsibleType = (value?: string): collapsibleType | undefined =>\n//   value === \"instant\" || value == \"dynamic\"\n//     ? (value as collapsibleType)\n//     : undefined;\n\nexport const getOverflowIndicator = (managedItems: OverflowItem[]) =>\n  managedItems.find((item) => item.isOverflowIndicator);\n\n// TODO whats the right way to deduce the label. AccessibleText added\n// to eg delete button makes innerText unreliable.\n// const getLabelForElement = (element: HTMLElement) =>\n//   element.title || getElementText(element) || element.innerText;\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nexport const popNextItemByPriority = (\n  items: OverflowItem[],\n): OverflowItem | null => {\n  const maxPriority = Math.max(...items.map(getPriority));\n  for (let i = items.length - 1; i >= 0; i--) {\n    if (!items[i].isOverflowIndicator && items[i].priority === maxPriority) {\n      return items.splice(i, 1)[0];\n    }\n  }\n  return null;\n};\n\nexport const measureOverflowItems = (\n  items: OverflowItem[],\n  dimension: heightOrWidth,\n): OverflowItem[] => {\n  const measurements = items.map(({ id }) => {\n    const childElement = document.getElementById(id);\n    const size = childElement ? measureElementSize(childElement, dimension) : 0;\n    return size;\n  });\n\n  if (measurements.some((size, i) => size !== items[i].size)) {\n    return items.map((item, i) =>\n      item.size === measurements[i]\n        ? item\n        : {\n            ...item,\n            size: measurements[i],\n          },\n    );\n  }\n  return items;\n};\n\nexport const addAll = (sum: number, m: OverflowItem): number => sum + m.size;\n\nexport const getElementForItem = (ref: ElementRef, item: OverflowItem) =>\n  ref.current!.querySelector(\n    `:scope > [data-index='${item.index}']`,\n  ) as HTMLElement;\n\ntype dimension = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nexport const getRuntimePadding = (\n  el: HTMLElement,\n  ...dimensions: dimension[]\n): number[] => {\n  const targetStyle = getComputedStyle(el);\n  return dimensions.map((dimension) =>\n    Number.parseInt(targetStyle.getPropertyValue(`padding-${dimension}`), 10),\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useDynamicCollapse.js

@@ -0,0 +1,144 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState, useCallback } from 'react';
+import { measureElementSize, getElementForItem, getRuntimePadding, measureContainerOverflow, isCollapsible, isCollapsed, byDescendingPriority } from './overflowUtils.js';
+
+const UNCOLLAPSED_DYNAMIC_ITEMS = '[data-collapsible="dynamic"]:not([data-collapsed="true"]):not([data-collapsing="true"])';
+const hasUncollapsedDynamicItems = (containerRef) => {
+  var _a;
+  return ((_a = containerRef.current) == null ? void 0 : _a.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS)) !== null;
+};
+const thereAreCollapsibleItemsAndTheyAreAllCollapsed = (items) => {
+  const collapsibleItems = items.filter(isCollapsible);
+  return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);
+};
+const nextItemToCollapse = (listItems) => listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];
+const useDynamicCollapse = ({
+  collectionHook,
+  overflowItemsRef: managedItemsRef,
+  overflowContainerRef: ref,
+  orientation
+}) => {
+  const { dispatch } = collectionHook;
+  const [newCollapsingItem, setNewCollapsingItem] = useState(null);
+  const restoreCollapsingItem = useCallback(() => {
+    dispatch({
+      type: "restore-collapsing-item"
+    });
+  }, [dispatch]);
+  const collapseCollapsingItem = useCallback(
+    (item, target, minSize) => {
+      const styleDimension = orientation === "horizontal" ? "minWidth" : "minHeight";
+      target.style[styleDimension] = `${minSize}px`;
+      const size = measureElementSize(target);
+      dispatch({
+        type: "collapse-dynamic-item",
+        overflowItem: item,
+        collapsedSize: size,
+        minSize
+      });
+    },
+    [dispatch, orientation]
+  );
+  const checkDynamicContent = useCallback(
+    (containerHasGrown) => {
+      const { current: managedItems } = managedItemsRef;
+      const collapsingChild = managedItems.find(
+        ({ collapsible, collapsing }) => collapsible === "dynamic" && collapsing
+      );
+      const collapsedChild = managedItems.find(
+        ({ collapsible, collapsed }) => collapsible === "dynamic" && collapsed
+      );
+      if (!collapsingChild && !collapsedChild) {
+        return;
+      }
+      if (collapsedChild && !collapsingChild) {
+        dispatch({
+          type: "uncollapse-dynamic-item",
+          overflowItem: collapsedChild
+        });
+      } else if (collapsingChild) {
+        if (containerHasGrown && collapsedChild) {
+          const collapsingElement = getElementForItem(ref, collapsingChild);
+          const dimension = orientation === "horizontal" ? "width" : "height";
+          const size = measureElementSize(collapsingElement, dimension);
+          if (collapsedChild && size === collapsingChild.size) {
+            restoreCollapsingItem();
+          }
+        } else {
+          const dimension = orientation === "horizontal" ? "width" : "height";
+          const collapsingElement = getElementForItem(ref, collapsingChild);
+          const { [dimension]: measuredSizeOfCollapsingElement } = collapsingElement.getBoundingClientRect();
+          const [padStart, padEnd] = getRuntimePadding(
+            collapsingElement,
+            "left",
+            "right"
+          );
+          const lastTooltrayItem = collapsingElement.querySelector(
+            ".Responsive-inner > :last-child"
+          );
+          if (lastTooltrayItem) {
+            const { [dimension]: childMinSize } = lastTooltrayItem.getBoundingClientRect();
+            const minSize = padStart + childMinSize + padEnd;
+            if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {
+              collapseCollapsingItem(
+                collapsingChild,
+                collapsingElement,
+                minSize
+              );
+            }
+          }
+        }
+      }
+    },
+    [
+      collapseCollapsingItem,
+      dispatch,
+      managedItemsRef,
+      orientation,
+      ref,
+      restoreCollapsingItem
+    ]
+  );
+  const handleResize = useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = managedItemsRef;
+      const { isOverflowing: willOverflow } = measureContainerOverflow(
+        ref,
+        orientation
+      );
+      const collapsingItem = managedItems.find((item) => item.collapsing);
+      if (collapsingItem) {
+        checkDynamicContent(containerHasGrown);
+      } else if (containerHasGrown && !willOverflow && thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)) {
+        checkDynamicContent(true);
+      }
+    },
+    [checkDynamicContent, managedItemsRef, orientation, ref]
+  );
+  const resetMeasurements = useCallback(() => {
+    const { current: managedItems } = managedItemsRef;
+    const hasDynamicItems = hasUncollapsedDynamicItems(ref);
+    if (hasDynamicItems) {
+      const collapsingItem = nextItemToCollapse(managedItems);
+      setNewCollapsingItem(collapsingItem);
+      dispatch({
+        type: "collapsing-item",
+        overflowItem: collapsingItem
+      });
+      return true;
+    }
+    return false;
+  }, [dispatch, managedItemsRef, ref]);
+  useIsomorphicLayoutEffect(() => {
+    if (newCollapsingItem) {
+      checkDynamicContent(false);
+    }
+  }, [checkDynamicContent, newCollapsingItem]);
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+export { useDynamicCollapse };
+//# sourceMappingURL=useDynamicCollapse.js.map

package/dist-es/responsive/useDynamicCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicCollapse.js","sources":["../src/responsive/useDynamicCollapse.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useState } from \"react\";\nimport type {\n  DynamicCollapseHookResult,\n  ElementRef,\n  OverflowHookProps,\n  OverflowItem,\n} from \"./overflowTypes\";\nimport {\n  byDescendingPriority,\n  getElementForItem,\n  getRuntimePadding,\n  isCollapsed,\n  isCollapsible,\n  measureContainerOverflow,\n  measureElementSize,\n} from \"./overflowUtils\";\n\nconst UNCOLLAPSED_DYNAMIC_ITEMS =\n  '[data-collapsible=\"dynamic\"]:not([data-collapsed=\"true\"]):not([data-collapsing=\"true\"])';\n\nconst hasUncollapsedDynamicItems = (containerRef: ElementRef) =>\n  containerRef.current?.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;\n\nconst thereAreCollapsibleItemsAndTheyAreAllCollapsed = (\n  items: OverflowItem[],\n) => {\n  const collapsibleItems = items.filter(isCollapsible);\n  return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);\n};\n\nconst nextItemToCollapse = (listItems: OverflowItem[]): OverflowItem =>\n  listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];\n\nexport const useDynamicCollapse = ({\n  collectionHook,\n  overflowItemsRef: managedItemsRef,\n  overflowContainerRef: ref,\n  orientation,\n}: OverflowHookProps): DynamicCollapseHookResult => {\n  const { dispatch } = collectionHook;\n  const [newCollapsingItem, setNewCollapsingItem] =\n    useState<OverflowItem | null>(null);\n  const restoreCollapsingItem = useCallback(() => {\n    dispatch({\n      type: \"restore-collapsing-item\",\n    });\n  }, [dispatch]);\n\n  const collapseCollapsingItem = useCallback(\n    (item: OverflowItem, target: HTMLElement, minSize: number) => {\n      const styleDimension =\n        orientation === \"horizontal\" ? \"minWidth\" : \"minHeight\";\n      // TODO do we really want to do this here ?\n      target.style[styleDimension] = `${minSize}px`;\n      const size = measureElementSize(target);\n\n      dispatch({\n        type: \"collapse-dynamic-item\",\n        overflowItem: item,\n        collapsedSize: size,\n        minSize,\n      });\n    },\n    [dispatch, orientation],\n  );\n\n  const checkDynamicContent = useCallback(\n    (containerHasGrown?: boolean) => {\n      const { current: managedItems } = managedItemsRef;\n      // The order must matter here\n      const collapsingChild = managedItems.find(\n        ({ collapsible, collapsing }) =>\n          collapsible === \"dynamic\" && collapsing,\n      );\n      const collapsedChild = managedItems.find(\n        ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed,\n      );\n\n      if (!collapsingChild && !collapsedChild) {\n        return;\n      }\n      if (collapsedChild && !collapsingChild) {\n        // TODO do we need a check to see whether we now have enough space to completely uncollapse the item ?\n        // We may be able to uncollapse one or more items before the one we set to collapsing\n\n        dispatch({\n          type: \"uncollapse-dynamic-item\",\n          overflowItem: collapsedChild,\n        });\n      } else if (collapsingChild) {\n        if (containerHasGrown && collapsedChild) {\n          const collapsingElement = getElementForItem(ref, collapsingChild);\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          // can we avoid measuring ths element on every resize event ?\n          const size = measureElementSize(collapsingElement, dimension);\n          // collapsingElement.getBoundingClientRect();\n\n          // We don't restore a collapsing item unless there is at least one collapsed item\n          if (collapsedChild && size === collapsingChild.size) {\n            restoreCollapsingItem();\n          }\n        } else {\n          // Note we are going to compare width with minWidth. Margin is ignored\n          // use getBoundingClientRect rather than measureNode\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          const collapsingElement = getElementForItem(ref, collapsingChild);\n          const { [dimension]: measuredSizeOfCollapsingElement } =\n            collapsingElement.getBoundingClientRect();\n          // minsize should be the size of the last item in the tooltray\n          const [padStart, padEnd] = getRuntimePadding(\n            collapsingElement,\n            \"left\",\n            \"right\",\n          );\n          //TODO we don't really want to measure the last item in the collapsing container\n          // we want to measure the width of the item that will be the last to overflow.\n          const lastTooltrayItem = collapsingElement.querySelector(\n            \".Responsive-inner > :last-child\",\n          );\n          if (lastTooltrayItem) {\n            const { [dimension]: childMinSize } =\n              lastTooltrayItem.getBoundingClientRect();\n            const minSize = padStart + childMinSize + padEnd;\n            if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {\n              collapseCollapsingItem(\n                collapsingChild,\n                collapsingElement,\n                minSize,\n              );\n            }\n          }\n        }\n      }\n    },\n    [\n      collapseCollapsingItem,\n      dispatch,\n      managedItemsRef,\n      orientation,\n      ref,\n      restoreCollapsingItem,\n    ],\n  );\n\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { current: managedItems } = managedItemsRef;\n      const { isOverflowing: willOverflow } = measureContainerOverflow(\n        ref,\n        orientation,\n      );\n\n      const collapsingItem = managedItems.find((item) => item.collapsing);\n\n      if (collapsingItem) {\n        checkDynamicContent(containerHasGrown);\n      } else if (\n        containerHasGrown &&\n        !willOverflow &&\n        thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)\n      ) {\n        checkDynamicContent(true);\n      }\n    },\n    [checkDynamicContent, managedItemsRef, orientation, ref],\n  );\n\n  const resetMeasurements = useCallback(() => {\n    const { current: managedItems } = managedItemsRef;\n    const hasDynamicItems = hasUncollapsedDynamicItems(ref);\n    if (hasDynamicItems) {\n      const collapsingItem = nextItemToCollapse(managedItems);\n      setNewCollapsingItem(collapsingItem);\n\n      dispatch({\n        type: \"collapsing-item\",\n        overflowItem: collapsingItem,\n      });\n      return true;\n    }\n    return false;\n  }, [dispatch, managedItemsRef, ref]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (newCollapsingItem) {\n      checkDynamicContent(false);\n    }\n  }, [checkDynamicContent, newCollapsingItem]);\n\n  return {\n    onResize: handleResize,\n    resetMeasurements,\n  };\n};\n"],"names":[],"mappings":";;;;AAkBA,MAAM,yBACJ,GAAA,yFAAA;AAEF,MAAM,0BAAA,GAA6B,CAAC,YAA0B,KAAA;AArB9D,EAAA,IAAA,EAAA;AAsBE,EAAa,OAAA,CAAA,CAAA,EAAA,GAAA,YAAA,CAAA,OAAA,KAAb,IAAsB,GAAA,MAAA,GAAA,EAAA,CAAA,aAAA,CAAc,yBAA+B,CAAA,MAAA,IAAA;AAAA,CAAA;AAErE,MAAM,8CAAA,GAAiD,CACrD,KACG,KAAA;AACH,EAAM,MAAA,gBAAA,GAAmB,KAAM,CAAA,MAAA,CAAO,aAAa,CAAA;AACnD,EAAA,OAAO,gBAAiB,CAAA,MAAA,GAAS,CAAK,IAAA,gBAAA,CAAiB,MAAM,WAAW,CAAA;AAC1E,CAAA;AAEA,MAAM,kBAAqB,GAAA,CAAC,SAC1B,KAAA,SAAA,CAAU,MAAO,CAAA,aAAa,CAAE,CAAA,IAAA,CAAK,oBAAoB,CAAA,CAAE,KAAM,CAAA,EAAE,EAAE,CAAC,CAAA;AAEjE,MAAM,qBAAqB,CAAC;AAAA,EACjC,cAAA;AAAA,EACA,gBAAkB,EAAA,eAAA;AAAA,EAClB,oBAAsB,EAAA,GAAA;AAAA,EACtB;AACF,CAAoD,KAAA;AAClD,EAAM,MAAA,EAAE,UAAa,GAAA,cAAA;AACrB,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5C,SAA8B,IAAI,CAAA;AACpC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACP,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,IAAoB,EAAA,MAAA,EAAqB,OAAoB,KAAA;AAC5D,MAAM,MAAA,cAAA,GACJ,WAAgB,KAAA,YAAA,GAAe,UAAa,GAAA,WAAA;AAE9C,MAAA,MAAA,CAAO,KAAM,CAAA,cAAc,CAAI,GAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAA;AACzC,MAAM,MAAA,IAAA,GAAO,mBAAmB,MAAM,CAAA;AAEtC,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,uBAAA;AAAA,QACN,YAAc,EAAA,IAAA;AAAA,QACd,aAAe,EAAA,IAAA;AAAA,QACf;AAAA,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,GACxB;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,iBAAgC,KAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA;AAElC,MAAA,MAAM,kBAAkB,YAAa,CAAA,IAAA;AAAA,QACnC,CAAC,EAAE,WAAA,EAAa,UAAW,EAAA,KACzB,gBAAgB,SAAa,IAAA;AAAA,OACjC;AACA,MAAA,MAAM,iBAAiB,YAAa,CAAA,IAAA;AAAA,QAClC,CAAC,EAAE,WAAA,EAAa,SAAU,EAAA,KAAM,gBAAgB,SAAa,IAAA;AAAA,OAC/D;AAEA,MAAI,IAAA,CAAC,eAAmB,IAAA,CAAC,cAAgB,EAAA;AACvC,QAAA;AAAA;AAEF,MAAI,IAAA,cAAA,IAAkB,CAAC,eAAiB,EAAA;AAItC,QAAS,QAAA,CAAA;AAAA,UACP,IAAM,EAAA,yBAAA;AAAA,UACN,YAAc,EAAA;AAAA,SACf,CAAA;AAAA,iBACQ,eAAiB,EAAA;AAC1B,QAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,UAAM,MAAA,iBAAA,GAAoB,iBAAkB,CAAA,GAAA,EAAK,eAAe,CAAA;AAChE,UAAM,MAAA,SAAA,GAAY,WAAgB,KAAA,YAAA,GAAe,OAAU,GAAA,QAAA;AAE3D,UAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAI5D,UAAI,IAAA,cAAA,IAAkB,IAAS,KAAA,eAAA,CAAgB,IAAM,EAAA;AACnD,YAAsB,qBAAA,EAAA;AAAA;AACxB,SACK,MAAA;AAGL,UAAM,MAAA,SAAA,GAAY,WAAgB,KAAA,YAAA,GAAe,OAAU,GAAA,QAAA;AAC3D,UAAM,MAAA,iBAAA,GAAoB,iBAAkB,CAAA,GAAA,EAAK,eAAe,CAAA;AAChE,UAAA,MAAM,EAAE,CAAC,SAAS,GAAG,+BAAgC,EAAA,GACnD,kBAAkB,qBAAsB,EAAA;AAE1C,UAAM,MAAA,CAAC,QAAU,EAAA,MAAM,CAAI,GAAA,iBAAA;AAAA,YACzB,iBAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA,WACF;AAGA,UAAA,MAAM,mBAAmB,iBAAkB,CAAA,aAAA;AAAA,YACzC;AAAA,WACF;AACA,UAAA,IAAI,gBAAkB,EAAA;AACpB,YAAA,MAAM,EAAE,CAAC,SAAS,GAAG,YAAa,EAAA,GAChC,iBAAiB,qBAAsB,EAAA;AACzC,YAAM,MAAA,OAAA,GAAU,WAAW,YAAe,GAAA,MAAA;AAC1C,YAAA,IAAI,IAAK,CAAA,KAAA,CAAM,+BAA+B,CAAA,IAAK,OAAS,EAAA;AAC1D,cAAA,sBAAA;AAAA,gBACE,eAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA,eACF;AAAA;AACF;AACF;AACF;AACF,KACF;AAAA,IACA;AAAA,MACE,sBAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAc,iBAAgC,KAAA;AAC7C,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA;AAClC,MAAM,MAAA,EAAE,aAAe,EAAA,YAAA,EAAiB,GAAA,wBAAA;AAAA,QACtC,GAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,MAAM,iBAAiB,YAAa,CAAA,IAAA,CAAK,CAAC,IAAA,KAAS,KAAK,UAAU,CAAA;AAElE,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,mBAAA,CAAoB,iBAAiB,CAAA;AAAA,iBAErC,iBACA,IAAA,CAAC,YACD,IAAA,8CAAA,CAA+C,YAAY,CAC3D,EAAA;AACA,QAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,mBAAA,EAAqB,eAAiB,EAAA,WAAA,EAAa,GAAG;AAAA,GACzD;AAEA,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA;AAClC,IAAM,MAAA,eAAA,GAAkB,2BAA2B,GAAG,CAAA;AACtD,IAAA,IAAI,eAAiB,EAAA;AACnB,MAAM,MAAA,cAAA,GAAiB,mBAAmB,YAAY,CAAA;AACtD,MAAA,oBAAA,CAAqB,cAAc,CAAA;AAEnC,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,iBAAA;AAAA,QACN,YAAc,EAAA;AAAA,OACf,CAAA;AACD,MAAO,OAAA,IAAA;AAAA;AAET,IAAO,OAAA,KAAA;AAAA,GACN,EAAA,CAAC,QAAU,EAAA,eAAA,EAAiB,GAAG,CAAC,CAAA;AAEnC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA;AAC3B,GACC,EAAA,CAAC,mBAAqB,EAAA,iBAAiB,CAAC,CAAA;AAE3C,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}