@synerise/ds-mapping 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+---
+id: mapping
+title: Mapping
+---
+
+Mapping UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-mapping
+or
+yarn add @synerise/ds-mapping
+```
+
+## Usage
+
+```
+import Mapping from '@synerise/ds-mapping'
+
+<Mapping />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-mapping--default"></iframe>
+
+## API
+
+| Property          | Description                                              | Type                                                         | Default |
+| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------ | ------- |
+| batchSelection    | batch selection configuration                            | BatchSelectionType                                           | -       |
+| dataSource        | Data to be rendered in the mapping                       | Array<T extends BaseItemType>                                | -       |
+| leftTitle         | Left column title                                        | ReactNode                                                    | -       |
+| leftTitleTooltip  | Tooltip for left column title                            | TooltipProps see ds-tooltip                                  | -       |
+| rightTitle        | Right column title                                       | ReactNode                                                    | -       |
+| rightTitleTooltip | Tooltip for right column title                           | TooltipProps see ds-tooltip                                  | -       |
+| leftComponent     | Component to be rendered in the left column              | ({item: T extends BaseItemType, index: number}) => ReactNode | -       |
+| rightComponent    | Component to be rendered in the right column             | ({item: T extends BaseItemType, index: number}) => ReactNode | -       |
+| centerComponent   | Component to be rendered in the center column (optional) | ({item: T extends BaseItemType, index: number}) => ReactNode | -       |
+
+### BaseItemType
+
+| Property | Description            | Type            | Default |
+| -------- | ---------------------- | --------------- | ------- |
+| id       | Unique item identifier | number / string | -       |
+
+### BatchSelectionType
+
+| Property          | Description                                        | Type                                                | Default |
+| ----------------- | -------------------------------------------------- | --------------------------------------------------- | ------- |
+| actionButtons     | Buttons to display when any items are selected     | ReactNode                                           | -       |
+| onSelectionChange | handler fired when items are selected / deselected | (selected: ItemType['id'][]) => void                | -       |
+| renderCounter     | custom counter renderer                            | (selectedCount: number, total: number) => ReactNode | -       |

package/dist/Mapping.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseItemType, MappingProps } from './Mapping.types';
+declare const Mapping: <ItemType extends BaseItemType>({ batchSelection, dataSource, leftTitle, leftTitleTooltip, rightTitle, rightTitleTooltip, leftComponent, rightComponent, centerComponent, texts, ...htmlAttributes }: MappingProps<ItemType>) => React.JSX.Element;
+export default Mapping;

package/dist/Mapping.js

@@ -0,0 +1,106 @@
+var _excluded = ["batchSelection", "dataSource", "leftTitle", "leftTitleTooltip", "rightTitle", "rightTitleTooltip", "leftComponent", "rightComponent", "centerComponent", "texts"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Icon, { HideM, TaskCheckM } from '@synerise/ds-icon';
+import Button from '@synerise/ds-button';
+import * as S from './Mapping.styles';
+import { BatchSelectionHeader, RowSelection, TitleRow } from './components';
+import { renderCounter as defaultRenderCounter } from './utils/counter';
+import { useBatchSelection } from './hooks/useBatchSelection';
+import { useTexts } from './hooks/useTexts';
+var Mapping = function Mapping(_ref) {
+  var batchSelection = _ref.batchSelection,
+    dataSource = _ref.dataSource,
+    leftTitle = _ref.leftTitle,
+    leftTitleTooltip = _ref.leftTitleTooltip,
+    rightTitle = _ref.rightTitle,
+    rightTitleTooltip = _ref.rightTitleTooltip,
+    leftComponent = _ref.leftComponent,
+    rightComponent = _ref.rightComponent,
+    centerComponent = _ref.centerComponent,
+    texts = _ref.texts,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var hasCenterComponent = !!centerComponent;
+  var hasSelection = !!batchSelection;
+  var isCompact = dataSource.length === 1;
+  var _useState = useState(false),
+    selectionEnabled = _useState[0],
+    setSelectionEnabled = _useState[1];
+  var allTexts = useTexts(texts);
+  var _useBatchSelection = useBatchSelection(dataSource, hasSelection),
+    selectedItemIds = _useBatchSelection.selectedItemIds,
+    setSelectedItemIds = _useBatchSelection.setSelectedItemIds,
+    handleBatchCheckboxChange = _useBatchSelection.handleBatchCheckboxChange,
+    batchSelectionCheckboxState = _useBatchSelection.batchSelectionCheckboxState;
+  var _ref2 = batchSelection || {},
+    actionButtons = _ref2.actionButtons,
+    onSelectionChange = _ref2.onSelectionChange,
+    _ref2$renderCounter = _ref2.renderCounter,
+    renderCounter = _ref2$renderCounter === void 0 ? defaultRenderCounter : _ref2$renderCounter;
+  var handleItemSelection = function handleItemSelection(checked, id) {
+    if (checked) {
+      setSelectedItemIds([].concat(selectedItemIds, [id]));
+    } else {
+      setSelectedItemIds(selectedItemIds.filter(function (itemId) {
+        return itemId !== id;
+      }));
+    }
+  };
+  var toggleBatchButton = useCallback(function (newState) {
+    setSelectionEnabled(newState);
+    setSelectedItemIds([]);
+  }, [setSelectedItemIds]);
+  var batchButton = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "toggle-bulk-actions",
+      type: "ghost",
+      mode: "icon-label",
+      onClick: function onClick() {
+        return toggleBatchButton(!selectionEnabled);
+      }
+    }, selectionEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(HideM, null)
+    }), " ", allTexts.disableBatchSelection) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(TaskCheckM, null)
+    }), " ", allTexts.enableBatchSelection));
+  }, [allTexts.disableBatchSelection, allTexts.enableBatchSelection, selectionEnabled, toggleBatchButton]);
+  useEffect(function () {
+    onSelectionChange && onSelectionChange(selectedItemIds);
+  }, [onSelectionChange, selectedItemIds]);
+  return /*#__PURE__*/React.createElement(S.MappingWrapper, _extends({
+    isCompact: isCompact
+  }, htmlAttributes), batchSelection && /*#__PURE__*/React.createElement(BatchSelectionHeader, {
+    checkboxState: batchSelectionCheckboxState,
+    onChange: handleBatchCheckboxChange,
+    actionButtons: actionButtons,
+    batchButton: batchButton,
+    enabled: selectionEnabled,
+    counter: renderCounter(selectedItemIds.length, dataSource.length)
+  }), (leftTitle || rightTitle) && /*#__PURE__*/React.createElement(TitleRow, {
+    leftTitle: leftTitle,
+    rightTitle: rightTitle,
+    leftTitleTooltip: leftTitleTooltip,
+    rightTitleTooltip: rightTitleTooltip,
+    hasCenterComponent: hasCenterComponent,
+    hasSelection: hasSelection && selectionEnabled
+  }), dataSource.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(S.MappingRow, {
+      key: item.id
+    }, hasSelection && selectionEnabled && /*#__PURE__*/React.createElement(RowSelection, {
+      checkboxState: selectedItemIds.includes(item.id),
+      itemId: item.id,
+      onChange: handleItemSelection
+    }), /*#__PURE__*/React.createElement(S.MappingRowLeft, null, leftComponent({
+      item: item,
+      index: index
+    })), hasCenterComponent && /*#__PURE__*/React.createElement(S.MappingRowCenter, null, centerComponent({
+      item: item,
+      index: index
+    })), /*#__PURE__*/React.createElement(S.MappingRowRight, null, rightComponent({
+      item: item,
+      index: index
+    })));
+  }));
+};
+export default Mapping;

package/dist/Mapping.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const MappingWrapper: import("styled-components").StyledComponent<"div", any, {
+    isCompact: boolean;
+}, never>;
+export declare const MappingRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MappingRowLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MappingRowRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MappingRowCenter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowSelectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColumnTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {}, never>;
+export declare const BatchSelectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BatchActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BatchCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BatchSelectionInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BatchToggleButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Mapping.styles.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import { Title } from '@synerise/ds-typography';
+export var MappingWrapper = styled.div.withConfig({
+  displayName: "Mappingstyles__MappingWrapper",
+  componentId: "sc-1f47eqt-0"
+})(["display:flex;flex-direction:column;", ";"], function (props) {
+  return !props.isCompact && "gap: 16px";
+});
+export var MappingRow = styled.div.withConfig({
+  displayName: "Mappingstyles__MappingRow",
+  componentId: "sc-1f47eqt-1"
+})(["display:flex;gap:14px;align-items:center;"]);
+export var MappingRowLeft = styled.div.withConfig({
+  displayName: "Mappingstyles__MappingRowLeft",
+  componentId: "sc-1f47eqt-2"
+})(["flex:1 1 50%;"]);
+export var MappingRowRight = styled.div.withConfig({
+  displayName: "Mappingstyles__MappingRowRight",
+  componentId: "sc-1f47eqt-3"
+})(["flex:1 1 50%;"]);
+export var MappingRowCenter = styled.div.withConfig({
+  displayName: "Mappingstyles__MappingRowCenter",
+  componentId: "sc-1f47eqt-4"
+})(["flex:0 0 32px;display:flex;justify-content:center;"]);
+export var RowSelectionWrapper = styled.div.withConfig({
+  displayName: "Mappingstyles__RowSelectionWrapper",
+  componentId: "sc-1f47eqt-5"
+})(["flex:0 0 32px;"]);
+export var ColumnTitle = styled(Title).withConfig({
+  displayName: "Mappingstyles__ColumnTitle",
+  componentId: "sc-1f47eqt-6"
+})([""]);
+export var BatchSelectionWrapper = styled.div.withConfig({
+  displayName: "Mappingstyles__BatchSelectionWrapper",
+  componentId: "sc-1f47eqt-7"
+})(["display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:solid 1px ", ";height:64px;"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var BatchActionButtons = styled.div.withConfig({
+  displayName: "Mappingstyles__BatchActionButtons",
+  componentId: "sc-1f47eqt-8"
+})(["display:flex;gap:8px;"]);
+export var BatchCounter = styled.div.withConfig({
+  displayName: "Mappingstyles__BatchCounter",
+  componentId: "sc-1f47eqt-9"
+})(["white-space:nowrap;"]);
+export var BatchSelectionInner = styled.div.withConfig({
+  displayName: "Mappingstyles__BatchSelectionInner",
+  componentId: "sc-1f47eqt-10"
+})(["display:flex;flex-grow:1;align-items:center;gap:24px;"]);
+export var BatchToggleButton = styled.div.withConfig({
+  displayName: "Mappingstyles__BatchToggleButton",
+  componentId: "sc-1f47eqt-11"
+})([""]);

package/dist/Mapping.types.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { CheckboxTristateProps } from '@synerise/ds-checkbox-tristate';
+import { CheckboxProps } from '@synerise/ds-checkbox';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseItemType = {
+    id: string | number;
+};
+type BaseColumnComponentProps = {
+    index: number;
+};
+export type ColumnComponentProps<T extends BaseItemType> = {
+    item: T;
+} & BaseColumnComponentProps;
+export type MappingTexts = {
+    enableBatchSelection: ReactNode;
+    disableBatchSelection: ReactNode;
+};
+type BaseMappingProps = {
+    leftTitle?: ReactNode;
+    leftTitleTooltip?: TooltipProps;
+    rightTitle?: ReactNode;
+    rightTitleTooltip?: TooltipProps;
+};
+export type MappingProps<T extends BaseItemType> = WithHTMLAttributes<HTMLDivElement, {
+    dataSource: Array<T>;
+    leftComponent: (props: ColumnComponentProps<T>) => ReactNode;
+    rightComponent: (props: ColumnComponentProps<T>) => ReactNode;
+    centerComponent?: (props: ColumnComponentProps<T>) => ReactNode;
+    batchSelection?: BatchSelectionType<T>;
+    texts?: Partial<MappingTexts>;
+} & BaseMappingProps>;
+export type TitleRowProps = BaseMappingProps & {
+    hasSelection?: boolean;
+    hasCenterComponent?: boolean;
+};
+export type BatchSelectionType<T extends BaseItemType> = {
+    onSelectionChange: (selectedIndexes: T['id'][]) => void;
+    renderCounter?: (selectedCount: number, total: number) => ReactNode;
+} & Pick<BatchSelectionProps, 'actionButtons'>;
+export type BatchSelectionProps = {
+    actionButtons: ReactNode;
+    checkboxState: CheckboxTristateProps['checked'];
+    onChange: (checked?: boolean) => void;
+    counter: ReactNode;
+    batchButton: ReactNode;
+    enabled?: boolean;
+};
+export type RowSelectionProps<T extends BaseItemType> = {
+    checkboxState: CheckboxProps['checked'];
+    itemId: T['id'];
+    onChange: (checked: boolean, id: T['id']) => void;
+};
+export {};

package/dist/Mapping.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/BatchSelectionHeader/BatchSelectionHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BatchSelectionProps } from '../../Mapping.types';
+export declare const BatchSelectionHeader: ({ counter, checkboxState, onChange, actionButtons, batchButton, enabled, }: BatchSelectionProps) => React.JSX.Element;

package/dist/components/BatchSelectionHeader/BatchSelectionHeader.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import CheckboxTristate from '@synerise/ds-checkbox-tristate';
+import * as S from '../../Mapping.styles';
+export var BatchSelectionHeader = function BatchSelectionHeader(_ref) {
+  var counter = _ref.counter,
+    checkboxState = _ref.checkboxState,
+    onChange = _ref.onChange,
+    actionButtons = _ref.actionButtons,
+    batchButton = _ref.batchButton,
+    enabled = _ref.enabled;
+  var handleChange = function handleChange() {
+    if (checkboxState !== true) {
+      onChange(true);
+    } else {
+      onChange(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(S.BatchSelectionWrapper, null, enabled && /*#__PURE__*/React.createElement(S.RowSelectionWrapper, null, /*#__PURE__*/React.createElement(CheckboxTristate, {
+    withoutPadding: true,
+    checked: checkboxState,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(S.BatchSelectionInner, null, /*#__PURE__*/React.createElement(S.BatchCounter, null, counter), enabled && checkboxState !== false && /*#__PURE__*/React.createElement(S.BatchActionButtons, null, actionButtons)), /*#__PURE__*/React.createElement(S.BatchToggleButton, null, batchButton));
+};

package/dist/components/RowSelection/RowSelection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BaseItemType, RowSelectionProps } from '../../Mapping.types';
+export declare const RowSelection: <T extends BaseItemType>({ itemId, checkboxState, onChange }: RowSelectionProps<T>) => React.JSX.Element;

package/dist/components/RowSelection/RowSelection.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Checkbox from '@synerise/ds-checkbox';
+import * as S from '../../Mapping.styles';
+export var RowSelection = function RowSelection(_ref) {
+  var itemId = _ref.itemId,
+    checkboxState = _ref.checkboxState,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement(S.RowSelectionWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
+    withoutPadding: true,
+    checked: checkboxState,
+    onChange: function onChange(event) {
+      return _onChange(event.target.checked, itemId);
+    }
+  }));
+};

package/dist/components/TitleRow/TitleRow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TitleRowProps } from '../../Mapping.types';
+export declare const TitleRow: ({ leftTitle, leftTitleTooltip, rightTitle, rightTitleTooltip, hasCenterComponent, hasSelection, }: TitleRowProps) => React.JSX.Element;

package/dist/components/TitleRow/TitleRow.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Tooltip from '@synerise/ds-tooltip';
+import Icon, { InfoFillS } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import * as S from '../../Mapping.styles';
+export var TitleRow = function TitleRow(_ref) {
+  var leftTitle = _ref.leftTitle,
+    leftTitleTooltip = _ref.leftTitleTooltip,
+    rightTitle = _ref.rightTitle,
+    rightTitleTooltip = _ref.rightTitleTooltip,
+    hasCenterComponent = _ref.hasCenterComponent,
+    hasSelection = _ref.hasSelection;
+  return /*#__PURE__*/React.createElement(S.MappingRow, null, hasSelection && /*#__PURE__*/React.createElement(S.RowSelectionWrapper, null), /*#__PURE__*/React.createElement(S.MappingRowLeft, null, /*#__PURE__*/React.createElement(S.ColumnTitle, {
+    level: 6
+  }, leftTitle, ' ', leftTitleTooltip && /*#__PURE__*/React.createElement(Tooltip, leftTitleTooltip, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(InfoFillS, null),
+    color: theme.palette['grey-400']
+  })))), hasCenterComponent && /*#__PURE__*/React.createElement(S.MappingRowCenter, null), /*#__PURE__*/React.createElement(S.MappingRowLeft, null, /*#__PURE__*/React.createElement(S.ColumnTitle, {
+    level: 6
+  }, rightTitle, ' ', rightTitleTooltip && /*#__PURE__*/React.createElement(Tooltip, rightTitleTooltip, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(InfoFillS, null),
+    color: theme.palette['grey-400']
+  })))));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BatchSelectionHeader/BatchSelectionHeader';
+export * from './RowSelection/RowSelection';
+export * from './TitleRow/TitleRow';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export * from './BatchSelectionHeader/BatchSelectionHeader';
+export * from './RowSelection/RowSelection';
+export * from './TitleRow/TitleRow';

package/dist/hooks/useBatchSelection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { BaseItemType } from '../Mapping.types';
+export declare const useBatchSelection: <ItemType extends BaseItemType>(dataSource: ItemType[], hasBatchSelection?: boolean) => {
+    selectedItemIds: ItemType["id"][];
+    batchSelectionCheckboxState: boolean | undefined;
+    setSelectedItemIds: import("react").Dispatch<import("react").SetStateAction<ItemType["id"][]>>;
+    handleBatchCheckboxChange: (newVal: boolean | undefined) => void;
+};

package/dist/hooks/useBatchSelection.js

@@ -0,0 +1,36 @@
+import { useMemo, useState } from 'react';
+export var useBatchSelection = function useBatchSelection(dataSource, hasBatchSelection) {
+  var _useState = useState([]),
+    selectedItemIds = _useState[0],
+    setSelectedItemIds = _useState[1];
+  var handleBatchCheckboxChange = function handleBatchCheckboxChange(newVal) {
+    if (newVal === true) {
+      setSelectedItemIds(dataSource.map(function (item) {
+        return item.id;
+      }));
+      return;
+    }
+    if (newVal === false) {
+      setSelectedItemIds([]);
+    }
+  };
+  var batchSelectionCheckboxState = useMemo(function () {
+    if (hasBatchSelection) {
+      switch (dataSource.length - selectedItemIds.length) {
+        case 0:
+          return !!dataSource.length;
+        case dataSource.length:
+          return false;
+        default:
+          return undefined;
+      }
+    }
+    return undefined;
+  }, [dataSource, selectedItemIds, hasBatchSelection]);
+  return {
+    selectedItemIds: selectedItemIds,
+    batchSelectionCheckboxState: batchSelectionCheckboxState,
+    setSelectedItemIds: setSelectedItemIds,
+    handleBatchCheckboxChange: handleBatchCheckboxChange
+  };
+};

package/dist/hooks/useTexts.d.ts

@@ -0,0 +1,2 @@
+import type { MappingTexts } from '../Mapping.types';
+export declare const useTexts: (defaultTexts?: Partial<MappingTexts>) => MappingTexts;

package/dist/hooks/useTexts.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+export var useTexts = function useTexts(defaultTexts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var texts = useMemo(function () {
+    return _extends({
+      enableBatchSelection: formatMessage({
+        id: 'DS.MAPPING.BULK_ACTIONS_ENABLE',
+        defaultMessage: 'Bulk actions'
+      }),
+      disableBatchSelection: formatMessage({
+        id: 'DS.MAPPING.BULK_ACTIONS_DISABLE',
+        defaultMessage: 'Hide actions'
+      })
+    }, defaultTexts);
+  }, [defaultTexts, formatMessage]);
+  return texts;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Mapping';
+export type { MappingProps } from './Mapping.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './Mapping';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/utils/counter.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderCounter: (selected: number, total: number) => React.JSX.Element;

package/dist/utils/counter.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export var renderCounter = function renderCounter(selected, total) {
+  if (selected === 0) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, total, " Items");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selected, " Selected");
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@synerise/ds-mapping",
+  "version": "0.0.1",
+  "description": "Mapping UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^0.23.4",
+    "@synerise/ds-checkbox": "^0.13.7",
+    "@synerise/ds-checkbox-tristate": "^0.3.7",
+    "@synerise/ds-icon": "^0.72.1",
+    "@synerise/ds-tooltip": "^0.16.3",
+    "@synerise/ds-typography": "^0.17.7",
+    "@synerise/ds-utils": "^0.32.3"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "antd": "4.24.16",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": ">=3.12.0 <= 6.8",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "8b368564f3d87695bc8df911803f8b3f8546d465"
+}