@elliemae/ds-tabs 3.60.0-next.30 → 3.60.0-next.31

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.
Files changed (9) hide show
  1. package/dist/cjs/parts/carousel/styles.js +5 -0
  2. package/dist/cjs/parts/carousel/styles.js.map +2 -2
  3. package/dist/cjs/parts/tabsPanel/styles.js +4 -0
  4. package/dist/cjs/parts/tabsPanel/styles.js.map +2 -2
  5. package/dist/esm/parts/carousel/styles.js +5 -0
  6. package/dist/esm/parts/carousel/styles.js.map +2 -2
  7. package/dist/esm/parts/tabsPanel/styles.js +4 -0
  8. package/dist/esm/parts/tabsPanel/styles.js.map +2 -2
  9. package/package.json +11 -11
package/dist/cjs/parts/carousel/styles.js CHANGED
@@ -77,6 +77,11 @@ const StyledChildrenWrap = import_ds_system.styled.div`
77
77
  flex: 1;
78
78
  overflow-x: auto;
79
79
  scrollbar-gutter: stable;
80
+
81
+ &:focus-visible {
82
+ outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
83
+ outline-offset: -2px;
84
+ }
80
85
  `;
81
86
  const StyledCarouselButtonWrapper = import_ds_system.styled.div`
82
87
  max-width: 16px;
package/dist/cjs/parts/carousel/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: auto;\n scrollbar-gutter: stable;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,0BAA2B;AAG3B,uBAAkD;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,4BAAwB,yBAAO,gCAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,6BAAyB,yBAAO,gCAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
4
+ "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: auto;\n scrollbar-gutter: stable;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n }\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,0BAA2B;AAG3B,uBAAkD;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,4BAAwB,yBAAO,gCAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,6BAAyB,yBAAO,gCAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/tabsPanel/styles.js CHANGED
@@ -44,6 +44,10 @@ const StyledPanelContainer = (0, import_ds_system.styled)("div", {
44
44
  min-height: 0;
45
45
  padding-top: 8px;
46
46
  ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
47
+ &:focus-visible {
48
+ outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
49
+ outline-offset: -2px;
50
+ }
47
51
  `;
48
52
  const StyledDSSwipeCard = (0, import_ds_system.styled)(import_ds_swipe_card.DSSwipeCard, {
49
53
  name: import_constants.DSTabsName,
package/dist/cjs/parts/tabsPanel/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n flex: 1 1 auto;\n min-height: 0;\n padding-top: 8px;\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n name: DSTabsName,\n slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA4B;AAC5B,uBAAuB;AACvB,uBAAuC;AAuBhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAGtD,MAAM,wBAAoB,yBAAO,kCAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;",
4
+ "sourcesContent": ["import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n flex: 1 1 auto;\n min-height: 0;\n padding-top: 8px;\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n }\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n name: DSTabsName,\n slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA4B;AAC5B,uBAAuB;AACvB,uBAAuC;AAuBhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAAA,yBAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,wBAAoB,yBAAO,kCAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/carousel/styles.js CHANGED
@@ -40,6 +40,11 @@ const StyledChildrenWrap = styled.div`
40
40
  flex: 1;
41
41
  overflow-x: auto;
42
42
  scrollbar-gutter: stable;
43
+
44
+ &:focus-visible {
45
+ outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
46
+ outline-offset: -2px;
47
+ }
43
48
  `;
44
49
  const StyledCarouselButtonWrapper = styled.div`
45
50
  max-width: 16px;
package/dist/esm/parts/carousel/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: auto;\n scrollbar-gutter: stable;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAG3B,SAAS,YAAY,YAAY,iBAAiB;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,wBAAwB,OAAO,YAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,yBAAyB,OAAO,YAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: auto;\n scrollbar-gutter: stable;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n }\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAG3B,SAAS,YAAY,YAAY,iBAAiB;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,wBAAwB,OAAO,YAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,yBAAyB,OAAO,YAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/tabsPanel/styles.js CHANGED
@@ -10,6 +10,10 @@ const StyledPanelContainer = styled("div", {
10
10
  min-height: 0;
11
11
  padding-top: 8px;
12
12
  ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
13
+ &:focus-visible {
14
+ outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
15
+ outline-offset: -2px;
16
+ }
13
17
  `;
14
18
  const StyledDSSwipeCard = styled(DSSwipeCard, {
15
19
  name: DSTabsName,
package/dist/esm/parts/tabsPanel/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n flex: 1 1 auto;\n min-height: 0;\n padding-top: 8px;\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n name: DSTabsName,\n slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAuBhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAGtD,MAAM,oBAAoB,OAAO,aAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n hide: boolean;\n isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\n index: number;\n tabId: string;\n isActive: boolean;\n isDSMobile: boolean;\n content: React.ReactNode;\n style: React.CSSProperties;\n tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n 'aria-hidden': boolean;\n 'data-panel-id': string;\n 'data-testid': string;\n hide: boolean;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n name: DSTabsName,\n slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n flex: 1 1 auto;\n min-height: 0;\n padding-top: 8px;\n ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n }\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n name: DSTabsName,\n slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAuBhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAAA,yBAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,oBAAoB,OAAO,aAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.60.0-next.30",
3
+ "version": "3.60.0-next.31",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -36,20 +36,20 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-button-v2": "3.60.0-next.30",
40
- "@elliemae/ds-icon": "3.60.0-next.30",
41
- "@elliemae/ds-props-helpers": "3.60.0-next.30",
42
- "@elliemae/ds-system": "3.60.0-next.30",
43
- "@elliemae/ds-icons": "3.60.0-next.30",
44
- "@elliemae/ds-swipe-card": "3.60.0-next.30",
45
- "@elliemae/ds-tab-button": "3.60.0-next.30",
46
- "@elliemae/ds-typescript-helpers": "3.60.0-next.30"
39
+ "@elliemae/ds-button-v2": "3.60.0-next.31",
40
+ "@elliemae/ds-icon": "3.60.0-next.31",
41
+ "@elliemae/ds-icons": "3.60.0-next.31",
42
+ "@elliemae/ds-props-helpers": "3.60.0-next.31",
43
+ "@elliemae/ds-swipe-card": "3.60.0-next.31",
44
+ "@elliemae/ds-system": "3.60.0-next.31",
45
+ "@elliemae/ds-tab-button": "3.60.0-next.31",
46
+ "@elliemae/ds-typescript-helpers": "3.60.0-next.31"
47
47
  },
48
48
  "devDependencies": {
49
49
  "jest": "^30.0.0",
50
50
  "styled-components": "~5.3.9",
51
- "@elliemae/ds-monorepo-devops": "3.60.0-next.30",
52
- "@elliemae/ds-test-utils": "3.60.0-next.30"
51
+ "@elliemae/ds-test-utils": "3.60.0-next.31",
52
+ "@elliemae/ds-monorepo-devops": "3.60.0-next.31"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "lodash-es": "^4.17.21",