@elliemae/ds-toolbar 3.3.1-rc.0 → 3.3.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/esm/DSToolbarItemV2.js +0 -1
- package/dist/esm/DSToolbarItemV2.js.map +1 -1
- package/dist/esm/DSToolbarSeparatorV2.js +0 -1
- package/dist/esm/DSToolbarSeparatorV2.js.map +1 -1
- package/dist/esm/DSToolbarV2.js +0 -1
- package/dist/esm/DSToolbarV2.js.map +1 -1
- package/dist/esm/DSToolbarV2Context.js +0 -1
- package/dist/esm/DSToolbarV2Context.js.map +1 -1
- package/dist/esm/deprecated/DSToolbar.js +0 -1
- package/dist/esm/deprecated/DSToolbar.js.map +1 -1
- package/dist/esm/deprecated/ToolbarDivider.js +0 -1
- package/dist/esm/deprecated/ToolbarDivider.js.map +1 -1
- package/dist/esm/deprecated/ToolbarGroup.js +0 -1
- package/dist/esm/deprecated/ToolbarGroup.js.map +1 -1
- package/dist/esm/deprecated/ToolbarItem.js +0 -1
- package/dist/esm/deprecated/ToolbarItem.js.map +1 -1
- package/dist/esm/deprecated/decorateToolbarChildren.js +0 -1
- package/dist/esm/deprecated/decorateToolbarChildren.js.map +1 -1
- package/dist/esm/deprecated/hooks/useKeyboardNavigation.js +0 -1
- package/dist/esm/deprecated/hooks/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/deprecated/index.js +0 -1
- package/dist/esm/deprecated/index.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +0 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/styled.js +0 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/useToolbarItemHandlers.js +0 -1
- package/dist/esm/useToolbarItemHandlers.js.map +1 -1
- package/package.json +9 -9
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarItemV2.tsx"],
|
|
4
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-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { StyledToolbarItem } from './styled';\nimport { useToolbarItemHandlers } from './useToolbarItemHandlers';\nimport { defaultItemProps, DSToolbarItemV2Schema } from './react-desc-prop-types';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\nconst DSToolbarItemV2: React.ComponentType<DSToolbarItemT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarItemV2Schema);\n const { render, isFirstItem } = propsWithDefaults;\n const { id, ...restGlobals } = useGetGlobalAttributes(propsWithDefaults);\n const { registerReference, activeItem } = useContext(DSToolbarV2Context);\n const ref = useRef(null);\n const toolbarItemId = useMemo(() => {\n const id = `ds-toolbar-item-${uid()}`;\n registerReference(id, ref);\n return id;\n }, [registerReference, ref]);\n\n const tabIndex = useMemo(\n () => (activeItem === toolbarItemId || (!activeItem && isFirstItem) ? 0 : -1),\n [activeItem, 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 {render({ innerRef: ref, tabIndex })}\n </StyledToolbarItem>\n );\n};\n\nDSToolbarItemV2.propTypes = DSToolbarItemV2Schema;\n\nDSToolbarItemV2.displayName = 'DSToolbarItemV2';\nconst DSToolbarItemV2WithSchema = describe(DSToolbarItemV2).description('Toolbar Item');\nDSToolbarItemV2WithSchema.propTypes = DSToolbarItemV2Schema;\n\nexport { DSToolbarItemV2, DSToolbarItemV2WithSchema };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,gBAAgB;AAE9E,iCAA+B,mBAAmB,qBAAqB;AACvE,QAAM,EAAE,QAAQ,gBAAgB;AAChC,QAAM,EAAE,OAAO,gBAAgB,uBAAuB,iBAAiB;AACvE,QAAM,EAAE,mBAAmB,eAAe,WAAW,kBAAkB;AACvE,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,MAAK,mBAAmB,IAAI;AAClC,sBAAkB,KAAI,GAAG;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,GAAG,CAAC;AAE3B,QAAM,WAAW,QACf,MAAO,eAAe,iBAAkB,CAAC,cAAc,cAAe,IAAI,IAC1E,CAAC,YAAY,aAAa,aAAa,CACzC;AAEA,QAAM,WAAW,uBAAuB,aAAa;AACrD,SACE,qCAAC;AAAA,IACC,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CACrC;AAEJ;AAEA,gBAAgB,YAAY;AAE5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe,EAAE,YAAY,cAAc;AACtF,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarSeparatorV2.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledSeparator } from './styled';\n\nexport const DSToolbarSeparatorV2: React.ComponentType = () => <StyledSeparator className=\"ds-toolbar-separator\" />;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAA4C,MAAM,qCAAC;AAAA,EAAgB,WAAU;AAAA,CAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSToolbarV2.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2.tsx"],
|
|
4
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} from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { DSToolbarV2Context } from './DSToolbarV2Context';\nimport { DSToolbarV2Schema, defaultProps } from './react-desc-prop-types';\nimport { StyledToolbarWrapper } from './styled';\nimport type { DSToolbarT, DSToolbarItemT } from './react-desc-prop-types';\n\nconst DSToolbarV2: React.ComponentType<DSToolbarT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefaults, DSToolbarV2Schema);\n\n const { alignment, withDepth, compact, innerRef, children } = propsWithDefaults;\n\n const globalsProps = useGetGlobalAttributes(propsWithDefaults);\n\n const toolbarUid = useMemo(() => `ds-toolbar-${uid()}`, []);\n\n const [itemReferences, setItemReferences] = useState({});\n const [activeItem, setActiveItem] = 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, activeItem, setActiveItem }),\n [activeItem, 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 ref={innerRef}\n {...globalsProps}\n >\n {children}\n </StyledToolbarWrapper>\n </DSToolbarV2Context.Provider>\n );\n};\n\nDSToolbarV2.propTypes = DSToolbarV2Schema;\n\nDSToolbarV2.displayName = 'DSToolbarV2';\nconst DSToolbarV2WithSchema = describe(DSToolbarV2).description('Toolbar');\nDSToolbarV2WithSchema.propTypes = DSToolbarV2Schema;\n\nexport { DSToolbarV2, DSToolbarV2WithSchema };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,iCAA+B,mBAAmB,iBAAiB;AAEnE,QAAM,EAAE,WAAW,WAAW,SAAS,UAAU,aAAa;AAE9D,QAAM,eAAe,uBAAuB,iBAAiB;AAE7D,QAAM,aAAa,QAAQ,MAAM,cAAc,IAAI,KAAK,CAAC,CAAC;AAE1D,QAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC,CAAC;AACvD,QAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;AAE/C,QAAM,oBAAoB,YACxB,CAAC,QAAgB,QAAmE;AAClF,sBAAkB,CAAC,uBAAwB,GAAE,GAAG,oBAAoB,CAAC,SAAS,IAAI,EAAE;AAAA,EACtF,GACA,CAAC,iBAAiB,CACpB;AAEA,QAAM,MAAM,QACV,MAAO,GAAE,YAAY,mBAAmB,gBAAgB,YAAY,cAAc,IAClF,CAAC,YAAY,gBAAgB,mBAAmB,UAAU,CAC5D;AAEA,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,YAAW;AAAA,IACX,gBAAgB,cAAc,SAAS,eAAe;AAAA,IACtD;AAAA,IACA,QAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACJ,GAAG;AAAA,KAEH,QACH,CACF;AAEJ;AAEA,YAAY,YAAY;AAExB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,SAAS;AACzE,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSToolbarV2Context.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, MutableRefObject } from 'react';\nimport type { DSToolbarItemT } from './react-desc-prop-types';\ninterface IDSToolbarV2Context {\n registerReference: (uid: string, ref: MutableRefObject<DSToolbarItemT.RenderHTMLElementT>) => void;\n itemReferences: Record<string, MutableRefObject<DSToolbarItemT.RenderHTMLElementT>>;\n toolbarUid: string;\n activeItem: string;\n setActiveItem: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DSToolbarV2Context = createContext<IDSToolbarV2Context>({\n registerReference: () => null,\n itemReferences: {},\n toolbarUid: '',\n activeItem: '',\n setActiveItem: () => {},\n});\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAUO,MAAM,qBAAqB,cAAmC;AAAA,EACnE,mBAAmB,MAAM;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSToolbar.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, PropTypes, mergeRefs } from '@elliemae/ds-utilities';\nimport decorateToolbarChildren from './decorateToolbarChildren';\nimport Item from './ToolbarItem';\nimport ToolbarGroup from './ToolbarGroup';\nimport Divider from './ToolbarDivider';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\n\nconst blockName = 'toolbar';\n\nconst ToolbarContainer = aggregatedClasses('div')(blockName, null, ({ withDepth, alignment, size }) => ({\n 'without-depth': !withDepth,\n [alignment]: !!alignment,\n [size]: size,\n}));\n\nconst DSToolbar = ({\n containerProps = {},\n innerRef,\n withDepth = true,\n alignment = 'right', // left || right\n autoFocusOnMount = true,\n children = [],\n size = 'normal',\n ...otherProps\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const { handleOnKeyDown } = useKeyboardNavigation({ containerRef, autoFocusOnMount });\n\n return (\n <ToolbarContainer\n {...containerProps}\n {...otherProps}\n classProps={{ withDepth, alignment, size }}\n innerRef={mergeRefs(innerRef, containerRef)}\n onKeyDown={handleOnKeyDown}\n >\n {decorateToolbarChildren(children)}\n </ToolbarContainer>\n );\n};\n\nconst toolbarProps = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n withDepth: PropTypes.bool.description('Shows a shadow rear the toolbar').defaultValue(true),\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Aligns the toolbar to the left or right')\n .defaultValue('right'),\n size: PropTypes.oneOf(['normal', 'compact']).description('Toolbar size').defaultValue('normal'),\n autoFocusOnMount: PropTypes.bool\n .description('Wheter to focus the component when it mounts or not')\n .defaultValue(true),\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.node]).description('Toolbar items')\n .isRequired,\n innerRef: PropTypes.object.description('Ref to the Toolbar container element'),\n};\n\nDSToolbar.propTypes = toolbarProps;\nDSToolbar.displayName = 'DSToolbar';\nconst ToolbarWithSchema = describe(DSToolbar);\nToolbarWithSchema.propTypes = toolbarProps;\n\nexport { DSToolbar, Item as ToolbarItem, ToolbarGroup, Divider as ToolbarDivider, ToolbarWithSchema };\n\nexport default DSToolbar;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,WAAW,WAAW,WAAY;AAAA,EACtG,iBAAiB,CAAC;AAAA,EAClB,CAAC,YAAY,CAAC,CAAC;AAAA,EACf,CAAC,OAAO;AACV,EAAE;AAEF,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,KACJ;AAAA,MACC;AACJ,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,oBAAoB,sBAAsB,EAAE,cAAc,iBAAiB,CAAC;AAEpF,SACE,qCAAC;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,YAAY,EAAE,WAAW,WAAW,KAAK;AAAA,IACzC,UAAU,UAAU,UAAU,YAAY;AAAA,IAC1C,WAAW;AAAA,KAEV,wBAAwB,QAAQ,CACnC;AAEJ;AAEA,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,WAAW,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAC1F,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,yCAAyC,EACrD,aAAa,OAAO;AAAA,EACvB,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,QAAQ;AAAA,EAC9F,kBAAkB,UAAU,KACzB,YAAY,qDAAqD,EACjE,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,UAAU,IAAI,CAAC,EAAE,YAAY,eAAe,EACzG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAC/E;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarDivider.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'toolbar';\n\nconst ToolbarDivider = aggregatedClasses('div')(blockName, 'divider');\n\nToolbarDivider.displayName = 'ToolbarDivider';\n\nexport default ToolbarDivider;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAElB,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAEpE,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport decorateToolbarChildren from './decorateToolbarChildren';\n\nconst blockName = 'toolbar-group';\n\nconst ToolbarGroupContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ space }) => ({\n [`space-${space}`]: !!space,\n }),\n);\n\nconst ToolbarGroup = ({ children, size, space = 0 }) => (\n <ToolbarGroupContainer classProps={{ space }}>\n {decorateToolbarChildren(children, { size })}\n </ToolbarGroupContainer>\n);\n\nToolbarGroup.propTypes = {\n children: PropTypes.any,\n size: PropTypes.number,\n space: PropTypes.number,\n};\n\nexport default ToolbarGroup;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,KAAK,EACnD,WACA,MACA,CAAC,EAAE,YAAa;AAAA,EACd,CAAC,SAAS,UAAU,CAAC,CAAC;AACxB,EACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,MAAM,QAAQ,QAC9C,qCAAC;AAAA,EAAsB,YAAY,EAAE,MAAM;AAAA,GACxC,wBAAwB,UAAU,EAAE,KAAK,CAAC,CAC7C;AAGF,aAAa,YAAY;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU;AACnB;AAEA,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/ToolbarItem.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useFocusGroupWithState } from '@elliemae/ds-shared';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { PopperPositions as Position } from '@elliemae/ds-popper';\n\nconst ToolbarItem = ({ icon, labelText, menu = undefined, containerProps = {}, ...otherProps }) => {\n const [ref, setRef] = useState(null);\n\n useFocusGroupWithState(ref);\n const btn = (\n <DSButtonV2 {...otherProps} buttonType=\"icon\" innerRef={(r) => setRef(r)} labelText={labelText} {...containerProps}>\n {icon}\n </DSButtonV2>\n );\n if (menu) {\n return React.cloneElement(menu, {\n ...menu.props,\n placement: Position.BOTTOM_END,\n triggerComponent: btn,\n });\n }\n return btn;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nToolbarItem.propTypes = {\n icon: PropTypes.element,\n labelText: PropTypes.string,\n};\n\nexport default ToolbarItem;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,EAAE,MAAM,WAAW,OAAO,QAAW,iBAAiB,CAAC,MAAM,iBAAiB;AACjG,QAAM,CAAC,KAAK,UAAU,SAAS,IAAI;AAEnC,yBAAuB,GAAG;AAC1B,QAAM,MACJ,qCAAC;AAAA,IAAY,GAAG;AAAA,IAAY,YAAW;AAAA,IAAO,UAAU,CAAC,MAAM,OAAO,CAAC;AAAA,IAAG;AAAA,IAAuB,GAAG;AAAA,KACjG,IACH;AAEF,MAAI,MAAM;AACR,WAAO,OAAM,aAAa,MAAM;AAAA,MAC9B,GAAG,KAAK;AAAA,MACR,WAAW,SAAS;AAAA,MACpB,kBAAkB;AAAA,IACpB,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEA,YAAY,cAAc;AAE1B,YAAY,YAAY;AAAA,EACtB,MAAM,UAAU;AAAA,EAChB,WAAW,UAAU;AACvB;AAEA,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/decorateToolbarChildren.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement } from 'react';\n\nexport default (children, extraProps = {}) =>\n React.Children.map(\n children,\n component =>\n component\n ? cloneElement(component, {\n ...extraProps,\n ...component.props,\n className: `${component.props.className} toolbar-item`,\n })\n : component,\n null,\n );\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA,IAAO,kCAAQ,CAAC,UAAU,aAAa,CAAC,MACtC,OAAM,SAAS,IACb,UACA,eACE,YACI,aAAa,WAAW;AAAA,EACtB,GAAG;AAAA,EACH,GAAG,UAAU;AAAA,EACb,WAAW,GAAG,UAAU,MAAM;AAChC,CAAC,IACD,WACN,IACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/hooks/useKeyboardNavigation.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback } from 'react';\n\ninterface useKeyboardNavigationT {\n containerRef: React.MutableRefObject<HTMLDivElement | null>;\n autoFocusOnMount: boolean;\n}\n\n// Toolbar should not allow to use Tab/Shift+Tab to navigate between ToolbarItems.\n// Tab/Shift+Tab should be only used once to enter the whole controller.\n// Toolbars should be only navigable with Arrows to follow correct a11y.\n// https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html\n\nexport const useKeyboardNavigation = ({ containerRef, autoFocusOnMount }: useKeyboardNavigationT) => {\n const allChildrenButtonRef = useRef<NodeListOf<HTMLButtonElement> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n allChildrenButtonRef.current = containerRef.current.querySelectorAll('button');\n // allChildrenButtonRef.current.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '-1');\n // }\n // });\n }\n\n if (autoFocusOnMount) {\n setTimeout(() => allChildrenButtonRef.current?.[0].focus());\n }\n\n // return () => {\n // allChildrenButtonRef.current?.forEach((button, index) => {\n // if (index !== 0) {\n // button.setAttribute('tabindex', '');\n // }\n // });\n // };\n }, [autoFocusOnMount]);\n\n const handleOnKeyDown = useCallback((e) => {\n if (allChildrenButtonRef.current) {\n const lastButton = allChildrenButtonRef.current[allChildrenButtonRef.current?.length - 1];\n const firstButton = allChildrenButtonRef.current[0];\n\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n if (e.target !== lastButton) {\n e.target.nextSibling.focus();\n } else {\n firstButton.focus();\n }\n }\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n if (e.target !== firstButton) {\n e.target.previousSibling.focus();\n } else {\n lastButton.focus();\n }\n }\n }\n }, []);\n\n return {\n handleOnKeyDown,\n };\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAYO,MAAM,wBAAwB,CAAC,EAAE,cAAc,uBAA+C;AACnG,QAAM,uBAAuB,OAA6C,IAAI;AAE9E,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,2BAAqB,UAAU,aAAa,QAAQ,iBAAiB,QAAQ;AAAA,IAM/E;AAEA,QAAI,kBAAkB;AACpB,iBAAW,MAAM,qBAAqB,UAAU,GAAG,MAAM,CAAC;AAAA,IAC5D;AAAA,EASF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,kBAAkB,YAAY,CAAC,MAAM;AACzC,QAAI,qBAAqB,SAAS;AAChC,YAAM,aAAa,qBAAqB,QAAQ,qBAAqB,SAAS,SAAS;AACvF,YAAM,cAAc,qBAAqB,QAAQ;AAEjD,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,YAAY;AAC3B,YAAE,OAAO,YAAY,MAAM;AAAA,QAC7B,OAAO;AACL,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,YAAI,EAAE,WAAW,aAAa;AAC5B,YAAE,OAAO,gBAAgB,MAAM;AAAA,QACjC,OAAO;AACL,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/export */\nexport * from './DSToolbar';\n\nexport { default } from './DSToolbar';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AAEA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './deprecated';\nexport { default } from './deprecated';\nexport * from './DSToolbarV2';\nexport * from './DSToolbarItemV2';\nexport * from './DSToolbarSeparatorV2';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSToolbarT {\n export interface Props {\n alignment?: 'left' | 'right';\n withDepth?: boolean;\n compact?: boolean;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n children: React.Component<DSToolbarItemT.Props>;\n }\n}\n\nexport declare namespace DSToolbarItemT {\n export type RenderHTMLElementT =\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLTextAreaElement\n | HTMLSelectElement\n | HTMLOptionElement;\n export interface Props {\n render: (props: { innerRef: React.MutableRefObject<HTMLElement>; tabIndex: number }) => JSX.Element;\n isFirstItem?: boolean;\n }\n}\n\nexport const defaultItemProps = {\n render: () => {},\n isFirstItem: false,\n};\n\nexport const defaultProps = {\n alignment: 'right',\n withDepth: true,\n compact: false,\n};\n\nexport const DSToolbarV2Schema = {\n ...globalAttributesPropTypes,\n alignment: PropTypes.oneOf(['right', 'left'])\n .description('Whether to align the content left or right')\n .defaultValue('right'),\n withDepth: PropTypes.bool.description('Whether to add a box-shadow to the container').defaultValue(true),\n compact: PropTypes.bool.description('Whether you want the compact version of the toolbar').defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Reference to attach to the wrapper'),\n};\n\nexport const DSToolbarItemV2Schema = {\n ...globalAttributesPropTypes,\n render: PropTypes.func.isRequired.description('render function').defaultValue(() => {}),\n isFirstItem: PropTypes.bool\n .description(\n 'If true the item will have tab index 0 to be the first element focusable by keyboard on the page load',\n )\n .defaultValue(false),\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAyBO,MAAM,mBAAmB;AAAA,EAC9B,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,WAAW,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EACzC,YAAY,4CAA4C,EACxD,aAAa,OAAO;AAAA,EACvB,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,IAAI;AAAA,EACvG,SAAS,UAAU,KAAK,YAAY,qDAAqD,EAAE,aAAa,KAAK;AAAA,EAC7G,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,oCAAoC;AACpH;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,WAAW,YAAY,iBAAiB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACtF,aAAa,UAAU,KACpB,YACC,uGACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
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 } from '@elliemae/ds-system';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledToolbarWrapper = styled(Grid)`\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\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": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO,IAAI;AAAA,sBACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE5C,CAAC,UAAW,MAAM,UAAU,SAAS;AAAA,gBACrC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,gBAE5B,CAAC,UAAW,CAAC,MAAM,YAAY,SAAS;AAAA;AAGjD,MAAM,oBAAoB,OAAO,IAAI;AAErC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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';\n\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, setActiveItem } = useContext(DSToolbarV2Context);\n\n const onFocus: React.FocusEventHandler = useCallback(() => {\n setActiveItem(toolbarItemId);\n }, [setActiveItem, 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.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": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA,MAAM,qBAAqB,CACzB,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,kBAIG;AACH,QAAM,EAAE,YAAY,gBAAgB,kBAAkB,WAAW,kBAAkB;AAEnF,QAAM,UAAmC,YAAY,MAAM;AACzD,kBAAc,aAAa;AAAA,EAC7B,GAAG,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,YAAwC,YAC5C,CAAC,MAAM;AACL,UAAM,eAAe,CAAC,GAAG,SAAS,iBAAiB,IAAI,6BAA6B,CAAC;AACrF,QAAI,uBAAuB;AAC3B,UAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,QAAQ,OAAO,aAAa;AAEzF,UAAM,WAAW,CAAC,SAAkB;AAClC,YAAM,MAAM,eAAe,KAAK;AAEhC,aAAO,CAAC,IAAI,QAAQ;AAAA,IACtB;AAEA,QAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,6BAAuB,mBACrB,cACA,kBACA,UACA,EAAE,SAAS,cAAc,KAAK,CAChC;AAAA,IACF,WAAW,EAAE,SAAS,QAAQ;AAC5B,6BAAuB;AAAA,IACzB,WAAW,EAAE,SAAS,OAAO;AAC3B,6BAAuB,aAAa,SAAS;AAAA,IAC/C;AAEA,QAAI,wBAAwB,KAAK,uBAAuB,aAAa,QAAQ;AAC3E,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,YAAM,MAAM,eAAe,aAAa,sBAAsB;AAC9D,UAAI,IAAI;AAAS,YAAI,QAAQ,MAAM;AAAA,IACrC;AAAA,EACF,GACA,CAAC,YAAY,eAAe,cAAc,CAC5C;AAEA,SAAO,EAAE,WAAW,QAAQ;AAC9B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-toolbar",
|
|
3
|
-
"version": "3.3.1
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Toolbar",
|
|
6
6
|
"files": [
|
|
@@ -87,14 +87,14 @@
|
|
|
87
87
|
"indent": 4
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"@elliemae/ds-button": "3.3.1
|
|
91
|
-
"@elliemae/ds-classnames": "3.3.1
|
|
92
|
-
"@elliemae/ds-grid": "3.3.1
|
|
93
|
-
"@elliemae/ds-icons": "3.3.1
|
|
94
|
-
"@elliemae/ds-popper": "3.3.1
|
|
95
|
-
"@elliemae/ds-shared": "3.3.1
|
|
96
|
-
"@elliemae/ds-system": "3.3.1
|
|
97
|
-
"@elliemae/ds-utilities": "3.3.1
|
|
90
|
+
"@elliemae/ds-button": "3.3.1",
|
|
91
|
+
"@elliemae/ds-classnames": "3.3.1",
|
|
92
|
+
"@elliemae/ds-grid": "3.3.1",
|
|
93
|
+
"@elliemae/ds-icons": "3.3.1",
|
|
94
|
+
"@elliemae/ds-popper": "3.3.1",
|
|
95
|
+
"@elliemae/ds-shared": "3.3.1",
|
|
96
|
+
"@elliemae/ds-system": "3.3.1",
|
|
97
|
+
"@elliemae/ds-utilities": "3.3.1",
|
|
98
98
|
"prop-types": "~15.8.1",
|
|
99
99
|
"uid": "2.0.0"
|
|
100
100
|
},
|