@os-design/core 1.0.149 → 1.0.150
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n /**\n * Applies the red style to the field.\n * @default false\n */\n hasError?: boolean;\n /**\n * Whether the skeleton is displayed.\n * @default false\n */\n loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n p.hasError &&\n css`\n color: ${clr(p.theme.formItemColorError)};\n `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n (\n {\n label,\n help,\n optional = false,\n hasError = false,\n loading = false,\n id,\n children,\n ...rest\n },\n ref\n ) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n const renderChildren = useCallback(() => {\n const c = React.isValidElement(children)\n ? React.cloneElement(children, {\n id: fieldId,\n 'aria-invalid': hasError,\n 'aria-describedby': help ? helpId : undefined,\n })\n : children;\n\n if (!hasError) return c;\n\n return (\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: theme.formItemColorError,\n })}\n >\n {c}\n </ThemeOverrider>\n );\n }, [children, fieldId, help, helpId, hasError]);\n\n const renderSkeleton = useCallback(() => {\n if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n return <InputSkeleton />;\n }, [children]);\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n {loading ? renderSkeleton() : renderChildren()}\n {help && (\n <Help\n hasError={hasError}\n aria-live={hasError ? 'polite' : undefined}\n id={helpId}\n >\n {help}\n </Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,iFACXC,kBADW,CAAf;;AAIA,IAAMC,KAAK,GAAGH,kBAAA,CAAOI,KAAV,0LAII,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAJJ,EAKA,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQI,SAAZ,CAAP;AAAA,CALA,CAAX;;AAQA,IAAMC,QAAQ,GAAGX,kBAAA,CAAOY,IAAV,iHACH,UAACP,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQO,qBAAZ,CAAP;AAAA,CADG,CAAd;;AAKA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACT,CAAD;EAAA,OACrBA,CAAC,CAACU,QAAF,QACAC,WADA,+FAEW,IAAAP,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQW,kBAAZ,CAFX,CADqB;AAAA,CAAvB;;AAOA,IAAMC,IAAI,GAAG,IAAAlB,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,UAAjB,CAAd,CAAH,+IAEK,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAFL,EAGC,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQa,iBAAZ,CAAP;AAAA,CAHD,EAINL,cAJM,CAAV;AAOA;AACA;AACA;;AACA,IAAMM,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAWEC,GAXF,EAYK;EAAA,IAVDlB,KAUC,QAVDA,KAUC;EAAA,IATDmB,IASC,QATDA,IASC;EAAA,yBARDC,QAQC;EAAA,IARDA,QAQC,8BARU,KAQV;EAAA,yBAPDT,QAOC;EAAA,IAPDA,QAOC,8BAPU,KAOV;EAAA,wBANDU,OAMC;EAAA,IANDA,OAMC,6BANS,KAMT;EAAA,IALDC,EAKC,QALDA,EAKC;EAAA,IAJDC,QAIC,QAJDA,QAIC;EAAA,IAHEC,IAGF;;EACH,kBAAyB,IAAAC,iBAAA,EAAWC,6BAAX,CAAzB;EAAA,IAAQC,YAAR,eAAQA,YAAR;;EAEA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAClB;IAAA,OAAMP,EAAE,IAAIQ,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAZ;EAAA,CADkB,EAElB,CAACX,EAAD,CAFkB,CAApB;EAIA,IAAMY,OAAO,GAAG,IAAAL,cAAA,EAAQ;IAAA,uBAAeD,WAAf;EAAA,CAAR,EAAsC,CAACA,WAAD,CAAtC,CAAhB;EACA,IAAMO,MAAM,GAAG,IAAAN,cAAA,EAAQ;IAAA,sBAAcD,WAAd;EAAA,CAAR,EAAqC,CAACA,WAAD,CAArC,CAAf;EAEA,IAAMQ,cAAc,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACvC,IAAMC,CAAC,GAAG,aAAAC,iBAAA,CAAMC,cAAN,CAAqBjB,QAArB,iBACNgB,iBAAA,CAAME,YAAN,
|
|
1
|
+
{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n /**\n * Applies the red style to the field.\n * @default false\n */\n hasError?: boolean;\n /**\n * Whether the skeleton is displayed.\n * @default false\n */\n loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n p.hasError &&\n css`\n color: ${clr(p.theme.formItemColorError)};\n `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n (\n {\n label,\n help,\n optional = false,\n hasError = false,\n loading = false,\n id,\n children,\n ...rest\n },\n ref\n ) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n const renderChildren = useCallback(() => {\n const c = React.isValidElement(children)\n ? React.cloneElement<any>(children, {\n id: fieldId,\n 'aria-invalid': hasError,\n 'aria-describedby': help ? helpId : undefined,\n })\n : children;\n\n if (!hasError) return c;\n\n return (\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: theme.formItemColorError,\n })}\n >\n {c}\n </ThemeOverrider>\n );\n }, [children, fieldId, help, helpId, hasError]);\n\n const renderSkeleton = useCallback(() => {\n if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n return <InputSkeleton />;\n }, [children]);\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n {loading ? renderSkeleton() : renderChildren()}\n {help && (\n <Help\n hasError={hasError}\n aria-live={hasError ? 'polite' : undefined}\n id={helpId}\n >\n {help}\n </Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,iFACXC,kBADW,CAAf;;AAIA,IAAMC,KAAK,GAAGH,kBAAA,CAAOI,KAAV,0LAII,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAJJ,EAKA,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQI,SAAZ,CAAP;AAAA,CALA,CAAX;;AAQA,IAAMC,QAAQ,GAAGX,kBAAA,CAAOY,IAAV,iHACH,UAACP,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQO,qBAAZ,CAAP;AAAA,CADG,CAAd;;AAKA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACT,CAAD;EAAA,OACrBA,CAAC,CAACU,QAAF,QACAC,WADA,+FAEW,IAAAP,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQW,kBAAZ,CAFX,CADqB;AAAA,CAAvB;;AAOA,IAAMC,IAAI,GAAG,IAAAlB,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,UAAjB,CAAd,CAAH,+IAEK,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAFL,EAGC,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQa,iBAAZ,CAAP;AAAA,CAHD,EAINL,cAJM,CAAV;AAOA;AACA;AACA;;AACA,IAAMM,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAWEC,GAXF,EAYK;EAAA,IAVDlB,KAUC,QAVDA,KAUC;EAAA,IATDmB,IASC,QATDA,IASC;EAAA,yBARDC,QAQC;EAAA,IARDA,QAQC,8BARU,KAQV;EAAA,yBAPDT,QAOC;EAAA,IAPDA,QAOC,8BAPU,KAOV;EAAA,wBANDU,OAMC;EAAA,IANDA,OAMC,6BANS,KAMT;EAAA,IALDC,EAKC,QALDA,EAKC;EAAA,IAJDC,QAIC,QAJDA,QAIC;EAAA,IAHEC,IAGF;;EACH,kBAAyB,IAAAC,iBAAA,EAAWC,6BAAX,CAAzB;EAAA,IAAQC,YAAR,eAAQA,YAAR;;EAEA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAClB;IAAA,OAAMP,EAAE,IAAIQ,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAZ;EAAA,CADkB,EAElB,CAACX,EAAD,CAFkB,CAApB;EAIA,IAAMY,OAAO,GAAG,IAAAL,cAAA,EAAQ;IAAA,uBAAeD,WAAf;EAAA,CAAR,EAAsC,CAACA,WAAD,CAAtC,CAAhB;EACA,IAAMO,MAAM,GAAG,IAAAN,cAAA,EAAQ;IAAA,sBAAcD,WAAd;EAAA,CAAR,EAAqC,CAACA,WAAD,CAArC,CAAf;EAEA,IAAMQ,cAAc,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACvC,IAAMC,CAAC,GAAG,aAAAC,iBAAA,CAAMC,cAAN,CAAqBjB,QAArB,iBACNgB,iBAAA,CAAME,YAAN,CAAwBlB,QAAxB,EAAkC;MAChCD,EAAE,EAAEY,OAD4B;MAEhC,gBAAgBvB,QAFgB;MAGhC,oBAAoBQ,IAAI,GAAGgB,MAAH,GAAYO;IAHJ,CAAlC,CADM,GAMNnB,QANJ;IAQA,IAAI,CAACZ,QAAL,EAAe,OAAO2B,CAAP;IAEf,oBACE,gCAAC,uBAAD;MACE,SAAS,EAAE,mBAACpC,KAAD;QAAA,OAAY;UACrByC,gBAAgB,EAAEzC,KAAK,CAACW;QADH,CAAZ;MAAA;IADb,GAKGyB,CALH,CADF;EASD,CApBsB,EAoBpB,CAACf,QAAD,EAAWW,OAAX,EAAoBf,IAApB,EAA0BgB,MAA1B,EAAkCxB,QAAlC,CApBoB,CAAvB;EAsBA,IAAMiC,cAAc,GAAG,IAAAP,kBAAA,EAAY,YAAM;IACvC,IAAI,IAAAQ,6BAAA,EAAkBtB,QAAlB,EAA4BuB,oBAA5B,CAAJ,EAA2C,oBAAO,gCAAC,4BAAD,OAAP;IAC3C,IAAI,IAAAD,6BAAA,EAAkBtB,QAAlB,EAA4BwB,kBAA5B,CAAJ,EAAyC,oBAAO,gCAAC,0BAAD,OAAP;IACzC,oBAAO,gCAAC,yBAAD,OAAP;EACD,CAJsB,EAIpB,CAACxB,QAAD,CAJoB,CAAvB;EAMA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAC,OAAhB;IAAwB,EAAE,EAAED;EAA5B,GAAoCE,IAApC;IAA0C,GAAG,EAAEN;EAA/C,IACGlB,KAAK,iBACJ,gCAAC,KAAD;IAAO,OAAO,EAAEkC;EAAhB,GACGlC,KADH,EAEGoB,QAAQ,iBAAI,gCAAC,QAAD,aAAYO,YAAZ,MAFf,CAFJ,EAOGN,OAAO,GAAGuB,cAAc,EAAjB,GAAsBR,cAAc,EAP9C,EAQGjB,IAAI,iBACH,gCAAC,IAAD;IACE,QAAQ,EAAER,QADZ;IAEE,aAAWA,QAAQ,GAAG,QAAH,GAAc+B,SAFnC;IAGE,EAAE,EAAEP;EAHN,GAKGhB,IALH,CATJ,CADF;AAoBD,CAvEc,CAAjB;AA0EAH,QAAQ,CAACgC,WAAT,GAAuB,UAAvB;eAEehC,Q"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n margin-bottom: 0.4em;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n ${m.min.xs} {\n padding: 0 0.8em;\n }\n\n ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n &:not(:last-of-type) {\n padding-bottom: 0.4em;\n border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n }\n &:not(:first-of-type) {\n margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n ${m.min.xs} {\n margin-top: 0.4em;\n }\n }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect } = useContext(MenuContext);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onClick: childOnClick } = child.props;\n return React.cloneElement(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onClick: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnClick) childOnClick(e);\n },\n ...(!closeOnSelect\n ? {\n role:\n maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n 'aria-checked': selectedItems.includes(childValue),\n }\n : {}),\n });\n });\n }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n return (\n <Container\n role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n {...rest}\n ref={ref}\n >\n {title && <Title>{title}</Title>}\n {menuItems}\n </Container>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAMA,KAAK,GAAGC,kBAAA,CAAOC,GAAV,qOAEI,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAFJ,EAGA,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQI,mBAAZ,CAAP;AAAA,CAHA,EAMI,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,0BAAR,CAAmC,CAAnC,CAAP;AAAA,CANJ,EAOPC,QAAA,CAAEC,GAAF,CAAMC,EAPC,EAWPC,sBAXO,CAAX;;AAcA,IAAMC,SAAS,GAAGb,kBAAA,CAAOC,GAAV,+QAGgB,UAACC,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQW,qBAAZ,CAAP;AAAA,CAHhB,EAMG,UAACZ,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQY,wBAAR,CAAiC,CAAjC,CAAP;AAAA,CANH,EAOTN,QAAA,CAAEC,GAAF,CAAMC,EAPG,CAAf;AAaA;AACA;AACA;;;AACA,IAAMK,SAAS,gBAAG,IAAAC,iBAAA,EAChB,gBAUEC,GAVF,EAWK;EAAA,IATDC,KASC,QATDA,KASC;EAAA,iCARDC,gBAQC;EAAA,IARDA,gBAQC,sCARkB,CAQlB;EAAA,IAPDC,KAOC,QAPDA,KAOC;EAAA,IANDC,YAMC,QANDA,YAMC;EAAA,yBALDC,QAKC;EAAA,IALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;EAAA,IAJDC,QAIC,QAJDA,QAIC;EAAA,IAHEC,IAGF;;EACH,kBAA0B,IAAAC,iBAAA,EAAWC,sBAAX,CAA1B;EAAA,IAAQC,aAAR,eAAQA,aAAR;;EACA,yBAA4C,IAAAC,wBAAA,EAAkB;IAC5DR,KAAK,EAALA,KAD4D;IAE5DC,YAAY,EAAZA,YAF4D;IAG5DC,QAAQ,EAARA;EAH4D,CAAlB,CAA5C;EAAA;EAAA,IAAOO,cAAP;EAAA,IAAuBC,iBAAvB;;EAMA,IAAMC,QAAQ,GAAG,IAAAC,2BAAA,EAAiB;IAChCZ,KAAK,EAAES,cAAc,IAAI,EADO;IAEhCP,QAAQ,EAAEQ,iBAFsB;IAGhCX,gBAAgB,EAAhBA;EAHgC,CAAjB,CAAjB;EAMA,IAAMc,SAAS,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAC9B,IAAMC,aAAa,GAAGN,cAAc,IAAI,EAAxC;IACA,OAAOO,iBAAA,CAAMC,QAAN,CAAeC,GAAf,CAAmBf,QAAnB,EAA6B,UAACgB,KAAD,EAAW;MAC7C,IAAI,eAACH,iBAAA,CAAMI,cAAN,CAAqBD,KAArB,CAAD,IAAgCA,KAAK,CAACE,IAAN,KAAeC,oBAAnD,EACE,OAAOH,KAAP;MACF,mBAAqDA,KAAK,CAACI,KAA3D;MAAA,IAAeC,UAAf,gBAAQxB,KAAR;MAAA,IAAoCyB,YAApC,gBAA2BC,OAA3B;MACA,oBAAOV,iBAAA,CAAMW,YAAN,
|
|
1
|
+
{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n margin-bottom: 0.4em;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n ${m.min.xs} {\n padding: 0 0.8em;\n }\n\n ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n &:not(:last-of-type) {\n padding-bottom: 0.4em;\n border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n }\n &:not(:first-of-type) {\n margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n ${m.min.xs} {\n margin-top: 0.4em;\n }\n }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect } = useContext(MenuContext);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onClick: childOnClick } = child.props;\n return React.cloneElement<any>(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onClick: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnClick) childOnClick(e);\n },\n ...(!closeOnSelect\n ? {\n role:\n maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n 'aria-checked': selectedItems.includes(childValue),\n }\n : {}),\n });\n });\n }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n return (\n <Container\n role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n {...rest}\n ref={ref}\n >\n {title && <Title>{title}</Title>}\n {menuItems}\n </Container>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n /**\n * Applies the red style to the field.\n * @default false\n */\n hasError?: boolean;\n /**\n * Whether the skeleton is displayed.\n * @default false\n */\n loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n p.hasError &&\n css`\n color: ${clr(p.theme.formItemColorError)};\n `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n (\n {\n label,\n help,\n optional = false,\n hasError = false,\n loading = false,\n id,\n children,\n ...rest\n },\n ref\n ) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n const renderChildren = useCallback(() => {\n const c = React.isValidElement(children)\n ? React.cloneElement(children, {\n id: fieldId,\n 'aria-invalid': hasError,\n 'aria-describedby': help ? helpId : undefined,\n })\n : children;\n\n if (!hasError) return c;\n\n return (\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: theme.formItemColorError,\n })}\n >\n {c}\n </ThemeOverrider>\n );\n }, [children, fieldId, help, helpId, hasError]);\n\n const renderSkeleton = useCallback(() => {\n if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n return <InputSkeleton />;\n }, [children]);\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n {loading ? renderSkeleton() : renderChildren()}\n {help && (\n <Help\n hasError={hasError}\n aria-live={hasError ? 'polite' : undefined}\n id={helpId}\n >\n {help}\n </Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,EAAyCC,UAAzC,EAAqDC,OAArD,QAAoE,OAApE;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AA+BA,MAAMC,SAAS,GAAGb,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE,IAAID,UAAW;AACf,CAFA;AAIA,MAAMa,KAAK,GAAGd,MAAM,CAACe,KAAM;AAC3B;AACA;AACA;AACA,eAAgBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQG,SAAT,CAAoB;AACzC,CANA;AAQA,MAAMC,QAAQ,GAAGrB,MAAM,CAACsB,IAAK;AAC7B,WAAYN,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQM,qBAAT,CAAgC;AACrD;AACA,CAHA;;AAKA,MAAMC,cAAc,GAAIR,CAAD,IACrBA,CAAC,CAACS,QAAF,IACApB,GAAI;AACN,aAAaF,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQS,kBAAT,CAA6B;AAC7C,GAJA;;AAOA,MAAMC,IAAI,GAAG3B,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,UAAD,CAAxB,CAAiD;AACpE;AACA,eAAgBc,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQW,iBAAT,CAA4B;AACjD,IAAIJ,cAAe;AACnB,CALA;AAOA;AACA;AACA;;AACA,MAAMK,QAAQ,gBAAGjC,UAAU,CACzB,CACE;EACEmB,KADF;EAEEe,IAFF;EAGEC,QAAQ,GAAG,KAHb;EAIEN,QAAQ,GAAG,KAJb;EAKEO,OAAO,GAAG,KALZ;EAMEC,EANF;EAOEC,QAPF;EAQE,GAAGC;AARL,CADF,EAWEC,GAXF,KAYK;EACH,MAAM;IAAEC;EAAF,IAAmBvC,UAAU,CAACY,iBAAD,CAAnC;EAEA,MAAM4B,WAAW,GAAGvC,OAAO,CACzB,MAAMkC,EAAE,IAAIM,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CADa,EAEzB,CAACT,EAAD,CAFyB,CAA3B;EAIA,MAAMU,OAAO,GAAG5C,OAAO,CAAC,MAAO,SAAQuC,WAAY,EAA5B,EAA+B,CAACA,WAAD,CAA/B,CAAvB;EACA,MAAMM,MAAM,GAAG7C,OAAO,CAAC,MAAO,QAAOuC,WAAY,EAA3B,EAA8B,CAACA,WAAD,CAA9B,CAAtB;EAEA,MAAMO,cAAc,GAAGhD,WAAW,CAAC,MAAM;IACvC,MAAMiD,CAAC,GAAG,aAAAnD,KAAK,CAACoD,cAAN,CAAqBb,QAArB,iBACNvC,KAAK,CAACqD,YAAN,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n /**\n * Label of the field.\n * @default undefined\n */\n label?: string;\n /**\n * The help message located at the bottom of the field.\n * @default undefined\n */\n help?: string;\n /**\n * Whether the field is optional.\n * @default false\n */\n optional?: boolean;\n /**\n * Applies the red style to the field.\n * @default false\n */\n hasError?: boolean;\n /**\n * Whether the skeleton is displayed.\n * @default false\n */\n loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst Label = styled.label`\n display: inline-flex;\n align-items: center;\n margin-bottom: 0.4em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n color: ${(p) => clr(p.theme.formItemColorOptional)};\n margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n p.hasError &&\n css`\n color: ${clr(p.theme.formItemColorError)};\n `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n margin-top: 0.1em;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.formItemColorHelp)};\n ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n (\n {\n label,\n help,\n optional = false,\n hasError = false,\n loading = false,\n id,\n children,\n ...rest\n },\n ref\n ) => {\n const { optionalText } = useContext(FormConfigContext);\n\n const containerId = useMemo(\n () => id || Math.random().toString(36).slice(2, 11),\n [id]\n );\n const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n const renderChildren = useCallback(() => {\n const c = React.isValidElement(children)\n ? React.cloneElement<any>(children, {\n id: fieldId,\n 'aria-invalid': hasError,\n 'aria-describedby': help ? helpId : undefined,\n })\n : children;\n\n if (!hasError) return c;\n\n return (\n <ThemeOverrider\n overrides={(theme) => ({\n inputColorBorder: theme.formItemColorError,\n })}\n >\n {c}\n </ThemeOverrider>\n );\n }, [children, fieldId, help, helpId, hasError]);\n\n const renderSkeleton = useCallback(() => {\n if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n return <InputSkeleton />;\n }, [children]);\n\n return (\n <Container role='group' id={id} {...rest} ref={ref}>\n {label && (\n <Label htmlFor={fieldId}>\n {label}\n {optional && <Optional>({optionalText})</Optional>}\n </Label>\n )}\n {loading ? renderSkeleton() : renderChildren()}\n {help && (\n <Help\n hasError={hasError}\n aria-live={hasError ? 'polite' : undefined}\n id={helpId}\n >\n {help}\n </Help>\n )}\n </Container>\n );\n }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n margin-bottom: 0.4em;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n ${m.min.xs} {\n padding: 0 0.8em;\n }\n\n ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n &:not(:last-of-type) {\n padding-bottom: 0.4em;\n border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n }\n &:not(:first-of-type) {\n margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n ${m.min.xs} {\n margin-top: 0.4em;\n }\n }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect } = useContext(MenuContext);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onClick: childOnClick } = child.props;\n return React.cloneElement(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onClick: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnClick) childOnClick(e);\n },\n ...(!closeOnSelect\n ? {\n role:\n maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n 'aria-checked': selectedItems.includes(childValue),\n }\n : {}),\n });\n });\n }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n return (\n <Container\n role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n {...rest}\n ref={ref}\n >\n {title && <Title>{title}</Title>}\n {menuItems}\n </Container>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,iBAAT,QAAkC,kBAAlC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,gBAAT,EAA2BC,WAA3B,QAA8C,uBAA9C;AACA,OAAOC,QAAP,MAAqB,aAArB;AAkCA,MAAMC,KAAK,GAAGR,MAAM,CAACS,GAAI;AACzB;AACA,eAAgBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQG,mBAAT,CAA8B;AACnD;AACA;AACA,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,0BAAR,CAAmC,CAAnC,CAAsC;AAC5D,IAAIX,CAAC,CAACY,GAAF,CAAMC,EAAG;AACb;AACA;AACA;AACA,IAAIf,cAAe;AACnB,CAZA;AAcA,MAAMgB,SAAS,GAAGlB,MAAM,CAACS,GAAI;AAC7B;AACA;AACA,+BAAgCC,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQQ,qBAAT,CAAgC;AACzE;AACA;AACA,kBAAmBT,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQS,wBAAR,CAAiC,CAAjC,CAAoC;AAC7D,MAAMhB,CAAC,CAACY,GAAF,CAAMC,EAAG;AACf;AACA;AACA;AACA,CAXA;AAaA;AACA;AACA;;AACA,MAAMI,SAAS,gBAAGxB,UAAU,CAC1B,CACE;EACEyB,KADF;EAEEC,gBAAgB,GAAG,CAFrB;EAGEC,KAHF;EAIEC,YAJF;EAKEC,QAAQ,GAAG,MAAM,CAAE,CALrB;EAMEC,QANF;EAOE,GAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;EACH,MAAM;IAAEC;EAAF,IAAoBhC,UAAU,CAACQ,WAAD,CAApC;EACA,MAAM,CAACyB,cAAD,EAAiBC,iBAAjB,IAAsC7B,iBAAiB,CAAC;IAC5DqB,KAD4D;IAE5DC,YAF4D;IAG5DC;EAH4D,CAAD,CAA7D;EAMA,MAAMO,QAAQ,GAAG5B,gBAAgB,CAAC;IAChCmB,KAAK,EAAEO,cAAc,IAAI,EADO;IAEhCL,QAAQ,EAAEM,iBAFsB;IAGhCT;EAHgC,CAAD,CAAjC;EAMA,MAAMW,SAAS,GAAGnC,OAAO,CAAC,MAAM;IAC9B,MAAMoC,aAAa,GAAGJ,cAAc,IAAI,EAAxC;IACA,OAAOnC,KAAK,CAACwC,QAAN,CAAeC,GAAf,CAAmBV,QAAnB,EAA8BW,KAAD,IAAW;MAC7C,IAAI,eAAC1C,KAAK,CAAC2C,cAAN,CAAqBD,KAArB,CAAD,IAAgCA,KAAK,CAACE,IAAN,KAAejC,QAAnD,EACE,OAAO+B,KAAP;MACF,MAAM;QAAEd,KAAK,EAAEiB,UAAT;QAAqBC,OAAO,EAAEC;MAA9B,IAA+CL,KAAK,CAACM,KAA3D;MACA,oBAAOhD,KAAK,CAACiD,YAAN,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: ${(p) => p.theme.sizes.small}em;\n color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n margin-bottom: 0.4em;\n\n padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n ${m.min.xs} {\n padding: 0 0.8em;\n }\n\n ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n &:not(:last-of-type) {\n padding-bottom: 0.4em;\n border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n }\n &:not(:first-of-type) {\n margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n ${m.min.xs} {\n margin-top: 0.4em;\n }\n }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect } = useContext(MenuContext);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onClick: childOnClick } = child.props;\n return React.cloneElement<any>(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onClick: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnClick) childOnClick(e);\n },\n ...(!closeOnSelect\n ? {\n role:\n maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n 'aria-checked': selectedItems.includes(childValue),\n }\n : {}),\n });\n });\n }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n return (\n <Container\n role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n {...rest}\n ref={ref}\n >\n {title && <Title>{title}</Title>}\n {menuItems}\n </Container>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.150",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@os-design/date-picker-utils": "^1.0.9",
|
|
33
|
-
"@os-design/icons": "^1.0.
|
|
33
|
+
"@os-design/icons": "^1.0.40",
|
|
34
34
|
"@os-design/input-number-utils": "^1.0.16",
|
|
35
35
|
"@os-design/media": "^1.0.15",
|
|
36
36
|
"@os-design/menu-utils": "^1.0.10",
|
|
37
37
|
"@os-design/portal": "^1.0.5",
|
|
38
|
-
"@os-design/styles": "^1.0.
|
|
39
|
-
"@os-design/theming": "^1.0.
|
|
40
|
-
"@os-design/utils": "^1.0.
|
|
38
|
+
"@os-design/styles": "^1.0.38",
|
|
39
|
+
"@os-design/theming": "^1.0.36",
|
|
40
|
+
"@os-design/utils": "^1.0.53",
|
|
41
41
|
"@os-team/password-score": "^1.0.3",
|
|
42
42
|
"facepaint": "^1.2.1",
|
|
43
43
|
"react-focus-lock": "^2.9.1",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"react": ">=18",
|
|
58
58
|
"react-dom": ">=18"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "5b1feb3671b98c041f2ed5e0780ad469f6475f2c"
|
|
61
61
|
}
|