react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/picker/WheelPicker.js

@@ -0,0 +1,473 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FlatList, Platform, View, StyleSheet, PanResponder } from 'react-native';
+import { clamp } from '../../utils';
+import { findEnabledIndex } from './utils';
+const adjustIndex = (index, options) => {
+  const total = options.length;
+  if (!total) return 0;
+  const i = clamp(index, 0, total - 1);
+  const next = findEnabledIndex(options, i);
+  return next >= 0 ? next : i;
+};
+const indexToOffset = (index, itemHeight) => -index * itemHeight;
+const offsetToIndex = (offset, itemHeight, total, options) => {
+  const minOffset = -Math.max(0, total - 1) * itemHeight;
+  const off = clamp(offset, minOffset, 0);
+  let index = Math.round(-off / itemHeight);
+  index = adjustIndex(index, options);
+  const snapOffset = indexToOffset(index, itemHeight);
+  return {
+    index,
+    snapOffset
+  };
+};
+const shouldMomentum = (distance, duration) => duration < 500 && Math.abs(distance) > 8;
+const momentumTarget = (distance, duration, currentOffset, itemHeight, minOffset) => {
+  const speed = Math.abs(distance / duration);
+  const extra = speed / 0.0025 * (distance < 0 ? -1 : 1);
+  const target = clamp(currentOffset + extra, minOffset, 0);
+  const snapIndex = Math.round(-target / itemHeight);
+  return indexToOffset(snapIndex, itemHeight);
+};
+const styles = StyleSheet.create({
+  column: {
+    flex: 1
+  },
+  option: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    zIndex: 3
+  }
+});
+const getVelocityBucket = velocity => {
+  const abs = Math.abs(velocity);
+  if (abs > 1.2) return 2;
+  if (abs > 0.6) return 1;
+  return 0;
+};
+const WheelPickerInner = ({
+  data,
+  selectedIndex,
+  onChange,
+  onInteractStart,
+  onInteractEnd,
+  renderItem,
+  itemHeight,
+  visibleRest,
+  readOnly,
+  indicatorColor,
+  decelerationRate = Platform.select({
+    ios: 0.9975,
+    android: 0.989,
+    default: 0.989
+  }) ?? 'normal',
+  scrollEventThrottle = 16,
+  swipeDuration = 300
+}) => {
+  const isWeb = Platform.OS === 'web';
+  const listRef = useRef(null);
+  const spacerHeight = visibleRest * itemHeight;
+  const total = data.length;
+  const maxIndex = Math.max(0, total - 1);
+  const minOffset = -maxIndex * itemHeight;
+  const containerHeight = itemHeight * (visibleRest * 2 + 1);
+  const rawSelectedIndex = clamp(selectedIndex, 0, maxIndex);
+  const enabledSelectedIndex = findEnabledIndex(data, rawSelectedIndex);
+  const safeSelectedIndex = enabledSelectedIndex >= 0 ? enabledSelectedIndex : rawSelectedIndex;
+  const visibleCount = visibleRest * 2 + 1;
+  const initialRenderCount = Math.min(total || visibleCount, visibleCount);
+  const maxBatchRenderCount = Math.min(total || visibleCount * 2, Math.max(visibleCount * 2, 10));
+  const windowSize = total > visibleCount * 12 ? 7 : 5;
+  const batchingPeriod = total > visibleCount * 20 ? 32 : 16;
+  const effectiveScrollThrottle = total > visibleCount * 20 ? 32 : scrollEventThrottle;
+  const webVirtualEnabled = total > visibleCount * 4;
+  const Spacer = useCallback(() => /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: spacerHeight
+    }
+  }), [spacerHeight]);
+  const dragEndTimerRef = useRef(null);
+  const momentumRef = useRef(false);
+  const lastOffsetRef = useRef(0);
+  const clearDragEndTimer = useCallback(() => {
+    if (dragEndTimerRef.current) {
+      clearTimeout(dragEndTimerRef.current);
+      dragEndTimerRef.current = null;
+    }
+  }, []);
+  const emitIndexFromOffset = useCallback((offsetY, animated) => {
+    if (readOnly) return;
+    const {
+      index,
+      snapOffset
+    } = offsetToIndex(-offsetY, itemHeight, total, data);
+    const nextOffset = -snapOffset;
+    if (Math.abs(nextOffset - offsetY) > 0.5) {
+      listRef.current?.scrollToOffset({
+        offset: nextOffset,
+        animated
+      });
+    }
+    onChange(index);
+  }, [data, itemHeight, onChange, readOnly, total]);
+  useEffect(() => {
+    const offset = safeSelectedIndex * itemHeight;
+    listRef.current?.scrollToOffset({
+      offset,
+      animated: false
+    });
+  }, [itemHeight, safeSelectedIndex]);
+  const [webOffset, setWebOffset] = useState(() => indexToOffset(safeSelectedIndex, itemHeight));
+  const webOffsetRef = useRef(webOffset);
+  const startOffsetRef = useRef(0);
+  const startTimeRef = useRef(0);
+  const [webTransition, setWebTransition] = useState(0);
+  const [webVelocityBucket, setWebVelocityBucket] = useState(0);
+  const webVelocityBucketRef = useRef(0);
+  const lastWheelTimeRef = useRef(null);
+  const wheelDeltaRef = useRef(0);
+  const wheelRafRef = useRef(null);
+  const pendingIndexRef = useRef(null);
+  const pendingTimerRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const isInteractingRef = useRef(false);
+  const notifyInteractStart = useCallback(() => {
+    if (readOnly) return;
+    if (isInteractingRef.current) return;
+    isInteractingRef.current = true;
+    onInteractStart?.();
+  }, [onInteractStart, readOnly]);
+  const notifyInteractEnd = useCallback(() => {
+    if (!isInteractingRef.current) return;
+    isInteractingRef.current = false;
+    onInteractEnd?.();
+  }, [onInteractEnd]);
+  const stopRaf = useCallback(() => {
+    if (rafIdRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    if (wheelRafRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(wheelRafRef.current);
+      wheelRafRef.current = null;
+    }
+  }, []);
+  const clearPendingTimer = useCallback(() => {
+    if (pendingTimerRef.current) {
+      clearTimeout(pendingTimerRef.current);
+      pendingTimerRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      clearDragEndTimer();
+      clearPendingTimer();
+      stopRaf();
+    };
+  }, [clearDragEndTimer, clearPendingTimer, stopRaf]);
+  const setVelocityBucket = useCallback(velocity => {
+    const next = getVelocityBucket(velocity);
+    if (next !== webVelocityBucketRef.current) {
+      webVelocityBucketRef.current = next;
+      setWebVelocityBucket(next);
+    }
+  }, []);
+  const updateWheelVelocity = useCallback(delta => {
+    const now = Date.now();
+    const last = lastWheelTimeRef.current;
+    if (last != null) {
+      const dt = Math.max(1, now - last);
+      setVelocityBucket(delta / dt);
+    }
+    lastWheelTimeRef.current = now;
+  }, [setVelocityBucket]);
+  useEffect(() => {
+    if (!isWeb) return;
+    clearPendingTimer();
+    pendingIndexRef.current = null;
+    setWebTransition(0);
+    const next = indexToOffset(safeSelectedIndex, itemHeight);
+    webOffsetRef.current = next;
+    setWebOffset(next);
+  }, [clearPendingTimer, isWeb, itemHeight, safeSelectedIndex, setWebTransition]);
+  const finalizePendingChange = useCallback(() => {
+    if (readOnly) return;
+    const nextIndex = pendingIndexRef.current;
+    if (nextIndex == null) return;
+    pendingIndexRef.current = null;
+    clearPendingTimer();
+    setWebTransition(0);
+    notifyInteractEnd();
+    onChange(nextIndex);
+  }, [clearPendingTimer, onChange, readOnly, setWebTransition]);
+  const startWebSnap = useCallback(targetIndex => {
+    if (readOnly) return;
+    notifyInteractStart();
+    const clampedIndex = clamp(targetIndex, 0, maxIndex);
+    const targetOffset = indexToOffset(clampedIndex, itemHeight);
+    clearPendingTimer();
+    pendingIndexRef.current = clampedIndex;
+    webOffsetRef.current = targetOffset;
+    setWebTransition(swipeDuration);
+    setWebOffset(targetOffset);
+    if (swipeDuration <= 0) {
+      finalizePendingChange();
+    } else {
+      pendingTimerRef.current = setTimeout(finalizePendingChange, swipeDuration + 80);
+    }
+  }, [clearPendingTimer, finalizePendingChange, itemHeight, maxIndex, readOnly, swipeDuration]);
+  const handleWheel = useCallback(event => {
+    if (readOnly) return;
+    const delta = event.nativeEvent?.deltaY ?? 0;
+    if (!delta) return;
+    wheelDeltaRef.current += delta;
+    if (wheelRafRef.current != null || typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+    wheelRafRef.current = requestAnimationFrame(() => {
+      wheelRafRef.current = null;
+      const queued = wheelDeltaRef.current;
+      wheelDeltaRef.current = 0;
+      if (!queued) return;
+      updateWheelVelocity(queued);
+      const direction = queued > 0 ? 1 : -1;
+      const {
+        index
+      } = offsetToIndex(webOffsetRef.current, itemHeight, total, data);
+      const nextIndex = clamp(index + direction, 0, maxIndex);
+      startWebSnap(nextIndex);
+    });
+  }, [data, itemHeight, maxIndex, readOnly, startWebSnap, total, updateWheelVelocity]);
+  const keyExtractor = useCallback((item, idx) => `${idx}-${String(item.value ?? '')}`, []);
+  const renderListItem = useCallback(({
+    item,
+    index
+  }) => {
+    const content = renderItem(item, index);
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.option, {
+        height: itemHeight
+      }]
+    }, content);
+  }, [itemHeight, renderItem]);
+  const webIndex = useMemo(() => clamp(Math.round(-webOffset / itemHeight), 0, maxIndex), [itemHeight, maxIndex, webOffset]);
+  const webRender = useMemo(() => {
+    if (!isWeb || total <= 0) {
+      return {
+        items: null,
+        topSpacer: null,
+        bottomSpacer: null
+      };
+    }
+    let startIndex = 0;
+    let endIndex = maxIndex;
+    if (webVirtualEnabled) {
+      const baseBuffer = Math.max(visibleCount * 2, 8);
+      const velocityBoost = webVelocityBucket === 2 ? visibleCount * 4 : webVelocityBucket === 1 ? visibleCount * 2 : 0;
+      const buffer = Math.min(baseBuffer + velocityBoost, Math.max(visibleCount * 6, 24));
+      startIndex = clamp(webIndex - buffer, 0, maxIndex);
+      endIndex = clamp(webIndex + buffer, 0, maxIndex);
+    }
+    const items = [];
+    for (let index = startIndex; index <= endIndex; index += 1) {
+      const item = data[index];
+      if (!item) continue;
+      const content = renderItem(item, index);
+      items.push(/*#__PURE__*/React.createElement(View, {
+        key: `${index}-${String(item.value ?? '')}`,
+        style: [styles.option, {
+          height: itemHeight
+        }]
+      }, content));
+    }
+    const topHeight = startIndex * itemHeight;
+    const bottomHeight = (maxIndex - endIndex) * itemHeight;
+    return {
+      items,
+      topSpacer: topHeight > 0 && /*#__PURE__*/React.createElement(View, {
+        style: {
+          height: topHeight
+        }
+      }),
+      bottomSpacer: bottomHeight > 0 && /*#__PURE__*/React.createElement(View, {
+        style: {
+          height: bottomHeight
+        }
+      })
+    };
+  }, [data, isWeb, itemHeight, maxIndex, renderItem, total, visibleCount, webIndex, webVirtualEnabled, webVelocityBucket]);
+  const webTransform = useMemo(() => ({
+    transform: [{
+      translateY: webOffset
+    }]
+  }), [webOffset]);
+  const webTransitionStyle = useMemo(() => webTransition ? {
+    transitionProperty: 'transform',
+    transitionDuration: `${webTransition}ms`,
+    transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
+    willChange: 'transform'
+  } : undefined, [webTransition]);
+  const handleWebTransitionEnd = useCallback(event => {
+    const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
+    if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
+    finalizePendingChange();
+  }, [finalizePendingChange]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => !readOnly,
+    onMoveShouldSetPanResponder: () => !readOnly,
+    onPanResponderGrant: () => {
+      stopRaf();
+      pendingIndexRef.current = null;
+      notifyInteractStart();
+      setWebTransition(0);
+      startOffsetRef.current = webOffsetRef.current;
+      startTimeRef.current = Date.now();
+    },
+    onPanResponderMove: (_, gesture) => {
+      if (readOnly) return;
+      setVelocityBucket(gesture.vy);
+      const next = clamp(startOffsetRef.current + gesture.dy, minOffset, 0);
+      webOffsetRef.current = next;
+      if (typeof requestAnimationFrame === 'undefined') {
+        setWebOffset(next);
+        return;
+      }
+      if (rafIdRef.current != null) return;
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = null;
+        setWebOffset(webOffsetRef.current);
+      });
+    },
+    onPanResponderRelease: (_, gesture) => {
+      if (readOnly) return;
+      setVelocityBucket(0);
+      const duration = Date.now() - startTimeRef.current;
+      const distance = gesture.dy;
+      let target = clamp(startOffsetRef.current + distance, minOffset, 0);
+      if (shouldMomentum(distance, duration)) {
+        target = momentumTarget(distance, duration, startOffsetRef.current, itemHeight, minOffset);
+      }
+      const {
+        index
+      } = offsetToIndex(target, itemHeight, total, data);
+      startWebSnap(index);
+    },
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderTerminate: () => {
+      notifyInteractEnd();
+      setWebTransition(0);
+    }
+  }), [data, itemHeight, maxIndex, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  if (isWeb) {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [styles.column, {
+        height: containerHeight
+      }, webOnlyStyles.grab],
+      onWheel: handleWheel
+    }, panResponder.panHandlers), /*#__PURE__*/React.createElement(View, {
+      style: [styles.indicator, {
+        height: itemHeight,
+        top: itemHeight * visibleRest,
+        borderColor: indicatorColor
+      }],
+      pointerEvents: "none"
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [webTransform, isWeb ? webTransitionStyle : undefined],
+      onTransitionEnd: handleWebTransitionEnd
+    }, /*#__PURE__*/React.createElement(Spacer, null), webRender.topSpacer, webRender.items, webRender.bottomSpacer, /*#__PURE__*/React.createElement(Spacer, null)));
+  }
+  const shouldCapture = !readOnly;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.column, {
+      height: containerHeight
+    }],
+    collapsable: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.indicator, {
+      height: itemHeight,
+      top: itemHeight * visibleRest,
+      borderColor: indicatorColor
+    }],
+    pointerEvents: "none"
+  }), /*#__PURE__*/React.createElement(FlatList, {
+    ref: listRef,
+    data: data,
+    keyExtractor: keyExtractor,
+    initialScrollIndex: total > 0 ? safeSelectedIndex : undefined,
+    initialNumToRender: initialRenderCount,
+    maxToRenderPerBatch: maxBatchRenderCount,
+    windowSize: windowSize,
+    updateCellsBatchingPeriod: batchingPeriod,
+    renderItem: renderListItem,
+    getItemLayout: (_, index) => ({
+      length: itemHeight,
+      offset: spacerHeight + index * itemHeight,
+      index
+    }),
+    showsVerticalScrollIndicator: false,
+    scrollEventThrottle: effectiveScrollThrottle,
+    decelerationRate: decelerationRate,
+    snapToInterval: itemHeight,
+    snapToAlignment: "start",
+    bounces: false,
+    overScrollMode: "never",
+    nestedScrollEnabled: true,
+    onStartShouldSetResponderCapture: () => shouldCapture,
+    onMoveShouldSetResponderCapture: () => shouldCapture,
+    removeClippedSubviews: !isWeb,
+    collapsable: false,
+    ListHeaderComponent: Spacer,
+    ListFooterComponent: Spacer,
+    onScroll: e => {
+      lastOffsetRef.current = e.nativeEvent.contentOffset.y;
+    },
+    onScrollBeginDrag: () => {
+      momentumRef.current = false;
+      clearDragEndTimer();
+      notifyInteractStart();
+    },
+    onScrollEndDrag: e => {
+      if (readOnly) return;
+      const y = e.nativeEvent.contentOffset.y;
+      lastOffsetRef.current = y;
+      clearDragEndTimer();
+      dragEndTimerRef.current = setTimeout(() => {
+        if (!momentumRef.current) {
+          emitIndexFromOffset(lastOffsetRef.current, true);
+          notifyInteractEnd();
+        }
+      }, 80);
+    },
+    onMomentumScrollBegin: () => {
+      momentumRef.current = true;
+      clearDragEndTimer();
+      notifyInteractStart();
+    },
+    onMomentumScrollEnd: e => {
+      momentumRef.current = false;
+      clearDragEndTimer();
+      const y = e.nativeEvent.contentOffset.y;
+      lastOffsetRef.current = y;
+      emitIndexFromOffset(y, false);
+      notifyInteractEnd();
+    },
+    scrollEnabled: !readOnly
+  }));
+};
+const WheelPicker = /*#__PURE__*/React.memo(WheelPickerInner);
+const webOnlyStyles = StyleSheet.create({
+  grab: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    touchAction: 'none'
+  }
+});
+export default WheelPicker;

package/dist/es/picker/index.js

@@ -0,0 +1,3 @@
+import Picker from './Picker';
+export default Picker;
+export { Picker };

package/dist/es/picker/tokens.js

@@ -0,0 +1,45 @@
+import { createComponentTokensHook } from '../../design-system';
+const createPickerTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    radii
+  } = foundations;
+  return {
+    defaults: {
+      itemHeight: 44,
+      visibleItemCount: 6,
+      showToolbar: true,
+      toolbarPosition: 'top',
+      swipeDuration: 700,
+      maskType: 'gradient'
+    },
+    colors: {
+      background: '#ffffff',
+      indicator: palette.default[200] ?? '#ebedf0',
+      text: palette.default[900],
+      textMuted: palette.default[900],
+      textDisabled: palette.default[400],
+      confirm: palette.primary[600],
+      cancel: palette.default[600],
+      mask: '#ffffff'
+    },
+    spacing: {
+      toolbarHeight: 44,
+      actionPadding: spacing.lg
+    },
+    typography: {
+      optionSize: fontSize.md,
+      toolbarSize: fontSize.md,
+      fontFamily: typography.fontFamily,
+      optionWeight: typography.weight.regular,
+      toolbarWeight: typography.weight.medium
+    },
+    radius: {
+      toolbar: radii.none
+    }
+  };
+};
+export const usePickerTokens = createComponentTokensHook('picker', createPickerTokens);

package/dist/es/picker/utils.js

@@ -0,0 +1,127 @@
+import { isObject } from '../../utils';
+export const toArrayValue = value => {
+  if (Array.isArray(value)) return value.filter(v => v !== undefined && v !== null);
+  if (value === undefined || value === null) return [];
+  return [value];
+};
+const isColumnWithOptions = col => !!col && isObject(col) && 'options' in col && Array.isArray(col.options);
+const hasChildren = option => {
+  return !!option && isObject(option) && Array.isArray(option.children) && option.children.length > 0;
+};
+export const findEnabledIndex = (options, startIndex) => {
+  if (!options.length) return -1;
+  const clamp = Math.min(Math.max(startIndex, 0), options.length - 1);
+  if (!options[clamp]?.disabled) return clamp;
+  for (let i = clamp + 1; i < options.length; i += 1) {
+    if (!options[i]?.disabled) return i;
+  }
+  for (let i = clamp - 1; i >= 0; i -= 1) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+};
+const normalizeMultiple = (columnsList, defaults, rawValue) => {
+  const values = [];
+  const options = [];
+  columnsList.forEach((opts, index) => {
+    const current = rawValue[index];
+    const defaultIndex = defaults[index] !== undefined ? opts.findIndex(item => item.value === defaults[index]) : -1;
+    const currentIndex = opts.findIndex(item => item.value === current);
+    const startIndex = currentIndex >= 0 ? currentIndex : defaultIndex >= 0 ? defaultIndex : 0;
+    const targetIndex = findEnabledIndex(opts, startIndex);
+    const target = targetIndex >= 0 ? opts[targetIndex] : undefined;
+    const valid = currentIndex >= 0 && !opts[currentIndex]?.disabled;
+    values[index] = valid ? current : target?.value ?? defaults[index] ?? opts[0]?.value;
+    options[index] = target;
+  });
+  return {
+    columns: columnsList,
+    values,
+    options
+  };
+};
+const normalizeCascade = (rootOptions, rawValue) => {
+  const columns = [];
+  const values = [];
+  const options = [];
+  let currentOptions = rootOptions;
+  let depth = 0;
+  while (currentOptions && currentOptions.length && depth < 10) {
+    columns.push(currentOptions);
+    const current = rawValue[depth];
+    const startIndex = currentOptions.findIndex(item => item.value === current || String(item.value) === String(current));
+    const targetIndex = findEnabledIndex(currentOptions, startIndex >= 0 ? startIndex : 0);
+    const target = targetIndex >= 0 ? currentOptions[targetIndex] : currentOptions[0];
+    values[depth] = target?.value;
+    options[depth] = target;
+    if (target && hasChildren(target)) {
+      currentOptions = target.children;
+      depth += 1;
+    } else {
+      break;
+    }
+  }
+  return {
+    columns,
+    values,
+    options
+  };
+};
+export const prepareColumns = (columnsInput = []) => {
+  if (!Array.isArray(columnsInput) || columnsInput.length === 0) {
+    return {
+      type: 'single',
+      columnsList: [],
+      defaults: [],
+      cascadeRoot: []
+    };
+  }
+  const everyPlainOption = columnsInput.every(item => !Array.isArray(item) && !isColumnWithOptions(item));
+  const cascade = everyPlainOption && columnsInput.some(item => hasChildren(item));
+  if (cascade) {
+    return {
+      type: 'cascade',
+      columnsList: [],
+      defaults: [],
+      cascadeRoot: columnsInput
+    };
+  }
+  const asArray = columnsInput;
+  const columnsList = [];
+  const defaults = [];
+  const treatAsSingleColumn = everyPlainOption && !cascade;
+  if (treatAsSingleColumn) {
+    columnsList.push(columnsInput);
+    defaults.push(undefined);
+  } else {
+    asArray.forEach(col => {
+      if (Array.isArray(col)) {
+        columnsList.push(col);
+        defaults.push(undefined);
+      } else if (isColumnWithOptions(col)) {
+        const c = col;
+        columnsList.push(c.options ?? []);
+        defaults.push(c.defaultValue);
+      }
+    });
+  }
+  return {
+    type: 'multiple',
+    columnsList,
+    defaults
+  };
+};
+export const normalizePicker = (prepared, rawValueInput = []) => {
+  const rawValue = Array.isArray(rawValueInput) ? rawValueInput : [];
+  if (prepared.type === 'cascade' && prepared.cascadeRoot?.length) {
+    return normalizeCascade(prepared.cascadeRoot, rawValue);
+  }
+  return normalizeMultiple(prepared.columnsList, prepared.defaults, rawValue);
+};
+export const shallowEqualArray = (a = [], b = []) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};