| 1 | {"version":3,"file":"styled.js","sourceRoot":"../src/","sources":["styled.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,uDAAqG;AACrG,sFAAqF;AAmBrF,IAAM,aAAa,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAoD1C,SAAgB,MAAM,CAMpB,SAA2F,EAC3F,UAA0D,EAC1D,QAA+D,EAC/D,YAAiC,EACjC,IAAc;IAEd,YAAY,GAAG,YAAY,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAExD,IAAA,0BAAK,EAAE,wBAAsB,EAAtB,2CAAsB,CAAkB;IAEvD,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAsB,EAAE,YAA6B;QACrF,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAyC,CAAC;QAErE,IAAM,QAAQ,GAAG,mDAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjD,IAAA,kCAAwB,EAAE,kBAAG,EAAE,kDAAO,CAAc;QAC5D,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/D,8DAA8D;QAC9D,IAAM,KAAK,GAAG,CAAC,MAAM,CAAC,OAAO,IAAK,MAAM,CAAC,OAAe,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QACjF,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,gBAAgB,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE;YACjF,qFAAqF;YACrF,IAAM,kBAAkB,GAAmD,UAAC,UAAuB;gBACjG,OAAA,uCAAwB,CAAC,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC;YAAhF,CAAgF,CAAC;YAEnF,6EAA6E;YAC7E,4EAA4E;YAC3E,kBAA4D,CAAC,gBAAgB,GAAG;gBAC/E,UAAU;gBACV,gBAAgB;gBAChB,KAAK,CAAC,MAAM;aACb,CAAC;YAED,kBAA4D,CAAC,mBAAmB;gBAC/E,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAErC,MAAM,CAAC,OAAO,GAAG,kBAA2D,CAAC;SAC9E;QAED,OAAO,oBAAC,SAAS,qBAAC,GAAG,EAAE,YAAY,IAAM,IAAI,EAAM,eAAe,EAAM,KAAK,IAAE,MAAM,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC;IAC5G,CAAC,CAAC,CAAC;IACH,wFAAwF;IACxF,uDAAuD;IACvD,8DAA8D;IAC9D,OAAO,CAAC,WAAW,GAAG,YAAS,SAAS,CAAC,WAAW,IAAK,SAAiB,CAAC,IAAI,CAAE,CAAC;IAElF,0CAA0C;IAC1C,IAAM,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3D,2GAA2G;IAC3G,IAAI,OAAO,CAAC,WAAW,EAAE;QACvB,aAAa,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;KACjD;IAED,OAAO,aAAa,CAAC;AACvB,CAAC;AA3DD,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"]} |