@umodeapporg/ui 0.17.0 → 0.17.1
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":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { twMerge } from 'tailwind-merge';\n\ninterface ITabsContext {\n active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n <TabsContext.Provider value={{ active: value }}>\n <div className={twMerge('block', className)}>{children}</div>\n </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n <div role=\"tablist\" className={twMerge('relative flex', className)}>\n {children}\n </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n value: string;\n disabled?: boolean;\n className?: string;\n children: React.ReactNode;\n}\n\n/**\n * Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n *\n * The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n */\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n ({ value, disabled = false, className, children, ...rest }, ref) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n return (\n <div\n ref={ref}\n role=\"tab\"\n aria-selected={isActive}\n tabIndex={disabled ? -1 : 0}\n className={twMerge(\n classNames(\n 'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n isActive ? 'border-brand' : 'border-transparent',\n { 'pointer-events-none opacity-50': disabled },\n ),\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n <div className={twMerge('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\n/**\n * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n // `flex flex-col` is a display utility too, so merged the other way round it would win over\n // `hidden` and every inactive panel would render stacked under the active one.\n return (\n <div role=\"tabpanel\" hidden={!isActive} className={twMerge(className, classNames({ '!hidden': !isActive }))}>\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAQA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,QAAQ,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CACzD;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,QAAQ,iBAAiB,SAAS,GAC9D,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,
|
|
1
|
+
{"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { twMerge } from 'tailwind-merge';\n\ninterface ITabsContext {\n active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n <TabsContext.Provider value={{ active: value }}>\n <div className={twMerge('block', className)}>{children}</div>\n </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n <div role=\"tablist\" className={twMerge('relative flex', className)}>\n {children}\n </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n value: string;\n disabled?: boolean;\n className?: string;\n children: React.ReactNode;\n}\n\n/**\n * Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n *\n * The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n */\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n ({ value, disabled = false, className, children, ...rest }, ref) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n return (\n <div\n ref={ref}\n role=\"tab\"\n // ControlledTabs locates tabs by this attribute to scroll the header and hide clipped ones.\n data-value={value}\n aria-selected={isActive}\n tabIndex={disabled ? -1 : 0}\n className={twMerge(\n classNames(\n 'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n isActive ? 'border-brand' : 'border-transparent',\n { 'pointer-events-none opacity-50': disabled },\n ),\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n <div className={twMerge('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\n/**\n * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n // `flex flex-col` is a display utility too, so merged the other way round it would win over\n // `hidden` and every inactive panel would render stacked under the active one.\n return (\n <div role=\"tabpanel\" hidden={!isActive} className={twMerge(className, classNames({ '!hidden': !isActive }))}>\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAQA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,QAAQ,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CACzD;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,QAAQ,iBAAiB,SAAS,GAC9D,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,QAAQ,gBAAgB,SAAS,GAAI,SAAA,CAAS;AAazD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,QAAQ,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,GACvG,UACH;AAEJ;"}
|