@fluentui/react-carousel 9.9.6 → 9.9.8
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/CHANGELOG.md +33 -2
- package/dist/index.d.ts +8 -8
- package/lib/components/Carousel/useCarouselStyles.styles.js +1 -0
- package/lib/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js +3 -1
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +2 -0
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +2 -0
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselButton/CarouselButton.types.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButton.js +1 -0
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCard.js +3 -0
- package/lib/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js +1 -0
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselContext.js.map +1 -1
- package/lib/components/CarouselContext.types.js +3 -1
- package/lib/components/CarouselContext.types.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNav.js +1 -1
- package/lib/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNav.types.js +1 -1
- package/lib/components/CarouselNav/CarouselNav.types.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavContext.js +0 -11
- package/lib/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNav.js +0 -1
- package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavContextValues.js +13 -0
- package/lib/components/CarouselNav/useCarouselNavContextValues.js.map +1 -0
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js +1 -0
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +1 -0
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js +0 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +4 -0
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +4 -0
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -0
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +2 -0
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSlider.js +1 -1
- package/lib/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSliderContext.js +0 -11
- package/lib/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSlider.js +0 -1
- package/lib/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderContextValues.js +13 -0
- package/lib/components/CarouselSlider/useCarouselSliderContextValues.js.map +1 -0
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js +1 -0
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.js +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
- package/lib/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewport.js +4 -0
- package/lib/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -0
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib/components/useEmblaCarousel.js +1 -0
- package/lib/components/useEmblaCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js +1 -0
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js +3 -3
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +2 -0
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/CarouselButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js +1 -0
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCard.js +3 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselContext.js.map +1 -1
- package/lib-commonjs/components/CarouselContext.types.js +3 -3
- package/lib-commonjs/components/CarouselContext.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNav.js +2 -2
- package/lib-commonjs/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNav.types.js +0 -2
- package/lib-commonjs/components/CarouselNav/CarouselNav.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNavContext.js +0 -14
- package/lib-commonjs/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNav.js +0 -2
- package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavContextValues.js +24 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavContextValues.js.map +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js +0 -2
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +4 -0
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +4 -0
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -0
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.js +2 -2
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js +0 -14
- package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js +0 -2
- package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderContextValues.js +24 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderContextValues.js.map +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.js +2 -2
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js +4 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/useEmblaCarousel.js +1 -0
- package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './useCarouselNavContextValues';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;6CAGsB,gCAAgC;mCAC1C,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,iEAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":""}
|
|
@@ -18,9 +18,6 @@ _export(exports, {
|
|
|
18
18
|
},
|
|
19
19
|
useCarouselNavContext: function() {
|
|
20
20
|
return useCarouselNavContext;
|
|
21
|
-
},
|
|
22
|
-
useCarouselNavContextValues_unstable: function() {
|
|
23
|
-
return useCarouselNavContextValues_unstable;
|
|
24
21
|
}
|
|
25
22
|
});
|
|
26
23
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
@@ -34,14 +31,3 @@ const useCarouselNavContext = ()=>{
|
|
|
34
31
|
return (_React_useContext = _react.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
|
|
35
32
|
};
|
|
36
33
|
const CarouselNavContextProvider = carouselNavContext.Provider;
|
|
37
|
-
function useCarouselNavContextValues_unstable(state) {
|
|
38
|
-
const { appearance } = state;
|
|
39
|
-
const carouselNav = _react.useMemo(()=>({
|
|
40
|
-
appearance
|
|
41
|
-
}), [
|
|
42
|
-
appearance
|
|
43
|
-
]);
|
|
44
|
-
return {
|
|
45
|
-
carouselNav
|
|
46
|
-
};
|
|
47
|
-
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n carouselNav: CarouselNavContextValue;\n};\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;8BAcaQ;;;kCAPAJ;;;yBAIAE;eAAAA;;;;iEATU,QAAQ;AAG/B,MAAML,mCAAqBD,OAAME,aAAa,CAAsCC;AAE7E,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEK,8BAA8B;QACnCH;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,mBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAwCI;EAA+B;AAElE,MAAMI,6BAA6BP,mBAAmBQ,QAAQ,CAAC"}
|
|
@@ -9,10 +9,8 @@ Object.defineProperty(exports, "useCarouselNav_unstable", {
|
|
|
9
9
|
return useCarouselNav_unstable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
12
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
14
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
16
14
|
const _CarouselContext = require("../CarouselContext");
|
|
17
15
|
const useCarouselNav_unstable = (props, ref)=>{
|
|
18
16
|
const { appearance } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;8BAjB2B,0BAA0B;gCACQ,4BAA4B;iCAGpC,qBAAqB;AAahF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,yBAAqBX,qCAAAA,EAAwB;QACjDY,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,OAAGX,oCAAAA,EAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,yBAAqBf,4CAAAA,EAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;QAE3EjB,yCAAAA,EAA0B;QACxB,OAAOiB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,OAAO;YAC9BQ;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "useCarouselNavContextValues_unstable", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function() {
|
|
9
|
+
return useCarouselNavContextValues_unstable;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
function useCarouselNavContextValues_unstable(state) {
|
|
15
|
+
const { appearance } = state;
|
|
16
|
+
const carouselNav = _react.useMemo(()=>({
|
|
17
|
+
appearance
|
|
18
|
+
}), [
|
|
19
|
+
appearance
|
|
20
|
+
]);
|
|
21
|
+
return {
|
|
22
|
+
carouselNav
|
|
23
|
+
};
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValues } from './CarouselNavContext';\nimport type { CarouselNavState } from './CarouselNav.types';\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n const { appearance } = state;\n const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n return { carouselNav };\n}\n"],"names":["React","useCarouselNavContextValues_unstable","state","appearance","carouselNav","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,UAAU,EAAE,GAAGD;IACvB,MAAME,cAAcJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAW,CAAA,EAAI;QAACA;KAAW;IAEtE,OAAO;QAAEC;IAAY;AACvB"}
|
|
@@ -102,6 +102,7 @@ const carouselNavClassNames = {
|
|
|
102
102
|
const useCarouselNavStyles_unstable = (state)=>{
|
|
103
103
|
'use no memo';
|
|
104
104
|
const styles = useStyles();
|
|
105
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
105
106
|
state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
|
|
106
107
|
return state;
|
|
107
108
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,OAAGzC,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -45,6 +45,7 @@ const carouselNavClassNames = {
|
|
|
45
45
|
const useCarouselNavStyles_unstable = (state)=>{
|
|
46
46
|
'use no memo';
|
|
47
47
|
const styles = useStyles();
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
48
49
|
state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
|
|
49
50
|
return state;
|
|
50
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,qBAAAA;;;iCA4BAmB;;;;uBAnCwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAKxC,8BAAgE;IACrElB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,OAAGT,6CAAAA,EAAgC;YACjCU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;YACvC,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,kBAAAA,CAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,kBAAAA,CAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,kBAAAA,CAAOmB,2BAA2B;IACrD;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,qBAAAA;;;iCA4BAmB;;;;uBAnCwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAKxC,8BAAgE;IACrElB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,OAAGT,6CAAAA,EAAgC;YACjCU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;YACvC,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,kBAAAA,CAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,kBAAAA,CAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,kBAAAA,CAAOmB,2BAA2B;IACrD;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACf,oDAAoD;IACpDkB,MAAMnB,IAAI,CAACqB,SAAS,OAAG1B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}
|
|
@@ -314,6 +314,7 @@ const useCarouselNavButtonStyles_unstable = (state)=>{
|
|
|
314
314
|
'use no memo';
|
|
315
315
|
const styles = useStyles();
|
|
316
316
|
const { selected, appearance } = state;
|
|
317
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
317
318
|
state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
|
|
318
319
|
return state;
|
|
319
320
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","xdqbwx","Hwb57","umgawz","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,2BAA2B;;;
|
|
1
|
+
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","xdqbwx","Hwb57","umgawz","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
|
|
@@ -137,6 +137,7 @@ const useCarouselNavButtonStyles_unstable = (state)=>{
|
|
|
137
137
|
'use no memo';
|
|
138
138
|
const styles = useStyles();
|
|
139
139
|
const { selected, appearance } = state;
|
|
140
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
140
141
|
state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
|
|
141
142
|
return state;
|
|
142
143
|
};
|
package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,2BAAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,2BAAAA;;;IAuHAsC,mCAAAA;;;;uBA7HwC,iBAAiB;8BAGtB,0BAA0B;4BACnD,wBAAwB;AAExC,oCAA4E;IACjFrC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,QAAQ;QACRC,eAAe;QACfC,OAAON,kBAAAA,CAAOO,kBAAkB;QAChCC,QAAQR,kBAAAA,CAAOS,gBAAgB;QAC/BC,SAAS,GAAGV,kBAAAA,CAAOS,gBAAgB,CAAC,CAAC,EAAET,kBAAAA,CAAOO,kBAAkB,EAAE;QAClEI,WAAW;QACXC,iBAAiBZ,kBAAAA,CAAOa,0BAA0B;QAClD,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,EAAE;QAC5B,WAAW;YACTC,SAAS;YACTC,SAAS;YACTL,WAAW;YACXM,cAAc;YACdC,QAAQ;YACRV,QAAQR,kBAAAA,CAAOS,gBAAgB;YAC/BH,OAAON,kBAAAA,CAAOO,kBAAkB;YAChCK,iBAAiBZ,kBAAAA,CAAOmB,uBAAuB;YAC/CC,OAAOpB,kBAAAA,CAAOmB,uBAAuB;YACrC,kCAAkC;gBAChC,iFAAiF;gBACjFE,mBAAmB;gBACnBT,iBAAiB;gBACjBU,cAAc;YAChB;QACF;IACF;IACAC,gBAAgB;QACdC,SAAS,GAAGxB,kBAAAA,CAAOyB,eAAe,CAAC,kBAAkB,CAAC;QACtD,OAAG1B,6CAAAA,EAAgC;YACjCmB,QAAQ,GAAGlB,kBAAAA,CAAO0B,gBAAgB,CAAC,OAAO,EAAE1B,kBAAAA,CAAO2B,iBAAiB,EAAE;YACtEC,QAAQ,CAAC,UAAU,EAAE5B,kBAAAA,CAAO0B,gBAAgB,CAAC,CAAC,CAAC;YAC/CT,cAAcjB,kBAAAA,CAAO6B,kBAAkB;QACzC,EAAE;QACF,WAAW;YACTC,SAAS;QACX;QACA,UAAU;YACR,WAAW;gBACTA,SAAS;YACX;QACF;QACA,WAAW;YACT,WAAW;gBACTA,SAAS;YACX;QACF;IACF;IACAC,cAAc;QACZzB,OAAON,kBAAAA,CAAOgC,kBAAkB;QAChCtB,SAAS,GAAGV,kBAAAA,CAAOS,gBAAgB,CAAC,CAAC,EAAET,kBAAAA,CAAOiC,mBAAmB,EAAE;QACnET,SAAS,GAAGxB,kBAAAA,CAAOyB,eAAe,CAAC,kBAAkB,CAAC;QACtD,OAAG1B,6CAAAA,EAAgC;YACjCmB,QAAQ,GAAGlB,kBAAAA,CAAO0B,gBAAgB,CAAC,OAAO,EAAE1B,kBAAAA,CAAO2B,iBAAiB,EAAE;YACtEC,QAAQ,CAAC,UAAU,EAAE5B,kBAAAA,CAAO0B,gBAAgB,CAAC,CAAC,CAAC;YAC/CT,cAAcjB,kBAAAA,CAAO6B,kBAAkB;QACzC,EAAE;QACF,WAAW;YACTvB,OAAON,kBAAAA,CAAOgC,kBAAkB;YAChCf,cAAc;QAChB;QACA,UAAU;YACR,WAAW;gBACTa,SAAS;YACX;QACF;QACA,WAAW;YACT,WAAW;gBACTA,SAAS;YACX;QACF;IACF;IACAI,OAAO;QACL,WAAW;YACTtB,iBAAiBZ,kBAAAA,CAAOmC,4BAA4B;YACpDL,SAAS;QACX;QACA,UAAU;YACR,WAAW;gBACTlB,iBAAiBZ,kBAAAA,CAAOoC,iCAAiC;gBACzDN,SAAS;YACX;QACF;QACA,WAAW;YACT,WAAW;gBACTlB,iBAAiBZ,kBAAAA,CAAOqC,mCAAmC;gBAC3DP,SAAS;YACX;QACF;IACF;IACAQ,iBAAiB;QACf,WAAW;YACTR,SAAS;YACTlB,iBAAiBZ,kBAAAA,CAAOmB,uBAAuB;QACjD;QACA,UAAU;YACR,WAAW;gBACTW,SAAS;YACX;QACF;QACA,WAAW;YACT,WAAW;gBACTA,SAAS;YACX;QACF;IACF;AACF;AAKO,4CAA4C,CAACU;IAClD;IAEA,MAAMC,SAAStC;IAEf,MAAM,EAAEuC,QAAQ,EAAEC,UAAU,EAAE,GAAGH;IAEjC,oDAAoD;IACpDA,MAAMtC,IAAI,CAAC0C,SAAS,OAAG/C,mBAAAA,EACrBI,4BAA4BC,IAAI,EAChCuC,OAAOvC,IAAI,EACXwC,WAAWD,OAAOV,YAAY,GAAGU,OAAOlB,cAAc,EACtDoB,eAAe,WAAWF,OAAOP,KAAK,EACtC,CAACQ,YAAYC,eAAe,WAAWF,OAAOH,eAAe,EAC7DE,MAAMtC,IAAI,CAAC0C,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport type { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}
|
|
@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useCarouselNavContainer_unstable", {
|
|
|
8
8
|
return useCarouselNavContainer_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
11
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
12
|
const _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
|
|
15
13
|
const _CarouselButton = require("../CarouselButton/CarouselButton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"mappings":";;;;+BAgBaK;;;;;;gCAfkC,4BAA4B;wCAEpC,mDAAmD;gCAC3D,mCAAmC;8BAC1C,0BAA0B;AAW3C,yCAAyC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX,8CAAAA;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN,8BAAAA;YACNY,MAAMZ,8BAAAA;YACNa,UAAUd,8CAAAA;YACVgB,aAAad,qBAAAA;YACbe,aAAaf,qBAAAA;YACba,iBAAiBb,qBAAAA;QACnB;QACAiB,MAAMpB,oBAAAA,CAAKqB,MAAM,KACftB,wCAAAA,EAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js
CHANGED
|
@@ -155,14 +155,18 @@ const useCarouselNavContainerStyles_unstable = (state)=>{
|
|
|
155
155
|
const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
|
|
156
156
|
const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
|
|
157
157
|
const styles = useStyles();
|
|
158
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
158
159
|
state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
|
|
159
160
|
if (state.next) {
|
|
161
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
160
162
|
state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
|
|
161
163
|
}
|
|
162
164
|
if (state.prev) {
|
|
165
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
163
166
|
state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
|
|
164
167
|
}
|
|
165
168
|
if (state.autoplay) {
|
|
169
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
166
170
|
state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
|
|
167
171
|
}
|
|
168
172
|
return state;
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,8BAA8B;;;0CAmFY
|
|
1
|
+
{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n // eslint-disable-next-line react-hooks/immutability\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n // eslint-disable-next-line react-hooks/immutability\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n // eslint-disable-next-line react-hooks/immutability\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js
CHANGED
|
@@ -106,14 +106,18 @@ const useCarouselNavContainerStyles_unstable = (state)=>{
|
|
|
106
106
|
const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
|
|
107
107
|
const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
|
|
108
108
|
const styles = useStyles();
|
|
109
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
109
110
|
state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
|
|
110
111
|
if (state.next) {
|
|
112
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
111
113
|
state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
|
|
112
114
|
}
|
|
113
115
|
if (state.prev) {
|
|
116
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
114
117
|
state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
|
|
115
118
|
}
|
|
116
119
|
if (state.autoplay) {
|
|
120
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
117
121
|
state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
|
|
118
122
|
}
|
|
119
123
|
return state;
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,8BAAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n // eslint-disable-next-line react-hooks/immutability\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n // eslint-disable-next-line react-hooks/immutability\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n // eslint-disable-next-line react-hooks/immutability\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}
|
package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js
CHANGED
|
@@ -124,9 +124,11 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
|
|
|
124
124
|
'use no memo';
|
|
125
125
|
const { selected } = state;
|
|
126
126
|
const styles = useStyles();
|
|
127
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
127
128
|
state.root.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
|
|
128
129
|
if (state.image) {
|
|
129
130
|
var _state_image;
|
|
131
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
130
132
|
state.image.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
|
|
131
133
|
}
|
|
132
134
|
return state;
|
package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer'\n }\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px'\n }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n if (state.image) {\n var _state_image;\n state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,gCAAgC;;;IAkC5BoC,wCAAwC;;;;uBApCJ,gBAAgB;AAE9D,yCAAyC;IAC5CnC,IAAI,EAAE,4BAA4B;IAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,iDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer'\n }\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px'\n }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n if (state.image) {\n var _state_image;\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,gCAAgC;;;IAkC5BoC,wCAAwC;;;;uBApCJ,gBAAgB;AAE9D,yCAAyC;IAC5CnC,IAAI,EAAE,4BAA4B;IAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,iDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;IAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;QACb,IAAIsC,YAAY;QAChB,oDAAA;QACAH,KAAK,CAACnC,KAAK,CAACqC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAAA,AAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;IAC/N;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js
CHANGED
|
@@ -55,9 +55,11 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
|
|
|
55
55
|
'use no memo';
|
|
56
56
|
const { selected } = state;
|
|
57
57
|
const styles = useStyles();
|
|
58
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
58
59
|
state.root.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
|
|
59
60
|
if (state.image) {
|
|
60
61
|
var _state_image;
|
|
62
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
61
63
|
state.image.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
|
|
62
64
|
}
|
|
63
65
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer',\n },\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall,\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px',\n },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n 'use no memo';\n\n const { selected } = state;\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n carouselNavImageButtonClassNames.root,\n styles.root,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.image) {\n state.image.className = mergeClasses(\n carouselNavImageButtonClassNames.image,\n styles.image,\n selected && styles.selected,\n state.image?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,gCAAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer',\n },\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall,\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px',\n },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n 'use no memo';\n\n const { selected } = state;\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavImageButtonClassNames.root,\n styles.root,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(\n carouselNavImageButtonClassNames.image,\n styles.image,\n selected && styles.selected,\n state.image?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,gCAAAA;;;4CAuCAmB;eAAAA;;;uBA5CwC,iBAAiB;4BAG/C,wBAAwB;AAExC,yCAAsF;IAC3FlB,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,kBAAAA,CAAOU,mBAAmB,EAAE;QACzC,GAAGX,iBAAAA,CAAWY,WAAW,CAACX,kBAAAA,CAAOY,sBAAsB,CAAC;QACxDC,cAAcb,kBAAAA,CAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,kBAAAA,CAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAKO,iDAAiD,CACtDgB;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEf,oDAAoD;IACpDe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,uBAAAA,EACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAMbkB;QALF,oDAAoD;QACpDA,MAAMlB,KAAK,CAACoB,SAAS,OAAGzB,mBAAAA,EACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,EAAA,CAC3BE,eAAAA,MAAMlB,KAAAA,AAAK,MAAA,QAAXkB,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}
|