@elliemae/ds-toolbar-v2 3.36.0-next.0 → 3.36.0-next.1
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/DSToolbarItemV2.js +0 -1
- package/dist/cjs/DSToolbarItemV2.js.map +2 -2
- package/dist/cjs/DSToolbarV2.js +0 -1
- package/dist/cjs/DSToolbarV2.js.map +2 -2
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/useToolbarItemHandlers.js +2 -4
- package/dist/cjs/useToolbarItemHandlers.js.map +1 -1
- package/dist/esm/DSToolbarItemV2.js +0 -1
- package/dist/esm/DSToolbarItemV2.js.map +2 -2
- package/dist/esm/DSToolbarV2.js +0 -1
- package/dist/esm/DSToolbarV2.js.map +2 -2
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/useToolbarItemHandlers.js +2 -4
- package/dist/esm/useToolbarItemHandlers.js.map +1 -1
- package/dist/types/DSToolbarItemV2.d.ts +1 -3
- package/package.json +7 -7
|
@@ -74,7 +74,6 @@ const DSToolbarItemV2 = (props) => {
|
|
|
74
74
|
}
|
|
75
75
|
);
|
|
76
76
|
};
|
|
77
|
-
DSToolbarItemV2.propTypes = import_react_desc_prop_types.DSToolbarItemV2Schema;
|
|
78
77
|
DSToolbarItemV2.displayName = import_DSToolbarDefinitions.DSToolbarItemName;
|
|
79
78
|
const DSToolbarItemV2WithSchema = (0, import_ds_props_helpers.describe)(DSToolbarItemV2).description("Toolbar Item");
|
|
80
79
|
DSToolbarItemV2WithSchema.propTypes = import_react_desc_prop_types.DSToolbarItemV2Schema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarItemV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { StyledToolbarItem } from './styled.js';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers.js';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types.js';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarItemName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\nconst DSToolbarItemV2 = <T extends HTMLElement = HTMLElement>(props: DSToolbarItemT.Props<T>) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarItemT.Props<T>>(\n props,\n defaultItemProps as unknown as DSToolbarItemT.Props<T>,\n );\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes<\n DSToolbarItemT.Props<T>,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref: AnyRef<T> = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (dndDraggingItem === toolbarItemId || (!dndDraggingItem && isFirstItem) ? 0 : -1),\n [dndDraggingItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n <ComponentRenderer innerRef={ref} tabIndex={tabIndex} />\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AAnDN,mBAAmD;AACnD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,oBAAkC;AAClC,oCAAuC;AACvC,mCAAwD;AAExD,kCAAkC;AAElC,MAAM,kBAAkB,CAAsC,UAAmC;AAC/F,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,8DAA+B,mBAAmB,oDAAuB,6CAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,QAAI,gDAIzC,iBAAiB;AACnB,QAAM,EAAE,mBAAmB,gBAAgB,QAAI,yBAAW,4CAAkB;AAC5E,QAAM,UAAiB,qBAAO,IAAI;AAElC,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,uBAAmB,gBAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { StyledToolbarItem } from './styled.js';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers.js';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types.js';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarItemName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\nconst DSToolbarItemV2 = <T extends HTMLElement = HTMLElement>(props: DSToolbarItemT.Props<T>) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarItemT.Props<T>>(\n props,\n defaultItemProps as unknown as DSToolbarItemT.Props<T>,\n );\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes<\n DSToolbarItemT.Props<T>,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref: AnyRef<T> = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (dndDraggingItem === toolbarItemId || (!dndDraggingItem && isFirstItem) ? 0 : -1),\n [dndDraggingItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n <ComponentRenderer innerRef={ref} tabIndex={tabIndex} />\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.displayName = DSToolbarItemName;\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AAnDN,mBAAmD;AACnD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,oBAAkC;AAClC,oCAAuC;AACvC,mCAAwD;AAExD,kCAAkC;AAElC,MAAM,kBAAkB,CAAsC,UAAmC;AAC/F,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,8DAA+B,mBAAmB,oDAAuB,6CAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,QAAI,gDAIzC,iBAAiB;AACnB,QAAM,EAAE,mBAAmB,gBAAgB,QAAI,yBAAW,4CAAkB;AAC5E,QAAM,UAAiB,qBAAO,IAAI;AAElC,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,uBAAmB,gBAAI,CAAC;AACjD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,eAAW;AAAA,IACf,MAAO,oBAAoB,iBAAkB,CAAC,mBAAmB,cAAe,IAAI;AAAA,IACpF,CAAC,iBAAiB,aAAa,aAAa;AAAA,EAC9C;AAEA,QAAM,eAAW,sDAAuB,aAAa;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,sDAAC,qBAAkB,UAAU,KAAK,UAAoB;AAAA;AAAA,EACxD;AAEJ;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/DSToolbarV2.js
CHANGED
|
@@ -78,7 +78,6 @@ const DSToolbarV2 = (props) => {
|
|
|
78
78
|
}
|
|
79
79
|
) });
|
|
80
80
|
};
|
|
81
|
-
DSToolbarV2.propTypes = import_react_desc_prop_types.DSToolbarV2Schema;
|
|
82
81
|
DSToolbarV2.displayName = import_DSToolbarDefinitions.DSToolbarName;
|
|
83
82
|
const DSToolbarV2WithSchema = (0, import_ds_props_helpers.describe)(DSToolbarV2).description("Toolbar");
|
|
84
83
|
DSToolbarV2WithSchema.propTypes = import_react_desc_prop_types.DSToolbarV2Schema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSToolbarV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarT.InternalProps>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes<DSToolbarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);\n\n const [itemReferences, setItemReferences] = useState({});\n const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n innerRef={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CjB;AA7CN,mBAAsD;AACtD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,mCAAgD;AAChD,oBAAqC;AAErC,kCAA8B;AAG9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,wBAAoB,sDAAuD,OAAO,yCAAY;AAEpG,8DAA+B,mBAAmB,gDAAmB,yCAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,mBAAe;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,iBAAa,sBAAQ,MAAM,aAAa,MAAM,kBAAc,gBAAI,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarT.InternalProps>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes<DSToolbarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);\n\n const [itemReferences, setItemReferences] = useState({});\n const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n innerRef={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.displayName = DSToolbarName;\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CjB;AA7CN,mBAAsD;AACtD,8BAKO;AACP,iBAAoB;AACpB,gCAAmC;AACnC,mCAAgD;AAChD,oBAAqC;AAErC,kCAA8B;AAG9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,wBAAoB,sDAAuD,OAAO,yCAAY;AAEpG,8DAA+B,mBAAmB,gDAAmB,yCAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,mBAAe;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,iBAAa,sBAAQ,MAAM,aAAa,MAAM,kBAAc,gBAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;AAE5F,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC,CAAC;AACvD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,EAAE;AAEzD,QAAM,wBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,MAAM,GAAG,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,UAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5F,CAAC,iBAAiB,gBAAgB,mBAAmB,UAAU;AAAA,EACjE;AAEA,SACE,4CAAC,6CAAmB,UAAnB,EAA4B,OAAO,KAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,YAAW;AAAA,MACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,MACtD;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nexport const StyledToolbarWrapper = styled(Grid)<{ compact: boolean; withDepth: boolean }>`\n background-color: ${(props) => props.theme.colors.neutral['000']};\n\n min-height: ${(props) => (props.compact ? '28px' : '36px')};\n max-height: ${(props) => props.theme.space.xxl};\n\n padding: 0 ${(props) => props.theme.space.xxs};\n grid-auto-flow: column;\n box-shadow: ${(props) => (!props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)')};\n\n :focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledToolbarItem = styled(Grid)``;\n\nexport const StyledSeparator = styled(Grid)`\n height: 30px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral[200]};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAiB;AAEjB,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAiB;AAEjB,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAItD,MAAM,2BAAuB,yBAAO,eAAAA,OAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,gBAElD,CAAC,UAAW,MAAM,UAAU,SAAS,MAAO;AAAA,gBAC5C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,gBAE/B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS,4DAA6D;AAAA;AAAA;AAAA,MAG/G,WAAW;AAAA;AAAA;AAIV,MAAM,wBAAoB,yBAAO,eAAAA,OAAI;AAErC,MAAM,sBAAkB,yBAAO,eAAAA,OAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;",
|
|
6
6
|
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -36,8 +36,7 @@ var import_react = require("react");
|
|
|
36
36
|
var import_DSToolbarV2Context = require("./DSToolbarV2Context.js");
|
|
37
37
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
38
38
|
for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
|
|
39
|
-
if (criteria(list[i]))
|
|
40
|
-
return i;
|
|
39
|
+
if (criteria(list[i])) return i;
|
|
41
40
|
}
|
|
42
41
|
return from;
|
|
43
42
|
};
|
|
@@ -71,8 +70,7 @@ const useToolbarItemHandlers = (toolbarItemId) => {
|
|
|
71
70
|
e.preventDefault();
|
|
72
71
|
e.stopPropagation();
|
|
73
72
|
const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
|
|
74
|
-
if (ref.current)
|
|
75
|
-
ref.current.focus();
|
|
73
|
+
if (ref.current) ref.current.focus();
|
|
76
74
|
}
|
|
77
75
|
},
|
|
78
76
|
[toolbarUid, toolbarItemId, itemReferences]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useToolbarItemHandlers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nconst findInCircularList = (\n list: Element[],\n from: number,\n criteria: (item: Element) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n} => {\n const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setDndDraggingItem(toolbarItemId);\n }, [setDndDraggingItem, toolbarItemId]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n const criteria = (item: Element) => {\n const ref = itemReferences[item.id];\n\n return !ref.current?.getAttribute('disabled');\n };\n\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n nextToolbarItemIndex = findInCircularList(\n toolbarItems,\n toolbarItemIndex,\n criteria,\n e.code === 'ArrowLeft' ? -1 : 1,\n );\n } else if (e.code === 'Home') {\n nextToolbarItemIndex = 0;\n } else if (e.code === 'End') {\n nextToolbarItemIndex = toolbarItems.length - 1;\n }\n\n if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {\n e.preventDefault();\n e.stopPropagation();\n const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];\n if (ref.current) ref.current.focus();\n }\n },\n [toolbarUid, toolbarItemId, itemReferences],\n );\n\n return { onKeyDown, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,gCAAmC;AACnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,gCAAmC;AACnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,mBAAmB,QAAI,yBAAW,4CAAkB;AAExF,QAAM,cAAmC,0BAAY,MAAM;AACzD,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,oBAAoB,aAAa,CAAC;AAEtC,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,UAAU,mBAAmB,CAAC;AACrF,UAAI,uBAAuB;AAC3B,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,YAAM,WAAW,CAAC,SAAkB;AAClC,cAAM,MAAM,eAAe,KAAK,EAAE;AAElC,eAAO,CAAC,IAAI,SAAS,aAAa,UAAU;AAAA,MAC9C;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,oBAAoB,EAAE,EAAE;AAChE,YAAI,IAAI,QAAS,KAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,7 +45,6 @@ const DSToolbarItemV2 = (props) => {
|
|
|
45
45
|
}
|
|
46
46
|
);
|
|
47
47
|
};
|
|
48
|
-
DSToolbarItemV2.propTypes = DSToolbarItemV2Schema;
|
|
49
48
|
DSToolbarItemV2.displayName = DSToolbarItemName;
|
|
50
49
|
const DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description("Toolbar Item");
|
|
51
50
|
DSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarItemV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { StyledToolbarItem } from './styled.js';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers.js';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types.js';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarItemName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\nconst DSToolbarItemV2 = <T extends HTMLElement = HTMLElement>(props: DSToolbarItemT.Props<T>) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarItemT.Props<T>>(\n props,\n defaultItemProps as unknown as DSToolbarItemT.Props<T>,\n );\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes<\n DSToolbarItemT.Props<T>,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref: AnyRef<T> = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (dndDraggingItem === toolbarItemId || (!dndDraggingItem && isFirstItem) ? 0 : -1),\n [dndDraggingItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n <ComponentRenderer innerRef={ref} tabIndex={tabIndex} />\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACoDjB;AAnDN,SAAgB,YAAY,SAAS,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,6BAA6B;AAExD,SAAS,yBAAyB;AAElC,MAAM,kBAAkB,CAAsC,UAAmC;AAC/F,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,iCAA+B,mBAAmB,uBAAuB,iBAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,IAAI,uBAIzC,iBAAiB;AACnB,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,WAAW,kBAAkB;AAC5E,QAAM,MAAiB,OAAO,IAAI;AAElC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,mBAAmB,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { StyledToolbarItem } from './styled.js';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers.js';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types.js';\nimport type { DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarItemName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\nconst DSToolbarItemV2 = <T extends HTMLElement = HTMLElement>(props: DSToolbarItemT.Props<T>) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarItemT.Props<T>>(\n props,\n defaultItemProps as unknown as DSToolbarItemT.Props<T>,\n );\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema, DSToolbarItemName);\n const { render: ComponentRenderer, isFirstItem } = propsWithDefaults;\n const { id: providedId, ...restGlobals } = useGetGlobalAttributes<\n DSToolbarItemT.Props<T>,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefaults);\n const { registerReference, dndDraggingItem } = useContext(DSToolbarV2Context);\n const ref: AnyRef<T> = useRef(null);\n\n const toolbarItemId = useMemo(() => {\n const id = providedId ?? `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref, providedId]);\n\n const tabIndex = useMemo(\n () => (dndDraggingItem === toolbarItemId || (!dndDraggingItem && isFirstItem) ? 0 : -1),\n [dndDraggingItem, isFirstItem, toolbarItemId],\n );\n\n const handlers = useToolbarItemHandlers(toolbarItemId);\n return (\n <StyledToolbarItem\n id={toolbarItemId}\n data-testid=\"ds-toolbar-item\"\n className=\"ds-toolbar-item\"\n {...handlers}\n {...restGlobals}\n >\n <ComponentRenderer innerRef={ref} tabIndex={tabIndex} />\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.displayName = DSToolbarItemName;\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoDjB;AAnDN,SAAgB,YAAY,SAAS,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB,6BAA6B;AAExD,SAAS,yBAAyB;AAElC,MAAM,kBAAkB,CAAsC,UAAmC;AAC/F,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,iCAA+B,mBAAmB,uBAAuB,iBAAiB;AAC1F,QAAM,EAAE,QAAQ,mBAAmB,YAAY,IAAI;AACnD,QAAM,EAAE,IAAI,YAAY,GAAG,YAAY,IAAI,uBAIzC,iBAAiB;AACnB,QAAM,EAAE,mBAAmB,gBAAgB,IAAI,WAAW,kBAAkB;AAC5E,QAAM,MAAiB,OAAO,IAAI;AAElC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,KAAK,cAAc,mBAAmB,IAAI,CAAC;AACjD,sBAAkB,IAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,KAAK,UAAU,CAAC;AAEvC,QAAM,WAAW;AAAA,IACf,MAAO,oBAAoB,iBAAkB,CAAC,mBAAmB,cAAe,IAAI;AAAA,IACpF,CAAC,iBAAiB,aAAa,aAAa;AAAA,EAC9C;AAEA,QAAM,WAAW,uBAAuB,aAAa;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,8BAAC,qBAAkB,UAAU,KAAK,UAAoB;AAAA;AAAA,EACxD;AAEJ;AAEA,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSToolbarV2.js
CHANGED
|
@@ -49,7 +49,6 @@ const DSToolbarV2 = (props) => {
|
|
|
49
49
|
}
|
|
50
50
|
) });
|
|
51
51
|
};
|
|
52
|
-
DSToolbarV2.propTypes = DSToolbarV2Schema;
|
|
53
52
|
DSToolbarV2.displayName = DSToolbarName;
|
|
54
53
|
const DSToolbarV2WithSchema = describe(DSToolbarV2).description("Toolbar");
|
|
55
54
|
DSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarT.InternalProps>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes<DSToolbarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);\n\n const [itemReferences, setItemReferences] = useState({});\n const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n innerRef={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8CjB;AA7CN,SAAgB,aAAa,SAAS,gBAAgB;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAG9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAAuD,OAAO,YAAY;AAEpG,iCAA+B,mBAAmB,mBAAmB,aAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,eAAe;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,aAAa,QAAQ,MAAM,aAAa,MAAM,cAAc,IAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledToolbarWrapper } from './styled.js';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types.js';\nimport { DSToolbarName } from './DSToolbarDefinitions.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSToolbarT.InternalProps>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema, DSToolbarName);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes<DSToolbarT.InternalProps, HTMLDivElement, DSGridT.Props>(\n propsWithDefaults,\n );\n\n const toolbarUid = useMemo(() => globalsProps.id ?? `ds-toolbar-${uid()}`, [globalsProps.id]);\n\n const [itemReferences, setItemReferences] = useState({});\n const [dndDraggingItem, setDndDraggingItem] = useState('');\n\n const registerReference = useCallback(\n (itemId: string, ref: React.MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => {\n setItemReferences((prevItemReferences) => ({ ...prevItemReferences, [itemId]: ref }));\n },\n [setItemReferences],\n );\n\n const ctx = useMemo(\n () => ({ toolbarUid, registerReference, itemReferences, dndDraggingItem, setDndDraggingItem }),\n [dndDraggingItem, itemReferences, registerReference, toolbarUid],\n );\n\n return (\n <DSToolbarV2Context.Provider value={ctx}>\n <StyledToolbarWrapper\n role=\"toolbar\"\n data-testid=\"ds-toolbar-wrapper\"\n id={toolbarUid}\n alignItems=\"center\"\n justifyContent={alignment === 'left' ? 'flex-start' : 'flex-end'}\n withDepth={withDepth}\n gutter=\"xxs2\"\n compact={compact}\n innerRef={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.displayName = DSToolbarName;\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8CjB;AA7CN,SAAgB,aAAa,SAAS,gBAAgB;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,4BAA4B;AAErC,SAAS,qBAAqB;AAG9B,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAAuD,OAAO,YAAY;AAEpG,iCAA+B,mBAAmB,mBAAmB,aAAa;AAElF,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,SAAS,IAAI;AAE9D,QAAM,eAAe;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,aAAa,QAAQ,MAAM,aAAa,MAAM,cAAc,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;AAE5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC,CAAC;AACvD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AAEzD,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAAgB,QAAmE;AAClF,wBAAkB,CAAC,wBAAwB,EAAE,GAAG,oBAAoB,CAAC,MAAM,GAAG,IAAI,EAAE;AAAA,IACtF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,YAAY,mBAAmB,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5F,CAAC,iBAAiB,gBAAgB,mBAAmB,UAAU;AAAA,EACjE;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,YAAW;AAAA,MACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,MACtD;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nexport const StyledToolbarWrapper = styled(Grid)<{ compact: boolean; withDepth: boolean }>`\n background-color: ${(props) => props.theme.colors.neutral['000']};\n\n min-height: ${(props) => (props.compact ? '28px' : '36px')};\n max-height: ${(props) => props.theme.space.xxl};\n\n padding: 0 ${(props) => props.theme.space.xxs};\n grid-auto-flow: column;\n box-shadow: ${(props) => (!props.withDepth ? 'none' : '0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%)')};\n\n :focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledToolbarItem = styled(Grid)``;\n\nexport const StyledSeparator = styled(Grid)`\n height: 30px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral[200]};\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,OAAO,UAAU;AAEjB,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,OAAO,UAAU;AAEjB,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAItD,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,gBAElD,CAAC,UAAW,MAAM,UAAU,SAAS,MAAO;AAAA,gBAC5C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,gBAE/B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS,4DAA6D;AAAA;AAAA;AAAA,MAG/G,WAAW;AAAA;AAAA;AAIV,MAAM,oBAAoB,OAAO,IAAI;AAErC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,8 +3,7 @@ import { useCallback, useContext } from "react";
|
|
|
3
3
|
import { DSToolbarV2Context } from "./DSToolbarV2Context.js";
|
|
4
4
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
5
5
|
for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
|
|
6
|
-
if (criteria(list[i]))
|
|
7
|
-
return i;
|
|
6
|
+
if (criteria(list[i])) return i;
|
|
8
7
|
}
|
|
9
8
|
return from;
|
|
10
9
|
};
|
|
@@ -38,8 +37,7 @@ const useToolbarItemHandlers = (toolbarItemId) => {
|
|
|
38
37
|
e.preventDefault();
|
|
39
38
|
e.stopPropagation();
|
|
40
39
|
const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];
|
|
41
|
-
if (ref.current)
|
|
42
|
-
ref.current.focus();
|
|
40
|
+
if (ref.current) ref.current.focus();
|
|
43
41
|
}
|
|
44
42
|
},
|
|
45
43
|
[toolbarUid, toolbarItemId, itemReferences]
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useToolbarItemHandlers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSToolbarV2Context } from './DSToolbarV2Context.js';\nconst findInCircularList = (\n list: Element[],\n from: number,\n criteria: (item: Element) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const useToolbarItemHandlers = (\n toolbarItemId: string,\n): {\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n} => {\n const { toolbarUid, itemReferences, setDndDraggingItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setDndDraggingItem(toolbarItemId);\n }, [setDndDraggingItem, toolbarItemId]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const toolbarItems = [...document.querySelectorAll(`#${toolbarUid} .ds-toolbar-item`)];\n let nextToolbarItemIndex = -1;\n const toolbarItemIndex = toolbarItems.findIndex((domElem) => domElem.id === toolbarItemId);\n\n const criteria = (item: Element) => {\n const ref = itemReferences[item.id];\n\n return !ref.current?.getAttribute('disabled');\n };\n\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n nextToolbarItemIndex = findInCircularList(\n toolbarItems,\n toolbarItemIndex,\n criteria,\n e.code === 'ArrowLeft' ? -1 : 1,\n );\n } else if (e.code === 'Home') {\n nextToolbarItemIndex = 0;\n } else if (e.code === 'End') {\n nextToolbarItemIndex = toolbarItems.length - 1;\n }\n\n if (nextToolbarItemIndex >= 0 && nextToolbarItemIndex < toolbarItems.length) {\n e.preventDefault();\n e.stopPropagation();\n const ref = itemReferences[toolbarItems[nextToolbarItemIndex].id];\n if (ref.current) ref.current.focus();\n }\n },\n [toolbarUid, toolbarItemId, itemReferences],\n );\n\n return { onKeyDown, onFocus };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,0BAA0B;AACnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,0BAA0B;AACnC,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,mBAAmB,IAAI,WAAW,kBAAkB;AAExF,QAAM,UAAmC,YAAY,MAAM;AACzD,uBAAmB,aAAa;AAAA,EAClC,GAAG,CAAC,oBAAoB,aAAa,CAAC;AAEtC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,UAAU,mBAAmB,CAAC;AACrF,UAAI,uBAAuB;AAC3B,YAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,YAAM,WAAW,CAAC,SAAkB;AAClC,cAAM,MAAM,eAAe,KAAK,EAAE;AAElC,eAAO,CAAC,IAAI,SAAS,aAAa,UAAU;AAAA,MAC9C;AAEA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,+BAAuB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,cAAc,KAAK;AAAA,QAChC;AAAA,MACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,+BAAuB;AAAA,MACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,+BAAuB,aAAa,SAAS;AAAA,MAC/C;AAEA,UAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,MAAM,eAAe,aAAa,oBAAoB,EAAE,EAAE;AAChE,YAAI,IAAI,QAAS,KAAI,QAAQ,MAAM;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,eAAe,cAAc;AAAA,EAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { DSToolbarItemT } from './react-desc-prop-types.js';
|
|
3
2
|
declare const DSToolbarItemV2: {
|
|
4
3
|
<T extends HTMLElement = HTMLElement>(props: DSToolbarItemT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
|
|
5
|
-
propTypes: React.WeakValidationMap<DSToolbarItemT.Props<HTMLElement | HTMLButtonElement>>;
|
|
6
4
|
displayName: string;
|
|
7
5
|
};
|
|
8
|
-
declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarItemT.Props<HTMLElement
|
|
6
|
+
declare const DSToolbarItemV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSToolbarItemT.Props<HTMLElement>>;
|
|
9
7
|
export { DSToolbarItemV2, DSToolbarItemV2WithSchema };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar-v2",
|
|
3
|
-
"version": "3.36.0-next.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toolbar V2",
|
|
6
6
|
"files": [
|
|
@@ -90,16 +90,16 @@
|
|
|
90
90
|
"dependencies": {
|
|
91
91
|
"prop-types": "~15.8.1",
|
|
92
92
|
"uid": "2.0.1",
|
|
93
|
-
"@elliemae/ds-button": "3.36.0-next.
|
|
94
|
-
"@elliemae/ds-
|
|
95
|
-
"@elliemae/ds-
|
|
96
|
-
"@elliemae/ds-
|
|
97
|
-
"@elliemae/ds-
|
|
93
|
+
"@elliemae/ds-button": "3.36.0-next.1",
|
|
94
|
+
"@elliemae/ds-grid": "3.36.0-next.1",
|
|
95
|
+
"@elliemae/ds-icons": "3.36.0-next.1",
|
|
96
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
97
|
+
"@elliemae/ds-system": "3.36.0-next.1"
|
|
98
98
|
},
|
|
99
99
|
"devDependencies": {
|
|
100
100
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
101
101
|
"styled-components": "~5.3.9",
|
|
102
|
-
"@elliemae/ds-monorepo-devops": "3.36.0-next.
|
|
102
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
105
|
"lodash": "^4.17.21",
|