| 1 | {"version":3,"file":"styled.js","sourceRoot":"../src/","sources":["styled.tsx"],"names":[],"mappings":";;;IAqBA,IAAM,aAAa,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAoD1C,SAAgB,MAAM,CAMpB,SAA2F,EAC3F,UAA0D,EAC1D,QAA+D,EAC/D,YAAiC,EACjC,IAAc;QAEd,YAAY,GAAG,YAAY,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;QAExD,IAAA,0BAAK,EAAE,wBAAsB,EAAtB,2CAAsB,CAAkB;QAEvD,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAsB,EAAE,YAA6B;YACrF,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAyC,CAAC;YAErE,IAAM,QAAQ,GAAG,mDAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACjD,IAAA,kCAAwB,EAAE,kBAAG,EAAE,kDAAO,CAAc;YAC5D,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAE/D,8DAA8D;YAC9D,IAAM,KAAK,GAAG,CAAC,MAAM,CAAC,OAAO,IAAK,MAAM,CAAC,OAAe,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YACjF,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,gBAAgB,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE;gBACjF,qFAAqF;gBACrF,IAAM,kBAAkB,GAAmD,UAAC,UAAuB;oBACjG,OAAA,uCAAwB,CAAC,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC;gBAAhF,CAAgF,CAAC;gBAEnF,6EAA6E;gBAC7E,4EAA4E;gBAC3E,kBAA4D,CAAC,gBAAgB,GAAG;oBAC/E,UAAU;oBACV,gBAAgB;oBAChB,KAAK,CAAC,MAAM;iBACb,CAAC;gBAED,kBAA4D,CAAC,mBAAmB;oBAC/E,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;gBAErC,MAAM,CAAC,OAAO,GAAG,kBAA2D,CAAC;aAC9E;YAED,OAAO,oBAAC,SAAS,qBAAC,GAAG,EAAE,YAAY,IAAM,IAAI,EAAM,eAAe,EAAM,KAAK,IAAE,MAAM,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC;QAC5G,CAAC,CAAC,CAAC;QACH,wFAAwF;QACxF,uDAAuD;QACvD,8DAA8D;QAC9D,OAAO,CAAC,WAAW,GAAG,YAAS,SAAS,CAAC,WAAW,IAAK,SAAiB,CAAC,IAAI,CAAE,CAAC;QAElF,0CAA0C;QAC1C,IAAM,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAC3D,2GAA2G;QAC3G,IAAI,OAAO,CAAC,WAAW,EAAE;YACvB,aAAa,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;SACjD;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IA3DD,wBA2DC","sourcesContent":["import * as React from 'react';\nimport { IStyleSet, IStyleFunctionOrObject, concatStyleSetsWithProps } from '@uifabric/merge-styles';\nimport { useCustomizationSettings } from './customizations/useCustomizationSettings';\n\nexport interface IPropsWithStyles<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>> {\n styles?: IStyleFunctionOrObject<TStyleProps, TStyleSet>;\n}\n\nexport interface ICustomizableProps {\n /**\n * Name of scope, which can be targeted using the Customizer.\n */\n scope: string;\n\n /**\n * List of fields which can be customized.\n * @defaultvalue [ 'theme', 'styles' ]\n */\n fields?: string[];\n}\n\nconst DefaultFields = ['theme', 'styles'];\n\nexport type StyleFunction<TStyleProps, TStyleSet> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {\n /** Cache for all style functions. */\n __cachedInputs__: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[];\n\n /** True if no styles prop or styles from Customizer is passed to wrapped component. */\n __noStyleOverride__: boolean;\n};\n\n/**\n * The styled HOC wrapper allows you to create a functional wrapper around a given component which will resolve\n * getStyles functional props, and mix customized props passed in using concatStyleSets.\n *\n * @example\n * ```tsx\n * export const Toggle = styled(\n * ToggleBase,\n * props => ({ root: { background: 'red' }})\n * );\n * ```\n * @param Component - The unstyled base component to render, which receives styles.\n * @param baseStyles - The styles which should be curried with the component.\n * @param getProps - A helper which provides default props.\n * @param customizable - An object which defines which props can be customized using the Customizer.\n * @param pure - A boolean indicating if the component should avoid re-rendering when props haven't changed.\n * Note that pure should not be used on components which allow children, or take in complex objects or\n * arrays as props which could mutate on every render.\n */\nexport function styled<\n TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>,\n TStyleProps,\n TStyleSet extends IStyleSet<TStyleSet>\n>(\n Component: React.ComponentClass<TComponentProps> | React.FunctionComponent<TComponentProps>,\n baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>,\n getProps?: (props: TComponentProps) => Partial<TComponentProps>,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.FunctionComponent<TComponentProps>;\nexport function styled<\n TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet> & React.RefAttributes<TRef>,\n TStyleProps,\n TStyleSet extends IStyleSet<TStyleSet>,\n TRef = unknown\n>(\n Component: React.ComponentClass<TComponentProps> | React.FunctionComponent<TComponentProps>,\n baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>,\n getProps?: (props: TComponentProps) => Partial<TComponentProps>,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.ForwardRefExoticComponent<React.PropsWithoutRef<TComponentProps> & React.RefAttributes<TRef>>;\nexport function styled<\n TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet> & React.RefAttributes<TRef>,\n TStyleProps,\n TStyleSet extends IStyleSet<TStyleSet>,\n TRef = unknown\n>(\n Component: React.ComponentClass<TComponentProps> | React.FunctionComponent<TComponentProps>,\n baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>,\n getProps?: (props: TComponentProps) => Partial<TComponentProps>,\n customizable?: ICustomizableProps,\n pure?: boolean,\n) {\n customizable = customizable || { scope: '', fields: undefined };\n\n const { scope, fields = DefaultFields } = customizable;\n\n const Wrapped = React.forwardRef((props: TComponentProps, forwardedRef: React.Ref<TRef>) => {\n const styles = React.useRef<StyleFunction<TStyleProps, TStyleSet>>();\n\n const settings = useCustomizationSettings(fields, scope);\n const { styles: customizedStyles, dir, ...rest } = settings;\n const additionalProps = getProps ? getProps(props) : undefined;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const cache = (styles.current && (styles.current as any).__cachedInputs__) || [];\n if (!styles.current || customizedStyles !== cache[1] || props.styles !== cache[2]) {\n // Using styled components as the Component arg will result in nested styling arrays.\n const concatenatedStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet> = (styleProps: TStyleProps) =>\n concatStyleSetsWithProps(styleProps, baseStyles, customizedStyles, props.styles);\n\n // The __cachedInputs__ array is attached to the function and consumed by the\n // classNamesFunction as a list of keys to include for memoizing classnames.\n (concatenatedStyles as StyleFunction<TStyleProps, TStyleSet>).__cachedInputs__ = [\n baseStyles,\n customizedStyles,\n props.styles,\n ];\n\n (concatenatedStyles as StyleFunction<TStyleProps, TStyleSet>).__noStyleOverride__ =\n !customizedStyles && !props.styles;\n\n styles.current = concatenatedStyles as StyleFunction<TStyleProps, TStyleSet>;\n }\n\n return <Component ref={forwardedRef} {...rest} {...additionalProps} {...props} styles={styles.current} />;\n });\n // Function.prototype.name is an ES6 feature, so the cast to any is required until we're\n // able to drop IE 11 support and compile with ES6 libs\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Wrapped.displayName = `Styled${Component.displayName || (Component as any).name}`;\n\n // This preserves backwards compatibility.\n const pureComponent = pure ? React.memo(Wrapped) : Wrapped;\n // Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.\n if (Wrapped.displayName) {\n pureComponent.displayName = Wrapped.displayName;\n }\n\n return pureComponent;\n}\n"]} |