@elliemae/ds-shuttle-v2 3.49.0-rc.9 → 3.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSShuttleV2.js +1 -1
- package/dist/cjs/DSShuttleV2.js.map +1 -1
- package/dist/cjs/config/DSShuttleV2Definitions.js +1 -1
- package/dist/cjs/config/DSShuttleV2Definitions.js.map +1 -1
- package/dist/cjs/constants/index.js +1 -1
- package/dist/cjs/constants/index.js.map +1 -1
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js +4 -3
- package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js +2 -1
- package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/esm/DSShuttleV2.js +1 -1
- package/dist/esm/DSShuttleV2.js.map +1 -1
- package/dist/esm/config/DSShuttleV2Definitions.js +1 -1
- package/dist/esm/config/DSShuttleV2Definitions.js.map +1 -1
- package/dist/esm/constants/index.js +1 -1
- package/dist/esm/constants/index.js.map +1 -1
- package/dist/esm/parts/Item/ItemActions/ItemActions.js +5 -4
- package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +2 -2
- package/dist/esm/parts/Panel/top/PanelFilterSection.js +2 -1
- package/dist/esm/parts/Panel/top/PanelFilterSection.js.map +2 -2
- package/dist/types/config/DSShuttleV2Definitions.d.ts +1 -1
- package/dist/types/constants/index.d.ts +1 -1
- package/package.json +26 -24
package/dist/cjs/DSShuttleV2.js
CHANGED
|
@@ -39,7 +39,7 @@ var import_MainContent = require("./parts/MainContent.js");
|
|
|
39
39
|
var import_useStore = require("./config/useStore/index.js");
|
|
40
40
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
41
|
const DSShuttleV2 = (0, import_ds_zustand_helpers.withZustand)(import_MainContent.MainContent, import_useStore.config);
|
|
42
|
-
DSShuttleV2.displayName = "
|
|
42
|
+
DSShuttleV2.displayName = "DSShuttlev2";
|
|
43
43
|
const DSShuttleV2WithSchema = (0, import_ds_props_helpers.describe)(DSShuttleV2);
|
|
44
44
|
DSShuttleV2WithSchema.propTypes = import_react_desc_prop_types.DSShuttleV2PropTypesSchema;
|
|
45
45
|
//# sourceMappingURL=DSShuttleV2.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSShuttleV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSShuttleV2: React.FunctionComponent<DSShuttleV2T.Props> = withZustand(MainContent, config);\n\nDSShuttleV2.displayName = '
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSShuttleV2: React.FunctionComponent<DSShuttleV2T.Props> = withZustand(MainContent, config);\n\nDSShuttleV2.displayName = 'DSShuttlev2';\nconst DSShuttleV2WithSchema = describe(DSShuttleV2);\n\nDSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;\n\nexport { DSShuttleV2, DSShuttleV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAyB;AACzB,gCAA4B;AAC5B,yBAA4B;AAC5B,sBAAuB;AAEvB,mCAA2C;AAE3C,MAAM,kBAA2D,uCAAY,gCAAa,sBAAM;AAEhG,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAElD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ __export(DSShuttleV2Definitions_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSShuttleV2Definitions_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
-
const DSShuttleV2Name = "
|
|
38
|
+
const DSShuttleV2Name = "DSShuttlev2";
|
|
39
39
|
const DSShuttleV2Slots = {
|
|
40
40
|
HEADER_SEARCH_ICON: "header-search-icon",
|
|
41
41
|
WRAPPER: "wrapper",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/DSShuttleV2Definitions.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = '
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AACxB;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ __export(constants_exports, {
|
|
|
37
37
|
});
|
|
38
38
|
module.exports = __toCommonJS(constants_exports);
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
|
-
const DSShuttleV2Name = "
|
|
40
|
+
const DSShuttleV2Name = "DSShuttlev2";
|
|
41
41
|
const REGIONS_FOCUSES = {
|
|
42
42
|
SOURCE_HEADER: "source-header",
|
|
43
43
|
SOURCE_PANEL: "source-panel",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSShuttleV2Name = '
|
|
4
|
+
"sourcesContent": ["export const DSShuttleV2Name = 'DSShuttlev2';\nexport const REGIONS_FOCUSES = {\n SOURCE_HEADER: 'source-header',\n SOURCE_PANEL: 'source-panel',\n SOURCE_PANEL_ITEM: 'source-panel-item',\n SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n SOURCE_BOTTOM: 'source-bottom',\n DESTINATION_HEADER: 'destination-header',\n DESTINATION_PANEL: 'destination-panel',\n DESTINATION_PANEL_ITEM: 'destination-panel-item',\n DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n DESTINATION_BOTTOM: 'destination-bottom',\n RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n MOVE_BTN: 'move-btn',\n DRILLDOWN_BTN: 'drilldown-btn',\n DRAG_N_DROP: 'drag-n-drop',\n PARENT: 'parent',\n RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -71,7 +71,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
71
71
|
datumHydratables,
|
|
72
72
|
isDestinationPanel,
|
|
73
73
|
datumRenderFlags,
|
|
74
|
-
datumInternalMeta: { hydratedPreventMove }
|
|
74
|
+
datumInternalMeta: { hydratedPreventMove, hydratedId }
|
|
75
75
|
} = itemMeta;
|
|
76
76
|
const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
|
|
77
77
|
const { preventDrilldown, label } = datumHydratables;
|
|
@@ -82,6 +82,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
82
82
|
() => `Move option ${label} into ${isDestinationPanel ? "source" : "destination"} panel`,
|
|
83
83
|
[label, isDestinationPanel]
|
|
84
84
|
);
|
|
85
|
+
const isDraggingThisItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem?.hydratedId === hydratedId);
|
|
85
86
|
const moveButtonProps = (0, import_useStore.usePropsStore)((state) => state.moveButtonProps);
|
|
86
87
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
87
88
|
const getOwnerPropsArguments = import_react.default.useCallback(() => itemMeta, [itemMeta]);
|
|
@@ -106,7 +107,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
106
107
|
size: import_ds_button_v2.BUTTON_SIZES.S,
|
|
107
108
|
innerRef: innerRefHandlerDrilldown,
|
|
108
109
|
tabIndex: -1,
|
|
109
|
-
disabled: internallyDisabledDrilldown || preventDrilldown === true,
|
|
110
|
+
disabled: internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem,
|
|
110
111
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
112
|
StyledDrilldownIcon,
|
|
112
113
|
{
|
|
@@ -128,7 +129,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
|
|
|
128
129
|
size: import_ds_button_v2.BUTTON_SIZES.S,
|
|
129
130
|
innerRef: innerRefHandlerMove,
|
|
130
131
|
tabIndex: -1,
|
|
131
|
-
disabled: internallyDisabledMove || hydratedPreventMove === true,
|
|
132
|
+
disabled: internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem,
|
|
132
133
|
...moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }),
|
|
133
134
|
children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
135
|
StyledCloseMediumIcon,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Item/ItemActions/ItemActions.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n datumInternalMeta: { hydratedPreventMove },\n } = itemMeta;\n // withActions is calculated in /src/config/configureAutoCalculated.ts\n const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n const { preventDrilldown, label } = datumHydratables;\n const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n const moveAriaLabel = useMemo(\n () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n [label, isDestinationPanel],\n );\n\n const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {withActions ? (\n <>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={drillDownAriaLabel}\n onClick={handleClickDrilldown}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerDrilldown}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledDrilldown || preventDrilldown === true}\n >\n <StyledDrilldownIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={moveAriaLabel}\n onClick={handleClickSingleMove}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerMove}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledMove || hydratedPreventMove === true}\n {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledItemActionWrapper>\n </>\n ) : (\n // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n <>\n <div />\n <div />\n </>\n )}\n </StyledItemActions>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n datumInternalMeta: { hydratedPreventMove, hydratedId },\n } = itemMeta;\n // withActions is calculated in /src/config/configureAutoCalculated.ts\n const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n const { preventDrilldown, label } = datumHydratables;\n const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n const moveAriaLabel = useMemo(\n () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n [label, isDestinationPanel],\n );\n\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {withActions ? (\n <>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={drillDownAriaLabel}\n onClick={handleClickDrilldown}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerDrilldown}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n >\n <StyledDrilldownIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={moveAriaLabel}\n onClick={handleClickSingleMove}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerMove}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledItemActionWrapper>\n </>\n ) : (\n // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n <>\n <div />\n <div />\n </>\n )}\n </StyledItemActions>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -72,7 +72,8 @@ const PanelFilterSection = (panelMetaInfo) => {
|
|
|
72
72
|
onValueChange: handleFilterChange,
|
|
73
73
|
"aria-label": isDestinationPanel ? "Destination input search" : "Source input search",
|
|
74
74
|
getOwnerProps,
|
|
75
|
-
getOwnerPropsArguments
|
|
75
|
+
getOwnerPropsArguments,
|
|
76
|
+
autoFocus: true
|
|
76
77
|
}
|
|
77
78
|
) });
|
|
78
79
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Panel/top/PanelFilterSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n border-bottom: 1px solid neutral-400;\n border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n border: none;\n :focus {\n border-radius: 0;\n }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const { isDestinationPanel = false } = panelMetaInfo;\n const onFilterCb = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n );\n const filterValue = usePropsStore((state) =>\n isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n );\n const handleFilterChange = React.useCallback(\n (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n onFilterCb?.(`${value}`, { event });\n },\n [onFilterCb],\n );\n return (\n <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledSearchWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,gCAA4B;AAC5B,sBAA8B;AAE9B,oCAAkD;AAElD,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,sBAAkB,yBAAO,uCAAa,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,4CAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n border-bottom: 1px solid neutral-400;\n border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n border: none;\n :focus {\n border-radius: 0;\n }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const { isDestinationPanel = false } = panelMetaInfo;\n const onFilterCb = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n );\n const filterValue = usePropsStore((state) =>\n isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n );\n const handleFilterChange = React.useCallback(\n (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n onFilterCb?.(`${value}`, { event });\n },\n [onFilterCb],\n );\n return (\n <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n autoFocus\n />\n </StyledSearchWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,gCAA4B;AAC5B,sBAA8B;AAE9B,oCAAkD;AAElD,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,sBAAkB,yBAAO,uCAAa,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,4CAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACA,WAAS;AAAA;AAAA,EACX,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/DSShuttleV2.js
CHANGED
|
@@ -5,7 +5,7 @@ import { MainContent } from "./parts/MainContent.js";
|
|
|
5
5
|
import { config } from "./config/useStore/index.js";
|
|
6
6
|
import { DSShuttleV2PropTypesSchema } from "./react-desc-prop-types.js";
|
|
7
7
|
const DSShuttleV2 = withZustand(MainContent, config);
|
|
8
|
-
DSShuttleV2.displayName = "
|
|
8
|
+
DSShuttleV2.displayName = "DSShuttlev2";
|
|
9
9
|
const DSShuttleV2WithSchema = describe(DSShuttleV2);
|
|
10
10
|
DSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;
|
|
11
11
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSShuttleV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSShuttleV2: React.FunctionComponent<DSShuttleV2T.Props> = withZustand(MainContent, config);\n\nDSShuttleV2.displayName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './config/useStore/index.js';\nimport type { DSShuttleV2T } from './react-desc-prop-types.js';\nimport { DSShuttleV2PropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSShuttleV2: React.FunctionComponent<DSShuttleV2T.Props> = withZustand(MainContent, config);\n\nDSShuttleV2.displayName = 'DSShuttlev2';\nconst DSShuttleV2WithSchema = describe(DSShuttleV2);\n\nDSShuttleV2WithSchema.propTypes = DSShuttleV2PropTypesSchema;\n\nexport { DSShuttleV2, DSShuttleV2WithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAE3C,MAAM,cAA2D,YAAY,aAAa,MAAM;AAEhG,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAElD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
-
const DSShuttleV2Name = "
|
|
3
|
+
const DSShuttleV2Name = "DSShuttlev2";
|
|
4
4
|
const DSShuttleV2Slots = {
|
|
5
5
|
HEADER_SEARCH_ICON: "header-search-icon",
|
|
6
6
|
WRAPPER: "wrapper",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/DSShuttleV2Definitions.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AACxB;AAEO,MAAM,yBAAyB,wBAAwB,iBAAiB,gBAAgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSShuttleV2Name = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSShuttleV2Name = 'DSShuttlev2';\nexport const REGIONS_FOCUSES = {\n SOURCE_HEADER: 'source-header',\n SOURCE_PANEL: 'source-panel',\n SOURCE_PANEL_ITEM: 'source-panel-item',\n SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n SOURCE_BOTTOM: 'source-bottom',\n DESTINATION_HEADER: 'destination-header',\n DESTINATION_PANEL: 'destination-panel',\n DESTINATION_PANEL_ITEM: 'destination-panel-item',\n DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n DESTINATION_BOTTOM: 'destination-bottom',\n RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n MOVE_BTN: 'move-btn',\n DRILLDOWN_BTN: 'drilldown-btn',\n DRAG_N_DROP: 'drag-n-drop',\n PARENT: 'parent',\n RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,7 +8,7 @@ import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-ico
|
|
|
8
8
|
import { useActionsHandlers } from "./useActionsHandlers.js";
|
|
9
9
|
import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
|
|
10
10
|
import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
|
|
11
|
-
import { usePropsStore } from "../../../config/useStore/useStore.js";
|
|
11
|
+
import { useInternalStore, usePropsStore } from "../../../config/useStore/useStore.js";
|
|
12
12
|
const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
|
|
13
13
|
const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
|
|
14
14
|
const StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`
|
|
@@ -38,7 +38,7 @@ const ItemActions = React2.memo((itemMeta) => {
|
|
|
38
38
|
datumHydratables,
|
|
39
39
|
isDestinationPanel,
|
|
40
40
|
datumRenderFlags,
|
|
41
|
-
datumInternalMeta: { hydratedPreventMove }
|
|
41
|
+
datumInternalMeta: { hydratedPreventMove, hydratedId }
|
|
42
42
|
} = itemMeta;
|
|
43
43
|
const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
|
|
44
44
|
const { preventDrilldown, label } = datumHydratables;
|
|
@@ -49,6 +49,7 @@ const ItemActions = React2.memo((itemMeta) => {
|
|
|
49
49
|
() => `Move option ${label} into ${isDestinationPanel ? "source" : "destination"} panel`,
|
|
50
50
|
[label, isDestinationPanel]
|
|
51
51
|
);
|
|
52
|
+
const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);
|
|
52
53
|
const moveButtonProps = usePropsStore((state) => state.moveButtonProps);
|
|
53
54
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
54
55
|
const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
|
|
@@ -73,7 +74,7 @@ const ItemActions = React2.memo((itemMeta) => {
|
|
|
73
74
|
size: BUTTON_SIZES.S,
|
|
74
75
|
innerRef: innerRefHandlerDrilldown,
|
|
75
76
|
tabIndex: -1,
|
|
76
|
-
disabled: internallyDisabledDrilldown || preventDrilldown === true,
|
|
77
|
+
disabled: internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem,
|
|
77
78
|
children: /* @__PURE__ */ jsx(
|
|
78
79
|
StyledDrilldownIcon,
|
|
79
80
|
{
|
|
@@ -95,7 +96,7 @@ const ItemActions = React2.memo((itemMeta) => {
|
|
|
95
96
|
size: BUTTON_SIZES.S,
|
|
96
97
|
innerRef: innerRefHandlerMove,
|
|
97
98
|
tabIndex: -1,
|
|
98
|
-
disabled: internallyDisabledMove || hydratedPreventMove === true,
|
|
99
|
+
disabled: internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem,
|
|
99
100
|
...moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }),
|
|
100
101
|
children: isDestinationPanel ? /* @__PURE__ */ jsx(
|
|
101
102
|
StyledCloseMediumIcon,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/ItemActions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n datumInternalMeta: { hydratedPreventMove },\n } = itemMeta;\n // withActions is calculated in /src/config/configureAutoCalculated.ts\n const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n const { preventDrilldown, label } = datumHydratables;\n const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n const moveAriaLabel = useMemo(\n () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n [label, isDestinationPanel],\n );\n\n const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {withActions ? (\n <>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={drillDownAriaLabel}\n onClick={handleClickDrilldown}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerDrilldown}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledDrilldown || preventDrilldown === true}\n >\n <StyledDrilldownIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={moveAriaLabel}\n onClick={handleClickSingleMove}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerMove}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledMove || hydratedPreventMove === true}\n {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledItemActionWrapper>\n </>\n ) : (\n // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n <>\n <div />\n <div />\n </>\n )}\n </StyledItemActions>\n );\n});\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n height: 1.692rem !important;\n svg {\n fill: brand-600;\n }\n :disabled svg {\n fill: neutral-200 !important;\n }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n const {\n datumHydratables,\n isDestinationPanel,\n datumRenderFlags,\n datumInternalMeta: { hydratedPreventMove, hydratedId },\n } = itemMeta;\n // withActions is calculated in /src/config/configureAutoCalculated.ts\n const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n const { preventDrilldown, label } = datumHydratables;\n const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n const moveAriaLabel = useMemo(\n () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n [label, isDestinationPanel],\n );\n\n const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n return (\n <StyledItemActions\n cols={actionsCols}\n gutter=\"xxs\"\n pl=\"xs\"\n pr=\"xxs\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {withActions ? (\n <>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={drillDownAriaLabel}\n onClick={handleClickDrilldown}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerDrilldown}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n >\n <StyledDrilldownIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledButton>\n </StyledItemActionWrapper>\n <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledButton\n buttonType=\"icon\"\n aria-label={moveAriaLabel}\n onClick={handleClickSingleMove}\n onKeyDown={handleKeyDownSelectionBubbleUp}\n size={BUTTON_SIZES.S}\n innerRef={innerRefHandlerMove}\n tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledItemActionWrapper>\n </>\n ) : (\n // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n <>\n <div />\n <div />\n </>\n )}\n </StyledItemActions>\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,8 @@ const PanelFilterSection = (panelMetaInfo) => {
|
|
|
39
39
|
onValueChange: handleFilterChange,
|
|
40
40
|
"aria-label": isDestinationPanel ? "Destination input search" : "Source input search",
|
|
41
41
|
getOwnerProps,
|
|
42
|
-
getOwnerPropsArguments
|
|
42
|
+
getOwnerPropsArguments,
|
|
43
|
+
autoFocus: true
|
|
43
44
|
}
|
|
44
45
|
) });
|
|
45
46
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelFilterSection.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n border-bottom: 1px solid neutral-400;\n border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n border: none;\n :focus {\n border-radius: 0;\n }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const { isDestinationPanel = false } = panelMetaInfo;\n const onFilterCb = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n );\n const filterValue = usePropsStore((state) =>\n isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n );\n const handleFilterChange = React.useCallback(\n (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n onFilterCb?.(`${value}`, { event });\n },\n [onFilterCb],\n );\n return (\n <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </StyledSearchWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n border-bottom: 1px solid neutral-400;\n border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n border: none;\n :focus {\n border-radius: 0;\n }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n const { isDestinationPanel = false } = panelMetaInfo;\n const onFilterCb = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n );\n const filterValue = usePropsStore((state) =>\n isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n );\n const handleFilterChange = React.useCallback(\n (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n onFilterCb?.(`${value}`, { event });\n },\n [onFilterCb],\n );\n return (\n <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInputText\n value={filterValue}\n onValueChange={handleFilterChange}\n aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n autoFocus\n />\n </StyledSearchWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACA,WAAS;AAAA;AAAA,EACX,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-shuttle-v2",
|
|
3
|
-
"version": "3.49.0
|
|
3
|
+
"version": "3.49.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Shuttle v2",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -38,32 +38,34 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"fast-deep-equal": "~3.1.3",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.49.0
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-form-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-hooks-
|
|
49
|
-
"@elliemae/ds-hooks-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.49.0
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-popperjs": "3.49.0
|
|
55
|
-
"@elliemae/ds-system": "3.49.0
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.49.0",
|
|
42
|
+
"@elliemae/ds-fast-list": "3.49.0",
|
|
43
|
+
"@elliemae/ds-circular-progress-indicator": "3.49.0",
|
|
44
|
+
"@elliemae/ds-drag-and-drop": "3.49.0",
|
|
45
|
+
"@elliemae/ds-form-input-text": "3.49.0",
|
|
46
|
+
"@elliemae/ds-grid": "3.49.0",
|
|
47
|
+
"@elliemae/ds-hooks-on-blur-out": "3.49.0",
|
|
48
|
+
"@elliemae/ds-hooks-headless-tooltip": "3.49.0",
|
|
49
|
+
"@elliemae/ds-hooks-fontsize-detector": "3.49.0",
|
|
50
|
+
"@elliemae/ds-form-checkbox": "3.49.0",
|
|
51
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.49.0",
|
|
52
|
+
"@elliemae/ds-props-helpers": "3.49.0",
|
|
53
|
+
"@elliemae/ds-icons": "3.49.0",
|
|
54
|
+
"@elliemae/ds-popperjs": "3.49.0",
|
|
55
|
+
"@elliemae/ds-system": "3.49.0",
|
|
56
|
+
"@elliemae/ds-typescript-helpers": "3.49.0",
|
|
57
|
+
"@elliemae/ds-typography": "3.49.0",
|
|
58
|
+
"@elliemae/ds-zustand-helpers": "3.49.0"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
62
|
+
"jest": "~29.7.0",
|
|
63
|
+
"jest-cli": "~29.7.0",
|
|
62
64
|
"lodash": "^4.17.21",
|
|
63
65
|
"styled-components": "~5.3.9",
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-
|
|
66
|
-
"@elliemae/ds-
|
|
66
|
+
"@elliemae/ds-breadcrumb": "3.49.0",
|
|
67
|
+
"@elliemae/ds-tree-model": "3.49.0",
|
|
68
|
+
"@elliemae/ds-monorepo-devops": "3.49.0"
|
|
67
69
|
},
|
|
68
70
|
"peerDependencies": {
|
|
69
71
|
"lodash": "^4.17.21",
|