@elliemae/ds-pills 2.0.0-alpha.1 → 2.0.0-alpha.10

package/esm/props.js

@@ -0,0 +1,46 @@
+import { PropTypes } from 'react-desc';
+import DSInput from '@elliemae/ds-form/Input';
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+const pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);
+const DSPillV2PropTypes = {
+  label: PropTypes.string.description('Label to show in the pill').isRequired,
+  type: pillTypes.description('The type of pill that you want to render').isRequired,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)').defaultValue(() => null),
+  ariaLabel: PropTypes.string.description('Aria label for the pill. If not provided we will use the label').defaultValue(''),
+  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),
+  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),
+  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),
+  onRemove: PropTypes.func.description('Callback triggered when removing a pill with the close icon').defaultValue(() => null),
+  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),
+  onInputChange: PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
+  onInputClear: PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
+  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
+  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({})
+};
+const DSPillButtonPropTypes = {
+  type: PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
+  width: PropTypes.string.description('Width of the button').defaultValue('100%'),
+  height: PropTypes.string.description('Height of the button').defaultValue('100%')
+};
+const DSPillV2DefaultProps = {
+  innerRef: () => null,
+  ariaLabel: '',
+  tooltipValue: '',
+  iconLeft: null,
+  iconRight: null,
+  onRemove: () => null,
+  inputPlaceholder: '',
+  onInputChange: () => null,
+  onInputClear: () => null,
+  inputWidth: 72,
+  inputRender: DSInput,
+  dropdownProps: {}
+};
+const DSPillButtonDefaultProps = {
+  type: 'right',
+  width: '100%',
+  height: '100%'
+};
+
+export { DSPillButtonDefaultProps, DSPillButtonPropTypes, DSPillV2DefaultProps, DSPillV2PropTypes };

package/esm/utils.js

@@ -0,0 +1,14 @@
+const setMultipleRefs = (...refs) => _ref => {
+  refs.forEach(ref => {
+    if (!ref || !_ref) return;
+
+    if (typeof ref === 'function') {
+      ref(_ref);
+      return;
+    }
+
+    if (ref) ref.current = _ref;
+  });
+};
+
+export { setMultipleRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "module": "./esm/index.js",
@@ -11,57 +11,117 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
-    "./RemovablePill": {
-      "import": "./esm/RemovablePill.js",
-      "require": "./cjs/RemovablePill.js"
+    "./utils": {
+      "import": "./esm/utils.js",
+      "require": "./cjs/utils.js"
     },
-    "./ReadOnlyPill": {
-      "import": "./esm/ReadOnlyPill.js",
-      "require": "./cjs/ReadOnlyPill.js"
+    "./props": {
+      "import": "./esm/props.js",
+      "require": "./cjs/props.js"
     },
-    "./PillGroup": {
-      "import": "./esm/PillGroup.js",
-      "require": "./cjs/PillGroup.js"
+    "./deprecated/RemovablePill": {
+      "import": "./esm/deprecated/RemovablePill.js",
+      "require": "./cjs/deprecated/RemovablePill.js"
     },
-    "./Pill": {
-      "import": "./esm/Pill.js",
-      "require": "./cjs/Pill.js"
+    "./deprecated/ReadOnlyPill": {
+      "import": "./esm/deprecated/ReadOnlyPill.js",
+      "require": "./cjs/deprecated/ReadOnlyPill.js"
     },
-    "./OverflowPill": {
-      "import": "./esm/OverflowPill.js",
-      "require": "./cjs/OverflowPill.js"
+    "./deprecated/PillGroup": {
+      "import": "./esm/deprecated/PillGroup.js",
+      "require": "./cjs/deprecated/PillGroup.js"
     },
-    "./LabeledPills": {
-      "import": "./esm/LabeledPills.js",
-      "require": "./cjs/LabeledPills.js"
+    "./deprecated/Pill": {
+      "import": "./esm/deprecated/Pill.js",
+      "require": "./cjs/deprecated/Pill.js"
     },
-    "./LabeledDropdownPillsTypes/utils": {
-      "import": "./esm/LabeledDropdownPillsTypes/utils.js",
-      "require": "./cjs/LabeledDropdownPillsTypes/utils.js"
+    "./deprecated/OverflowPill": {
+      "import": "./esm/deprecated/OverflowPill.js",
+      "require": "./cjs/deprecated/OverflowPill.js"
     },
-    "./LabeledDropdownPillsTypes/LabeledDropdownSinglePill": {
-      "import": "./esm/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js",
-      "require": "./cjs/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js"
+    "./deprecated/LabeledPills": {
+      "import": "./esm/deprecated/LabeledPills.js",
+      "require": "./cjs/deprecated/LabeledPills.js"
     },
-    "./LabeledDropdownPillsTypes/LabeledDropdownMultiPill": {
-      "import": "./esm/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js",
-      "require": "./cjs/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js"
+    "./deprecated/LabeledDropdownPillsTypes/utils": {
+      "import": "./esm/deprecated/LabeledDropdownPillsTypes/utils.js",
+      "require": "./cjs/deprecated/LabeledDropdownPillsTypes/utils.js"
     },
-    "./LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill": {
-      "import": "./esm/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js",
-      "require": "./cjs/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js"
+    "./deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill": {
+      "import": "./esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js",
+      "require": "./cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js"
     },
-    "./LabeledDropdownPills": {
-      "import": "./esm/LabeledDropdownPills.js",
-      "require": "./cjs/LabeledDropdownPills.js"
+    "./deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill": {
+      "import": "./esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js",
+      "require": "./cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js"
     },
-    "./InputPill": {
-      "import": "./esm/InputPill.js",
-      "require": "./cjs/InputPill.js"
+    "./deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill": {
+      "import": "./esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js",
+      "require": "./cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js"
     },
-    "./DropdownPill": {
-      "import": "./esm/DropdownPill.js",
-      "require": "./cjs/DropdownPill.js"
+    "./deprecated/LabeledDropdownPills": {
+      "import": "./esm/deprecated/LabeledDropdownPills.js",
+      "require": "./cjs/deprecated/LabeledDropdownPills.js"
+    },
+    "./deprecated/InputPill": {
+      "import": "./esm/deprecated/InputPill.js",
+      "require": "./cjs/deprecated/InputPill.js"
+    },
+    "./deprecated": {
+      "import": "./esm/deprecated/index.js",
+      "require": "./cjs/deprecated/index.js"
+    },
+    "./deprecated/DropdownPill": {
+      "import": "./esm/deprecated/DropdownPill.js",
+      "require": "./cjs/deprecated/DropdownPill.js"
+    },
+    "./components/types/ValuePill": {
+      "import": "./esm/components/types/ValuePill.js",
+      "require": "./cjs/components/types/ValuePill.js"
+    },
+    "./components/types/RemovablePill": {
+      "import": "./esm/components/types/RemovablePill.js",
+      "require": "./cjs/components/types/RemovablePill.js"
+    },
+    "./components/types/ReadOnlyPill": {
+      "import": "./esm/components/types/ReadOnlyPill.js",
+      "require": "./cjs/components/types/ReadOnlyPill.js"
+    },
+    "./components/types/LabelPill": {
+      "import": "./esm/components/types/LabelPill.js",
+      "require": "./cjs/components/types/LabelPill.js"
+    },
+    "./components/types/InputPill": {
+      "import": "./esm/components/types/InputPill.js",
+      "require": "./cjs/components/types/InputPill.js"
+    },
+    "./components/types": {
+      "import": "./esm/components/types/index.js",
+      "require": "./cjs/components/types/index.js"
+    },
+    "./components/types/DropdownPill": {
+      "import": "./esm/components/types/DropdownPill.js",
+      "require": "./cjs/components/types/DropdownPill.js"
+    },
+    "./components/styled": {
+      "import": "./esm/components/styled.js",
+      "require": "./cjs/components/styled.js"
+    },
+    "./components/PillGroup": {
+      "import": "./esm/components/PillGroup.js",
+      "require": "./cjs/components/PillGroup.js"
+    },
+    "./components/PillButton": {
+      "import": "./esm/components/PillButton.js",
+      "require": "./cjs/components/PillButton.js"
+    },
+    "./components/Pill": {
+      "import": "./esm/components/Pill.js",
+      "require": "./cjs/components/Pill.js"
+    },
+    "./components": {
+      "import": "./esm/components/index.js",
+      "require": "./cjs/components/index.js"
     }
   },
   "sideEffects": [
@@ -84,14 +144,14 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
-    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.1",
-    "@elliemae/ds-form": "2.0.0-alpha.1",
-    "@elliemae/ds-icons": "2.0.0-alpha.1",
-    "@elliemae/ds-modal": "2.0.0-alpha.1",
-    "@elliemae/ds-shared": "2.0.0-alpha.1",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.1",
-    "@elliemae/ds-utilities": "2.0.0-alpha.1",
+    "@elliemae/ds-classnames": "2.0.0-alpha.10",
+    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.10",
+    "@elliemae/ds-form": "2.0.0-alpha.10",
+    "@elliemae/ds-icons": "2.0.0-alpha.10",
+    "@elliemae/ds-modal": "2.0.0-alpha.10",
+    "@elliemae/ds-shared": "2.0.0-alpha.10",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.10",
+    "@elliemae/ds-utilities": "2.0.0-alpha.10",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },

package/types/components/Pill.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DSPillProps } from '../index.d';
+declare const DSPillV2: React.ComponentType<DSPillProps>;
+declare const DSPillV2WithSchema: any;
+export { DSPillV2, DSPillV2WithSchema };

package/types/components/PillButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSButtonPropsT } from '@elliemae/ds-button';
+declare const DSPillButton: React.ComponentType<DSButtonPropsT>;
+declare const DSPillButtonWithSchema: any;
+export { DSPillButton, DSPillButtonWithSchema };

package/types/components/PillGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const DSPillGroupV2Context: React.Context<{
+    onKeyboardRemove: (pillUid: string) => void;
+}>;
+declare const DSPillGroupV2: React.ComponentType;
+declare const DSPillGroupV2WithSchema: any;
+export { DSPillGroupV2, DSPillGroupV2WithSchema };

package/types/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Pill';
+export * from './PillGroup';
+export * from './PillButton';

package/types/components/styled.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {
+    value: string;
+    inputWidth: number;
+    inputHasFocus: boolean;
+}, never>;
+export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledReadonlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {
+    hasIconRight: boolean;
+    hasIconLeft: boolean;
+}, never>;
+export declare const StyledRemovablePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledPillGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const StyledSpanWithTooltip: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPillButton: import("styled-components").StyledComponent<{
+    (props: any): JSX.Element;
+    propTypes: {
+        id: any;
+        buttonType: any;
+        size: any;
+        disabled: any;
+        onClick: any;
+        onKeyDown: any;
+        onBlur: any;
+        onFocus: any;
+        className: any;
+        tabIndex: any;
+        innerRef: any;
+        'aria-label': any;
+        'aria-pressed': any;
+        'data-testid': any;
+        role: any;
+        children: any;
+    };
+}, any, {
+    width: string;
+    height: string;
+}, never>;

package/types/components/types/DropdownPill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const DropdownPill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/InputPill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const InputPill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/LabelPill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const LabelPill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/ReadOnlyPill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const ReadOnlyPill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/RemovablePill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const RemovablePill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/ValuePill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillProps } from '../../index.d';
+export declare const ValuePill: React.NamedExoticComponent<DSPillProps>;

package/types/components/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './DropdownPill';
+export * from './InputPill';
+export * from './LabelPill';
+export * from './ReadOnlyPill';
+export * from './RemovablePill';
+export * from './ValuePill';

package/types/deprecated/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Pill';
+export * from './PillGroup';
+export * from './LabeledDropdownPills';
+export * from './LabeledPills';
+export * from './DropdownPill';
+export * from './RemovablePill';
+export * from './ReadOnlyPill';
+export * from './OverflowPill';

package/types/index.d.ts

@@ -1,9 +1,3 @@
-export * from './Pill';
-export * from './PillGroup';
-export * from './LabeledDropdownPills';
-export * from './LabeledPills';
-export * from './DropdownPill';
-export * from './RemovablePill';
-export * from './ReadOnlyPill';
-export * from './OverflowPill';
-export { default } from './Pill';
+export * from './deprecated';
+export { default } from './deprecated/Pill';
+export * from './components';

package/types/props.d.ts

@@ -0,0 +1,39 @@
+export declare const DSPillV2PropTypes: {
+    label: any;
+    type: any;
+    innerRef: any;
+    ariaLabel: any;
+    tooltipValue: any;
+    iconLeft: any;
+    iconRight: any;
+    onRemove: any;
+    inputPlaceholder: any;
+    onInputChange: any;
+    onInputClear: any;
+    inputWidth: any;
+    dropdownProps: any;
+};
+export declare const DSPillButtonPropTypes: {
+    type: any;
+    width: any;
+    height: any;
+};
+export declare const DSPillV2DefaultProps: {
+    innerRef: () => null;
+    ariaLabel: string;
+    tooltipValue: string;
+    iconLeft: null;
+    iconRight: null;
+    onRemove: () => null;
+    inputPlaceholder: string;
+    onInputChange: () => null;
+    onInputClear: () => null;
+    inputWidth: number;
+    inputRender: any;
+    dropdownProps: {};
+};
+export declare const DSPillButtonDefaultProps: {
+    type: string;
+    width: string;
+    height: string;
+};

package/types/tests/DSPill.test.d.ts

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

package/types/tests/DSPillGroup.test.d.ts

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

package/types/tests/events/DSPill.events.keyboard.test.d.ts

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

package/types/tests/events/DSPill.events.test.d.ts

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

package/types/tests/events/DSPillGroup.events.keyboard.test.d.ts

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

package/types/tests/events/DSPillGroup.events.test.d.ts

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

package/types/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type refInterfaceType = React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);
+export declare const setMultipleRefs: (...refs: refInterfaceType[]) => (_ref: HTMLElement) => void;
+export {};