@commercetools-uikit/hooks/dist/commercetools-uikit-hooks.esm.js

A collection of React hooks used across some of the UI-Kit components.

import _Map from '@babel/runtime-corejs3/core-js-stable/map';
import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _bindInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/bind';
import _indexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/index-of';
import _spliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/splice';
import { useState, useCallback, useRef, useEffect, useLayoutEffect, useReducer, useDebugValue } from 'react';
import rafSchd from 'raf-schd';
import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
import { getFieldId } from '@commercetools-uikit/utils';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
import _reverseInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reverse';
import sortBy from 'lodash/sortBy';
import isNil from 'lodash/isNil';

const useToggleState = defaultValue => {
  const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
  const _useState = useState(initialValue),
    _useState2 = _slicedToArray(_useState, 2),
    isToggled = _useState2[0],
    setIsToggled = _useState2[1];
  const toggle = useCallback(forceIsToggled => {
    setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
  }, [isToggled, setIsToggled]);
  return [isToggled, toggle];
};
var useToggleState$1 = useToggleState;

const usePrevious = value => {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};
var usePrevious$1 = usePrevious;

const useFieldId = (id, createIdFn) => {
  const _useState = useState(id || createIdFn()),
    _useState2 = _slicedToArray(_useState, 2),
    internalId = _useState2[0],
    setId = _useState2[1];
  useEffect(() => {
    const props = {
      id
    };
    const state = {
      id: internalId
    };
    setId(getFieldId(props, state, createIdFn));
  }, [id, internalId, setId, createIdFn]);
  return internalId;
};
var useFieldId$1 = useFieldId;

let _mutationObserver;
const useLatest = current => {
  const storedValue = useRef(current);
  useEffect(() => {
    storedValue.current = current;
  });
  return storedValue;
};
function createMutationObserver() {
  const callbacks = new _Map();
  const observer = new MutationObserver(rafSchd((mutationsList, observer) => {
    const mutationsByTarget = _reduceInstanceProperty(mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
      const callbacksForTarget = _mutationsByTarget.get(mutation.target) ?? [];
      callbacksForTarget.push(mutation);
      _mutationsByTarget.set(mutation.target, callbacksForTarget);
      return _mutationsByTarget;
    }, new _Map());
    _forEachInstanceProperty(mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
      var _context, _context2;
      const targetCallbacks = callbacks.get(target);
      ((_context = targetCallbacks) == null ? void 0 : _bindInstanceProperty(_context2 = Function.call).call(_context2, _forEachInstanceProperty(_context), _context))?.(cb => cb(mutations, observer));
    });
  }));
  return {
    observer,
    subscribe(target, callback, options) {
      observer.observe(target, options);
      const targetCallbacks = callbacks.get(target) ?? [];
      targetCallbacks.push(callback);
      callbacks.set(target, targetCallbacks);
    },
    unsubscribe(target, callback) {
      const targetCallbacks = callbacks.get(target) ?? [];
      if (targetCallbacks.length === 1) {
        observer.disconnect();
        callbacks.delete(target);
        return;
      }
      const tcIndex = _indexOfInstanceProperty(targetCallbacks).call(targetCallbacks, callback);
      if (tcIndex !== -1) _spliceInstanceProperty(targetCallbacks).call(targetCallbacks, tcIndex, 1);
      callbacks.set(target, targetCallbacks);
    }
  };
}
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
function useMutationObserver(target, callback, options) {
  const mutationObserver = getMutationObserver();
  const storedCallback = useLatest(callback);
  const storedOptions = useLatest(options);
  useLayoutEffect(() => {
    let didUnsubscribe = false;
    const targetEl = target && 'current' in target ? target.current : target;
    if (!targetEl) return () => {};
    function cb(mutationsList, observer) {
      if (didUnsubscribe) return;
      storedCallback.current(mutationsList, observer);
    }
    mutationObserver.subscribe(targetEl, cb, storedOptions.current);
    return () => {
      didUnsubscribe = true;
      mutationObserver.unsubscribe(targetEl, cb);
    };
  }, [target, mutationObserver, storedCallback, storedOptions]);
  return mutationObserver.observer;
}

function ownKeys$2(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys$2(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys$2(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty(rows).call(rows, (items, currentItem) => {
  // @ts-ignore: index signature is confused as items might contain the initial value.
  const initialValue = currentItem[keyName];
  return _objectSpread$2(_objectSpread$2({}, items), {}, {
    // if there is an initial value: use it, otherwise default to false
    [currentItem.id]: initialValue ?? false
  });
}, {});
function selectionReducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return _objectSpread$2(_objectSpread$2({}, state), {}, {
        [action.payload]: !state[action.payload]
      });
    case 'select':
      return _objectSpread$2(_objectSpread$2({}, state), {}, {
        [action.payload]: true
      });
    case 'deselect':
      return _objectSpread$2(_objectSpread$2({}, state), {}, {
        [action.payload]: false
      });
    case 'selectAll':
      {
        var _context;
        return _reduceInstanceProperty(_context = _Object$keys(state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
          [currentItem]: true
        }), {});
      }
    case 'deselectAll':
      {
        var _context2;
        return _reduceInstanceProperty(_context2 = _Object$keys(state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
          [currentItem]: false
        }), {});
      }
    default:
      return state;
  }
}
const useRowSelection = (keyName, rows) => {
  const _useReducer = useReducer(selectionReducer, getInitialState$1(keyName, rows)),
    _useReducer2 = _slicedToArray(_useReducer, 2),
    selectionState = _useReducer2[0],
    dispatch = _useReducer2[1];
  useDebugValue(selectionState);
  const selectableRows = _mapInstanceProperty(rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
    [keyName]: selectionState[item.id]
  }));
  const toggleRow = id => dispatch({
    type: 'toggle',
    payload: id
  });
  const selectRow = id => dispatch({
    type: 'select',
    payload: id
  });
  const deselectRow = id => dispatch({
    type: 'deselect',
    payload: id
  });
  const selectAllRows = () => dispatch({
    type: 'selectAll'
  });
  const deselectAllRows = () => dispatch({
    type: 'deselectAll'
  });
  const getIsRowSelected = id => selectionState[id];
  const getNumberOfSelectedRows = () => _reduceInstanceProperty(selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
  return {
    rows: selectableRows,
    toggleRow,
    selectRow,
    deselectRow,
    selectAllRows,
    deselectAllRows,
    getIsRowSelected,
    getNumberOfSelectedRows
  };
};
var useRowSelection$1 = useRowSelection;

// we're using lodash sortBy as our default sorting fn
const sortItems = function (items, field, sortDirection) {
  let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy;
  if (!field) {
    return items;
  }
  const sortedItems = sortingFunction(items, field);
  if (sortDirection === 'desc') {
    return _reverseInstanceProperty(sortedItems).call(sortedItems);
  }
  return sortedItems;
};
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
  items: sortItems(items, field, sortDirection, sortingFunction),
  sortedBy: field,
  sortDirection
});
const useSorting = (items, field, sortDirection, sortingFunction) => {
  const _useState = useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
    _useState2 = _slicedToArray(_useState, 2),
    sortState = _useState2[0],
    setSorting = _useState2[1];
  useDebugValue(sortState);
  function onSortChange(fieldKey) {
    let nextSortDirection;
    let sortedItems;
    if (sortState.sortedBy !== fieldKey) {
      // if the intented field is not already sorted, the initial direction is 'asc'
      nextSortDirection = 'asc';
      sortedItems = sortItems(sortState.items, fieldKey, nextSortDirection);
    } else {
      var _context;
      nextSortDirection = sortState.sortDirection === 'asc' ? 'desc' : 'asc';
      sortedItems = _reverseInstanceProperty(_context = sortState.items).call(_context);
    }
    setSorting({
      items: sortedItems,
      sortedBy: fieldKey,
      sortDirection: nextSortDirection
    });
  }
  return {
    items: sortState.items,
    sortedBy: sortState.sortedBy,
    sortDirection: sortState.sortDirection,
    onSortChange
  };
};
var useSorting$1 = useSorting;

function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const applyIf$1 = (values, key) => !isNil(values[key]) ? {
  [key]: values[key]
} : {};
const defaultValues$1 = {
  page: 1,
  perPage: 20
};
const usePaginationState = function () {
  let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
  const _useState = useState(mergedValues.page),
    _useState2 = _slicedToArray(_useState, 2),
    page = _useState2[0],
    setPage = _useState2[1];
  const _useState3 = useState(mergedValues.perPage),
    _useState4 = _slicedToArray(_useState3, 2),
    perPage = _useState4[0],
    setPerPage = _useState4[1];
  const onPageChange = useCallback(nextPage => {
    setPage(nextPage);
  }, [setPage]);
  const onPerPageChange = useCallback(nextPerPage => {
    // side-effect:
    // GIVEN client updates `perPage`,
    // THEN we reset `page` (discards initialValues.page)
    setPage(1);
    setPerPage(nextPerPage);
  }, [setPerPage, setPage]);
  return {
    page: {
      value: page,
      onChange: onPageChange
    },
    perPage: {
      value: perPage,
      onChange: onPerPageChange
    }
  };
};
var usePaginationState$1 = usePaginationState;

function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const defaultValues = {
  key: 'createdAt',
  order: 'desc'
};
const applyIf = (values, key) => !isNil(values[key]) ? {
  [key]: values[key]
} : {};
const useDataTableSortingState = function () {
  let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
  const _useState = useState(mergedValues),
    _useState2 = _slicedToArray(_useState, 2),
    sortDefinition = _useState2[0],
    setSortDefinition = _useState2[1];
  const onTableSortingChange = useCallback((key, order) => {
    setSortDefinition({
      key,
      order
    });
  }, []);
  return {
    value: sortDefinition,
    onChange: onTableSortingChange
  };
};
var useDataTableSortingState$1 = useDataTableSortingState;

// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.2";

export { useDataTableSortingState$1 as useDataTableSortingState, useFieldId$1 as useFieldId, useMutationObserver, usePaginationState$1 as usePaginationState, usePrevious$1 as usePrevious, useRowSelection$1 as useRowSelection, useSorting$1 as useSorting, useToggleState$1 as useToggleState, version };